/**
 * @author shengpo
 * 
 * this javascript file is for menu-style html file
 */

//column and row number of image menu list
var imgMenu_col = 4;		//fixedvalue  (default)
var imgMenu_row = 1;		//dynamic value

//recording the index of current menu item
var index = 0;

//selected target
var targetURL = "";
var targetWindow = "";

//fixed margin value of image menu (default in CSS for none-IE browsers)
var imgMargin = 5;	


$(document).ready(function(){	
	detectWindowSize();		//detect current window size
	initial();				//do initialization
	
	//key event
	$(document).keyup(function(event){
		switch(event.keyCode){
			case 13:	//enter key
				gotoTarget(targetURL);
				break;
			case 37:	//left arrow key
				if(index%imgMenu_col == 0){
					index = index + (imgMenu_col-1);
					
					if(index >= $("div#menuList img.menu").size()){
						index = $("div#menuList img.menu").size() - 1;
					}
				}else{
					index = index - 1;
				}

				showSelectedImageMenuItem();
				showMenuHint();
				setTarget();
				break;
			case 38:	//up arrow key
				if(parseInt(index/imgMenu_col) == 0){
					index = index + imgMenu_col*(imgMenu_row-1);
					
					if(index >= $("div#menuList img.menu").size()){
						index = index - imgMenu_col;
					}
				}else{
					index = index - imgMenu_col;
				}
				
				showSelectedImageMenuItem();
				showMenuHint();
				setTarget();
				break;
			case 39:	//right arrow key
				if(index == $("div#menuList img.menu").size()-1){
					index = index - ($("div#menuList img.menu").size()-1)%imgMenu_col;
				}else{
					if(index%imgMenu_col == (imgMenu_col-1)){
						index = index - (imgMenu_col-1);						
					}else{
						index = index + 1;
					}
				}

				showSelectedImageMenuItem();
				showMenuHint();
				setTarget();
				break;
			case 40:	//down arrow key
				if(index+imgMenu_col >= $("div#menuList img.menu").size()){
					index = index%imgMenu_col;
				}else{
					index = index + imgMenu_col;
				}

				showSelectedImageMenuItem();
				showMenuHint();
				setTarget();
				break;
			default:
				//nothing
		}
	});
});


//for initialization
function initial(){
	//set the css margin of image menu item
	if($.browser.msie){	//for IE browser
		$("div#menuList img.menu").css({"margin":"2px"});
		imgMargin = 2;
	}else{ //fpr none-IE browser
		$("div#menuList img.menu").css({"margin":"5px"});	//default css for none-IE browsers
		imgMargin = 5;
	}
	
	//hide <div#menuHint> first
	$("div#menuHint").hide();
	
	//hide <div#menuList> first
	$("div#menuList").hide();

	//set initial opacity value for all image menu items
	showSelectedImageMenuItem();
	
	//show initial menu hint
	showMenuHint();

	//set initial target
	setTarget();		

	//add mouse event to every image menu item
	$("div#menuList img.menu").hover(function(){	
		if(!$.browser.msie){	//for none-IE browser
			//set opacity 0.1 for all image menu items
			$("div#menuList img.menu").css({"opacity":0.1});		

			//set opacity 1 for this image menu item 
			$(this).css({"opacity":1});	
		}else{	//for IE browser
			//set none border for all image menu items
			$("div#menuList img.menu").css({"border-bottom":"2px #000000 solid"});

			//set red border for this image menu item
			$(this).css({"border-bottom":"2px #ff0000 solid"});	
		}

		//set related variables, show menu hint and set target
		index = $("div#menuList img.menu").index(this);
		showMenuHint();
	}, function(){
		if(!$.browser.msie){	//for none-IE browser
			//set opacity 0.1 for this image menu item 
			$(this).css({"opacity":0.1});
		}else{	//for IE browser
			//set none boarder for this image menu items
			$(this).css({"border-bottom":"2px #000000 solid"});
		}
		

		//clear menu hint
		clearMenuHint();
	});
	
	$("div#menuList img.menu").click(function(){
		//set related variables, show menu hint and set target
		index = $("div#menuList img.menu").index(this);
		setTarget();
		gotoTarget(targetURL);
	});	
		

	//initial animation for show div#menuList (頁面開啓的進場動畫)
	setTimeout("enterAnimation();", 500);
};


//for initial animation (進場動畫)
function enterAnimation(){
	$("div#logo").hide("slide", {direction:"left"}, "fast", function(){
		$("div#logo img").hide();
		$("div#menuList").show("slide", {direction:"right"}, "fast");
		$("div#menuHint").show("slide", {direction:"up"}, "fast");	
	});
};


//for detecting window size
function detectWindowSize(){
	var w = 0, h = 0;		//width and height

	//get initial window size
	//reference: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
	if(typeof(window.innerWidth) == 'number'){
		//Non-IE
		w = window.innerWidth;
		h = window.innerHeight;
	}else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){
		//IE 6+ in 'standards compliant mode'
		w = document.documentElement.clientWidth;
		h = document.documentElement.clientHeight;
	}else if(document.body && (document.body.clientWidth || document.body.clientHeight)){
		//IE 4 compatible
		w = document.body.clientWidth;
		h = document.body.clientHeight;
	}
	
	setSize(w, h);

	//get new window size when window size is changed
	window.onresize = function(){
		//get window size
		//reference: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
		if(typeof(window.innerWidth) == 'number'){
			//Non-IE
			w = window.innerWidth;
			h = window.innerHeight;
		}else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){
			//IE 6+ in 'standards compliant mode'
			w = document.documentElement.clientWidth;
			h = document.documentElement.clientHeight;
		}else if(document.body && (document.body.clientWidth || document.body.clientHeight)){
			//IE 4 compatible
			w = document.body.clientWidth;
			h = document.body.clientHeight;
		}

		setSize(w, h);
	};	
};


