var timeOutBeforeImgChanged = 100; //ms
var timeOutBeforeRedirect = 200; //ms
var showPreview = false;
var currentItem;
var previewImg;

var spacer = new Image(1, 1);
spacer.src = 'img/s.gif';

var showImages = new Object();
var overImages = new Object();
var pushedImages = new Object();
var previewImages = new Object();

var initImages = new Object();


function addEventListiner(obj, evt, func) {
	if (obj) {
		if (obj.addEventListener)
			obj.addEventListener(evt, func, false);
		else if (obj.attachEvent)
			obj.attachEvent('on' + evt, func);
	}
}

//type: 0 - showImage; 1 - overImage; 2 - pushed image; 3 - preview image
function addShowImage(src, id, type) {
	var img = new Image();
	addEventListiner(img, 'load', function() {
		onImageLoaded(id, type)
	});
	switch (type) {
		case 0:
			showImages[id] = img;
			break;
		case 1:
			overImages[id] = img;
			break;
		case 2:
			pushedImages[id] = img;
			break;
		case 3:
			previewImages[id] = img;
			break;
		default:
			alert('Image type is not supported')
	
	}
	img.src = src;
}


function onImageLoaded(id, type) {
	var showLoaded = (showImages[id]) ? ((0 == type) ? true : showImages[id].complete) : false;
	var overLoaded = (overImages[id]) ? ((1 == type) ? true : overImages[id].complete) : false;
	var pushedLoaded = (pushedImages[id]) ? ((2 == type) ? true : pushedImages[id].complete) : false;
	var previewLoaded = (showPreview) ? ((previewImages[id]) ? ((3 == type) ? true : previewImages[id].complete) : false) : true;

	if (showLoaded && overLoaded && pushedLoaded && previewLoaded && !initImages[id]) {
		initImages[id] = true;
		InitButton(id);
	}
}



function InitButton(id) {
	var obj = document.getElementById(id);
	if (obj) {
		obj.src = showImages[id].src;
		
		var aObj = obj.parentNode.children[1];
		if (aObj) {
			aObj.onclick = function() { setImage(id, 2); redirect(aObj.href, id); return false; };
			aObj.onmouseover = function() { return setImage(id, 1); };
			aObj.onfocus = function() { return setImage(id, 1); };
			aObj.onmouseout = function() { return setImage(id, 0); };
			aObj.onblur = function() { return setImage(id, 0); };
		}
	}
}

//show or hide images id - imageId; type - 0: hide image; 1: show image
function setImage(id, type) {
	if (document.images) {
		var curImg = document.images[id];
		if (0 == type) {
			//return to default state
			setDefaultImage(curImg, id);
			return true;
		}
		else if (1 == type) {
			//mouse over or focused state
			setOverImage(curImg, id);
			return true;
		}
		else {
			curImg.src = pushedImages[id].src;
			return true;
		}
	}
	
	return false;
}


function setDefaultImage(img, id) {

	img.src = showImages[id].src;
	
	currentItem = null;

	if (showPreview && previewImg) {
		if (previewImg.filters && previewImg.filters.length > 0) {

			previewImg.filters[0].apply();
			previewImg.style.visibility = 'hidden';
			previewImg.filters[0].play();
		}
		else
			previewImg.src = spacer.src;
	}
}


function setOverImage(img, id) {
	//set to default state previeous selected item
	if (currentItem && currentItem != id)
		document.images[currentItem].src = showImages[currentItem].src;

	img.src = overImages[id].src;
		
	currentItem = id;

	//show preview image if necessary
	if (showPreview && previewImg)
		if (previewImg.filters && previewImg.filters.length > 0) {
			
			previewImg.filters[0].apply();
			previewImg.style.visibility = 'visible';
			previewImg.src = previewImages[id].src;
			previewImg.filters[0].play();
		}
		else
			previewImg.src = previewImages[id].src;
}


function redirect(url, id) {
	setTimeout(function() {
		setImage(id, 1);
		setTimeout(function() {
			window.location.href = url;
		}, timeOutBeforeRedirect);
	}, timeOutBeforeImgChanged);
	return false;
}