var imageDisplayState = 'fadeIn';
var imageDisplayHidable = true;

var IE = document.all ? true : false;

if(!IE) { 
	document.captureEvents(Event.MOUSEMOVE);
} else {
	var textDisplay = document.getElementById('textDisplay');
}

document.onmousemove = getMousePosition;

function getMousePosition(e) {
	var mouseX = 0;
	var mouseY = 0;

	if(IE) {
		mouseX = event.clientX + document.body.scrollLeft
		mouseY = event.clientY + document.body.scrollTop
	} else {
		mouseX = e.pageX
		mouseY = e.pageY
	}  

	var main = document.getElementById('bgBook1');
	var display = document.getElementById('imageDisplay');
	
	var left = main.offsetLeft + display.offsetLeft;
	var top = main.offsetTop + display.offsetTop;
	
	var width = 580;
	var height = 407;

	if(mouseX < 0) mouseX = 0;
	if(mouseY < 0) mouseY = 0;  
	
	if(mouseX < left || mouseX > left + width ||
		mouseY < top || mouseY > top + height) {
		showImageDisplay();
	} else {
		hideImageDisplay();
	}

  return true;
}

function showImageDisplay()
{
	var imageDisplay = document.getElementById('imageDisplay');

	if(imageDisplay && imageDisplayState != 'fadeIn') {
		//alert('show');	
		imageDisplayState = 'fadeIn';
		fade('imageDisplay', 0, 100, 500);
	}	
}

function hideImageDisplay()
{
	var imageDisplay = document.getElementById('imageDisplay');
	
	if(imageDisplay && imageDisplayState != 'fadeOut' && imageDisplayHidable) {
		//alert('hide');
		imageDisplayState = 'fadeOut';
		fade('imageDisplay', 100, 0, 500);
	}
}

function fade(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;

    if(opacStart > opacEnd) {
    	//fade out
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("setOpacity(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
    	//fade in
        for(i = opacStart; i <= opacEnd; i++) {
            setTimeout("setOpacity(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    }
}

function setOpacity(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";

    if(opacity == 0) {
    	//object.display = 'none';
    	object.zIndex = '1';
    } else {
    	//object.display = 'block';
    	object.zIndex = '99';
    }
}

function sleep(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
  		now = new Date();
  		if (now.getTime() > exitTime) {
			return;
  		}
	}
}

function selectTab(id) {
	var tab = document.getElementById(id);
	var list = tab.parentNode;
	var tabs = list.getElementsByTagName('li');
	
	for(i = 0; i < tabs.length; i++) {
		tabs[i].className = '';
	}
	
	tab.className = 'selected';
}

function selectImage(id) 
{
	var link = document.getElementById(id);
	var list = link.parentNode;
	var links = list.getElementsByTagName('a');
	
//	var previousLink = document.getElementById('leftArrow');
//	var nextLink = document.getElementById('rightArrow');
	
//	var currentItemIndex = 0;
	
	for(i = 0; i < links.length; i++) {
		links[i].className = 'item';
		
//		if(links[i].id == id) {
//			currentItemIndex = i;
//		}
	}
/*
	if(currentItemIndex > 0) {
		previousLink.onclick = 'function() {selectImage(\''+links[currentItemIndex-1].id+'\'); return false;}';
		previousLink.className = '';
	} else if(previousLink.href == document.location) {
		previousLink.className = 'selected';
		previousLink.onclick = 'return false;';
	} else {
		previousLink.onclick = 'return true';
	}

	if(currentItemIndex < links.length-1) {
		nextLink.onclick = 'selectImage(\''+links[currentItemIndex+1].id+'\'); return false;';
//		alert(nextLink.onclick);
		nextLink.className = '';
	} else if(nextLink.href == document.location) {
		nextLink.className = 'selected';
		nextLink.onclick = 'return false;';
	} else {
		nextLink.onclick = 'return true';
	}
	*/
	link.className = 'item selected';
	loadImage(link.href);
}

function loadImage(url)
{
	var imageDisplay = document.getElementById('imageDisplay');
	imageDisplay.style.backgroundImage = 'url(' + url + ')';
}