//for doing the resize to related tag
function setSize(w, h){	
	var menuList_marginTop;		//div#menuList上方留白的大小
	var imgW = 200;		//default width of image menu 
	var imgH = 100;		//default height of image menu
	
	
	//for menu hint
	$("div#menuHint").css({"width":w});

	//get total number of image menus
	var imgNum = $("div#menuList img.menu").size();
	
	//get the final imgMenu_row
	imgMenu_row = parseInt((imgNum-1)/imgMenu_col) + 1;

	
	//image menu item總數 >= imgMenu_col時
	if(imgNum >= imgMenu_col){
		//根據視窗寬度作判斷, 來變更image menu item的圖片大小
		if(w < (imgMenu_col*(imgW+imgMargin*2))){
			imgW = (w-imgMenu_col*(imgMargin*2)-10*2)/imgMenu_col;		//div#menuList左右兩邊各留10px
			imgH = imgW/2;

			$("div#menuList img.menu").attr({width:imgW, height:imgH});
		}

		//根據視窗高度作判斷, 來變更div#menuList上方留白的大小
		if(h <= (imgMenu_row*(imgH+imgMargin*2))+20){
			menuList_marginTop = 20;	//default fixed value
		}else{
			menuList_marginTop = (h-(imgMenu_row*(imgH+imgMargin*2)))/2;
		}		

		//set the final size and margin of div#menuList
		$("div#menuList").css({"width":(imgMenu_col*(imgW+imgMargin*2)), "height":(imgMenu_row*(imgH+imgMargin*2)), "margin-top":menuList_marginTop, 
							   "margin-left":((w-(imgMenu_col*(imgW+imgMargin*2)))/2), "margin-right":((w-(imgMenu_col*(imgW+imgMargin*2)))/2)});		
	}else{
		//根據視窗寬度作判斷, 來變更image menu item的圖片大小
		if(w < (imgNum*(imgW+imgMargin*2))){
			imgW = (w-imgNum*(imgMargin*2)-10*2)/imgNum;		//div#menuList左右兩邊各留10px
			imgH = imgW/2;

			$("div#menuList img.menu").attr({width:imgW, height:imgH});
		}

		//根據視窗高度作判斷, 來變更div#menuList上方留白的大小
		if(h <= (imgMenu_row*(imgH+imgMargin*2))+20){
			menuList_marginTop = 20;	//default fixed value
		}else{
			menuList_marginTop = (h-(imgMenu_row*(imgH+imgMargin*2)))/2;
		}

		//set the final size and margin of div#menuList
		$("div#menuList").css({"width":(imgNum*(imgW+imgMargin*2)), "height":(imgMenu_row*(imgH+imgMargin*2)), "margin-top":menuList_marginTop, 
							   "margin-left":((w-(imgNum*(imgW+imgMargin*2)))/2), "margin-right":((w-(imgNum*(imgW+imgMargin*2)))/2)});		
	}	
	
	
	//set the div#logo for transition animation
//	$("div#logo").css({"width":w, "height":h});
	var logoW = $("div#logo img").attr("width");	//default:1000
	var logoH = $("div#logo img").attr("height");	//default:500
	
	if(w < logoW){
		logoW = w;
		logoH = logoW/2;
	}
	if(h < logoH){
		logoH = h;
		logoW = logoH*2;
	}
	$("div#logo img").attr({width:logoW, height:logoH});
	$("div#logo img").css({"margin-top":((h-logoH)/2), "margin-bottom":((h-logoH)/2), "margin-left":((w-logoW)/2), "margin-right":((w-logoW)/2)});
};


//for show selected image menu item
function showSelectedImageMenuItem(){
	if (!$.browser.msie) {	//for none-IE browser
		//set opacity 0.1 for all image menu items 
		$("div#menuList img.menu").css({"opacity":0.1});		
		
		//set opacity 1 for selected image menu item 
		$("div#menuList img.menu:eq("+index+")").css({"opacity":1});	
	}else{	//for IE browser
		//set none border for all image menu items 
		$("div#menuList img.menu").css({"border-bottom":"2px #000000 solid"});		
		
		//set red border for selected image menu item 
		$("div#menuList img.menu:eq("+index+")").css({"border-bottom":"2px #ff0000 solid"});	
	}
};


//for show menu hint
function showMenuHint(){
	$("div#menuHint").text($("div#menuList img.menu:eq("+index+")").attr("hint"));
};


//for clear menu hint
function clearMenuHint(){
	$("div#menuHint").text("");
};


//for setting target
function setTarget(){
	targetURL = $("div#menuList img.menu:eq("+index+")").attr("targetURL");
	targetWindow = $("div#menuList img.menu:eq("+index+")").attr("targetWindow");
};


//go to selected target URL in animation
function gotoTarget(targetURL){
	if (targetURL != "") {
		if(targetWindow == "_self"){	//在本身視窗開啓新頁面的時候才啓動過場動畫
			$("div#menuList").hide("slide", {direction:"left"}, "fast", function(){
				$("div#menuHint").hide("slide", {direction:"up"}, "fast");
				$("div#menuList img.menu").hide();
				$("div#logo img").show();
				$("div#logo").show("slide", {direction:"right"}, "fast", function(){					
					window.open(targetURL, targetWindow, "");
				});
			});
		}else{
			window.open(targetURL, targetWindow, "");
		}
	}		
};