var imageStore = {};

function preloadMenuImages(){
	var menu = [
		'about_kairos',
		'products','velvet','leather','silk','fauxsuede','unisex','custom_orders',
		'stores',
		'events',
		'media',
		'raves',
		'wholesale',
		'contact_us'
	];
	var i,n;
	for(i in menu){
		n = 'menu_' + menu[i];
		imageStore[n] = [];
		imageStore[n][0] = new Image();
		imageStore[n][0].src = '/images/'+n+'0.gif';
		imageStore[n][1] = new Image();
		imageStore[n][1].src = '/images/'+n+'1.gif';
	}
}

preloadMenuImages();
menuTimeOut = false;

function imgOver( img, menu ) {
	//
	// store UP dimensions for Safari
	if(img.uwidth == undefined){
		img.uwidth = img.offsetWidth
		img.uheight = img.offsetHeight
	}
	//
	// swap image src
	img.src = imageStore[img.name][1].src;
	//
	// set OVER dimensions for safari
	if(img.owidth){
		img.style.width = img.owidth + "px"
		img.style.height = img.oheight + "px"
	}
	if( menu ) {
		if( menuTimeOut ) clearTimeout( menuTimeOut );
		productMenuOpen();
	}
}

function imgOut( img, menu ) {
	//
	// store OVER dimensions for Safari
	if(img.owidth == undefined){
		img.owidth = img.offsetWidth
		img.oheight = img.offsetHeight
	}
	//
	// swap image src
	img.src = imageStore[img.name][0].src;
	//
	// set UP dimensions for safari
	if(img.uwidth){
		img.style.width = img.uwidth + "px"
		img.style.height = img.uheight + "px"
	}
	if( menu ) {
		menuTimeOut = setTimeout( productMenuClose, 500 );
	}
}

function productMenuOpen() {
	document.getElementById( 'menu_product1' ).style.visibility = 'visible';
	return true;
};

function productMenuClose() {
	menuTimeOut = false
	document.getElementById( 'menu_product1' ).style.visibility = 'hidden';
	return true;
};

function productDetailOpen( currIndex, linksArray ) {
	var detail = document.getElementById( 'detail' );
	if( arrayCompare( linksArray, detail.linksArray ) ) {
		// alert( 'already loaded' );
	} else {
		createProductDetail( currIndex, linksArray );
	}
		
	detail.style.visibility = 'visible';
	document.getElementById( 'trans_bg' ).style.visibility = 'visible';
//	alert( document.getElementById( 'trans_bg' ) );
    document.getElementById( 'product_flash' ).style.visibility = 'hidden';
	//return true;
};

function createProductDetail( currIndex, linksArray ) {
	var i,detail = document.getElementById( 'detail' );
	detail.linksArray = linksArray;
	
	// create the array of images but don't assign sources until it's actually required.
	detail.imageStore = [];
	for( i in linksArray ) {
		detail.imageStore[i] = {};
		detail.imageStore[i].big = new Image();
		detail.imageStore[i].small = new Image();
	}
	detail.innerHTML = getProductDetailHTML( currIndex );
	
	detail.innerHTML += '<table height="471" width="471" cellpadding=0 cellspacing=0><tr><td align="center"><img id="productDetailImage" src="images/products/' + detail.linksArray[currIndex] + '"></td></tr></table>';
//	detail.style.backgroundImage = "url('images/products/" + linksArray[currIndex] + "')";
}

function arrayCompare( arr0, arr1 ) {
	if(!arr0 || !arr1) return arr0==arr1;
	for(i in arr0){
		if( arr0[i] != arr1[i] ) return false;
	}
	return arr0.length == arr1.length;
}

function productImageSwap( currIndex ) {
	var i,detail = document.getElementById( 'detail' );
	
	// set big src if necessary and assign it to the large image
	if( !detail.imageStore[currIndex].big.src ) detail.imageStore[currIndex].big.src = 'images/products/' + detail.linksArray[currIndex];
	document.getElementById( 'productDetailImage' ).src = detail.imageStore[currIndex].big.src;
	
	// assign each thumb, setting src as necessary
	var divElem, c = 0; // c != i, so we store it here.
	for( i in detail.linksArray ) {
		if( i == currIndex ) continue;
		if( !detail.imageStore[i].small.src ) detail.imageStore[i].small.src = 'images/products/m_' + detail.linksArray[i];
		document.getElementById( 'thumb_' + c ).src = detail.imageStore[i].small.src;
		divElem = document.getElementById( 'divthumb_' + c )
		divElem.targetImage = i;
		divElem.onclick = function(){ productImageSwap( this.targetImage ); };
		c++;
	}
	
	return false;
}

function getProductDetailHTML ( currIndex ) {
	var detail = document.getElementById( 'detail' );
	var linksArray = detail.linksArray;
	var i,file,html =	'<div class="linked" style="position:absolute; left:402px; z-index:10;" onClick="javascript:productDetailClose();" /><img src="images/button_productClose.gif" /></div>';
	if(linksArray.length > 1){
		html += '<div id="thumbHolder" style="position:absolute; left:0px; z-index:20;">';
		var c = 0; // c != i, so we store it here.
		for( i in linksArray ) {
			if( i == currIndex ) continue;
//			html +=	'<div class="linked" style="position:absolute; left:0px; z-index:'+i+'0;" onClick="javascript:productDetailOpen( ' + i + ', [\'' + linksArray.join('\',\'') + '\'] );" /><img src="images/products/m_' + linksArray[i] + '" /></div>';
//			html +=	'<div class="linked" onClick="javascript:productDetailOpen( ' + i + ', [\'' + linksArray.join('\',\'') + '\'] );" /><img id="thumb_'+ i + '" src="images/products/m_' + linksArray[i] + '" /></div><br clear="all" />';
			html +=	'<div id="divthumb_'+c+'" class="linked" style="width:65px;height:65px;text-align:center;" onClick="javascript:productImageSwap( ' + i + ' );" /><img id="thumb_'+ c + '" src="images/products/m_' + linksArray[i] + '" /></div><br clear="all" />';
			c++;
		}
		html += '</div>';
	}
	return html;
}

function productDetailClose() {
    document.getElementById( 'detail' ).style.visibility = 'hidden';
	document.getElementById( 'trans_bg' ).style.visibility = 'hidden';
    document.getElementById( 'product_flash' ).style.visibility = 'visible';
    //return true;
};