$(document).ready(function(){
	//initial Tab
	$(".popup .title ul li").each(function(i,e){
		//find div for tab
		var odiv = $("#" + $(this).attr("id") + "_div");
		if(odiv.length > 0){
			$(this).css("cursor","pointer");
			$(this).click(function(){ //tab click event
				hideTab(); //hide all div
				$(this).addClass("active"); //change to current tab
				var _div = $("#" + $(this).attr("id") + "_div");
				_div.fadeIn("slow");				
				resetDiv(); //reset back to first img
				
				//show bottom navigation dynamic
				createBottomNavigation(_div.attr("id"));
			});
			//Inital Image
			$("#" + $(this).attr("id") + "_div").find("tr").each(function(i,e){
				if(i > 0){
					$(this).hide();
				}				
			});
			odiv.hide();
		}
		
		//Initial begin status
		if(i==0){
			$(e).click();
		}
	});
	//IntTab
	var url = window.location.toString();
	var tabIndex = url.indexOf('tab');
	var divNum = url.substring(tabIndex,tabIndex+4);
	
	
	if (tabIndex != -1)
	{
		hideTab();
		var intdiv = $("#" + divNum + "_div");		
		intdiv.fadeIn("slow");	
		document.getElementById(divNum).className = "active";	
		//show bottom navigation dynamic
		createBottomNavigation(intdiv.attr("id"));
	}
});


	

/*
var divNum = window.location.toString().substr(window.location.toString().indexOf('tab');
alert("The value was: " + divNum);		*/


	
function hideTab(){
	$(".popup .title ul li").each(function(){
		$(this).removeClass("active");
		$("#" + $(this).attr("id") + "_div").hide();
	});
}
function resetDiv(){
	var imgs = $(".slideimg:visible").find("tr");
	for(var i=0;i<imgs.length;i++){
					if($(imgs[i]).css("display") != "none"){
						if(i>0){ // not the first image
							$(imgs[i]).hide();
							$(imgs[i-i]).fadeIn("slow");							
						}
					}
	}
}
function createBottomNavigation(tabDivId){
	var imageNum = $("#"+tabDivId).find("tr");
	var currentIndex = 0;
	
	for(var i=0;i<imageNum.length;i++){
		if($(imageNum[i]).css("display") != "none"){
			currentIndex = i;
			break;
		}
	}
	
	//create table
	var table = document.createElement("table");
	$(table).css("width","100%");
	var tr = table.insertRow(0);
	
	//previous
	$(tr.insertCell(0)).attr("align","left").css("width","330px").append( 
		$(document.createElement("a")).append( 
			$(document.createElement("img")).attr("src","img/slide-p.gif").click(function(){
				var imgs = $(".slideimg:visible").find("tr");
				for(var i=0;i<imgs.length;i++){
					if($(imgs[i]).css("display") != "none"){
						if(i>0){ // not the first image
							$(imgs[i]).hide();
							$(imgs[i-1]).fadeIn("slow");
							createBottomNavigation(tabDivId);					
							break;
						}
					}
				}
			})
		)
	);

	//center
	$(tr.insertCell(1)).attr("id","info").attr("align","left").append(
		"Image " + (currentIndex + 1) + " of " + imageNum.length
	);
	
	//next
	$(tr.insertCell(2)).attr("align","right").append(
		$(document.createElement("a")).append(
			$(document.createElement("img")).attr("src","img/slide-n.gif").click(function(){
				var imgs = $(".slideimg:visible").find("tr");
				for(var i=0;i<imgs.length;i++){
					if($(imgs[i]).css("display") != "none"){
						if((i+1) < imgs.length){ // not the latest image
							$(imgs[i]).hide();
							$(imgs[i+1]).fadeIn("slow");
							createBottomNavigation(tabDivId);							
							break;
						}
					}
				}	
			})
		)
	);	
	
	
	if(currentIndex == 0){ //next
		if(imageNum.length > 1) $($(table).find("td")[2]).children("a").css("cursor","pointer");
	}else{
		$($(table).find("td")[0]).children("a").css("cursor","pointer");	
	}
	
	$(".popup div[class='slidebtn']").empty().append(table);
}