// JavaScript Document
$(document).ready(function() {	

	//Background color, mouseover and mouseout
	var colorOver = '#000000';
	var colorOut = '#ffffff';

    //var bgcolorOver = '#ffffff';
	var bgcolorOver = '#eeeeee';
	var bgcolorOut = '#000000';
	//Padding, mouseover
	var padLeft = '20px';
	var padRight = '20px';
	
	//Default Padding
	var defpadLeft = $('#menu li a').css('paddingLeft');
	var defpadRight = $('#menu li a').css('paddingRight');
		
	//Animate the LI on mouse over, mouse out
	if (navigator.appName != "Microsoft Internet Explorer"){
	$('#menu .viewport').click(function () {	
		//Make LI clickable
		//window.location = $(this).find('a').attr('href');
	}).mouseover(function (){
		//mouse over LI and look for A element for transition
		$(this)
		.animate( { color: colorOver }, { queue:false, duration:100 } )
		//.animate( { backgroundColor: bgcolorOver}, { queue:false, duration:200 })
		.css("background","url(./img/viewport_bg_over.png) no-repeat");

	}).mouseout(function () {
		//mouse oout LI and look for A element and discard the mouse over transition
		//$(this).find('a')
		//.animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
		//.animate( { backgroundColor: colorOut }, { queue:false, duration:100 });
		$(this)
		.animate( { color: colorOut }, { queue:false, duration:100 } )
		//.animate( { backgroundColor: bgcolorOut}, { queue:false, duration:200 });
		//.css("background","url(./img/viewport_bg.png) no-repeat");
		.css("background-image","url(./img/viewport_bg.png)");
	});	
	}
	
	var navWidth, navHeight;

	if (self.innerWidth != undefined){
		navWidth = self.innerWidth;
		navHeight = self.innerHeight;
	} else {
		navWidth = document.documentElement.clientWidth;
		navHeight = document.documentElement.clientHeight;
	}
	var sidebardiv = document.getElementById("sidebar");
	var sidebarwidth = parseInt(sidebardiv.clientWidth);
	var menudiv=document.getElementById("menu");
	var moveleft;
	var moveright;

	$('.sidebarmoveright').mouseover(function() {
		var passdivk = Math.ceil((parseInt($('#menu').width()) + parseInt(menudiv.offsetLeft))/parseInt($('#menu td').width()));
		var animatetime = 800*passdivk;
		var s_width = parseInt($('#menu').width()) - parseInt($('#sidebar').width());	
		$('#menu').animate({left: '-'+s_width+'px'}, { queue:false, duration:animatetime});
		
		moveleft = setInterval("getCurrentMenuLeftOffSet();", 100);
	});
	$('.sidebarmoveright').mouseout(function() {
		$('#menu').stop();
		clearInterval(moveleft);
	});
	$('.sidebarmoveleft').mouseover(function() {
		var passdivk = Math.ceil((parseInt($('#sidebar').width()) + Math.abs(parseInt(menudiv.offsetLeft)))/parseInt($('#menu td').width()));
		var animatetime = 800*passdivk;
		$('#menu').animate({left:0}, { queue:false, duration:animatetime});
		moveright = setInterval("getCurrentMenuLeftOffSet();", 100);
	});
	$('.sidebarmoveleft').mouseout(function() {
		$('#menu').stop();
		clearInterval(moveright);
	});
	
	$('#top-now').mouseover(function() {
		var s_width = parseInt($('#menu').width()) - parseInt($('#sidebar').width());	
		$('#menu').animate({left: '-'+s_width+'px'}, { queue:false, duration:1000});
		moveleft = setInterval("getCurrentMenuLeftOffSet();", 100);
	});
	$('#top-now').mouseout(function() {
		$('#menu').stop();
		clearInterval(moveleft);
	});
	
	$('#top-then').mouseover(function() {
		$('#menu').animate({left:0}, { queue:false, duration:1000});
		moveright = setInterval("getCurrentMenuLeftOffSet();", 100);
	});
	$('#top-then').mouseout(function() {
		$('#menu').stop();
		clearInterval(moveright);
	});
});


function getCurrentMenuLeftOffSet(){
	var sidebarwidth = parseInt($('#sidebar').width());
	var menuwidth = parseInt($('#menu').width());
	var tdwidth = parseInt($('#menu td').width());
	var leftvaluepx = document.getElementById("menu").style.left;
	var leftvalue = Math.abs(parseInt(leftvaluepx.substring(0, leftvaluepx.length-2)))+(sidebarwidth/2-tdwidth/2);
	var passdiv = Math.ceil(leftvalue / tdwidth)+1;
	printBoxListNavigation(passdiv);
}

function printBoxListNavigation(boxhighlight){
	var boxnum = parseInt(document.getElementById("countBoxOrderArray").value);
	var boxlisthtml = '';
	var boxid;
	for(var i=1;i<=boxnum;i++){
		if(i == boxhighlight){
			boxlisthtml += '<div class="sidebarbottomlistboxhighlight"></div>';
			boxid = "boxid"+i;
			document.getElementById(boxid).style.background = "url(./img/viewport_bg_highlight.png) no-repeat";
		}else{
			boxlisthtml += '<div class="sidebarbottomlistbox" onclick="movebybox('+i+');"></div>';
			boxid = "boxid"+i;
			document.getElementById(boxid).style.background = "url(./img/viewport_bg.png) no-repeat";
		}
	}
	boxlisthtml += '<div class="clr"></div>';
	document.getElementById("sidebarbottomlistdiv").innerHTML = boxlisthtml;
}

function movebybox(box){
	var movement = -((box-1) * parseInt($('#menu td').width()));
	var centerwrapperdiv = document.getElementById("center-wrapper");
	var viewportwidth = parseInt(centerwrapperdiv.clientWidth);
	movement += viewportwidth/2;
	movement -= parseInt($('#menu td').width())/2;
	$('#menu').animate({left:movement}, { queue:false, duration:1000});
	printBoxListNavigation(box);
}