var main_baseImages = new Array("designfor.png", "usability_image.png", "emotion_image.png", 
																 "solution_image.png", "communication_image.png", "culture_image.png",
																 "fun_image.png", "life_image.png", "you_image.png");
															  
var main_hoverImages = new Array("blank.png", "usability.png", "emotion.png", 
																 "solution.png", "communication.png", "culture.png",
																 "fun.png", "life.png", "you.png");																	
											
											
															
var portfolio_hoverImages = new Array("portfolio_CollegeMap1.png", "portfolio_groceryBay1.png", "portfolio_MoviEvite.png", 
																		  "portfolio_CollaboShop1.png", "portfolio_BreakOut.png", "portfolio_bogoseo.png",
																		  "portfolio_generation.png", "portfolio_symphony.png", "portfolio_photography1.png");
																	
var portfolio_baseImages = new Array("portfolio_CollegeMap_image.png", "portfolio_groceryBay_image.png", "portfolio_MoviEvite_image.png", 
										 							   "portfolio_CollaboShop_image.png", "portfolio_BreakOut_image.png", "portfolio_bogoseo_image.png",
																		 "portfolio_generation_image.png", "portfolio_symphony_image.png", "portfolio_photography_image.png");

var portfolio_titles =  new Array("CollegeMap", "groceryBay", "MoviEvite", 
										 							"CollaboShop", "Break Out!", "bogo5eo/bogo5eo",
																	"The Great Generation", "Symphony of Spring", "Photography");
var portfolio_linkPages = new Array("CollegeMap.html", "groceryBay.html", "MoviEvite.html", 
										 							   "CollaboShop.html", "BreakOut.html", "bogoseo.html",
																		 "generation.html", "symphony.html", "photography.html");
																		 
																		 
var morework_hoverImages = new Array("portfolio_eBusinessCard.png", "portfolio_MyGallery.png", "portfolio_weather.png", "portfolio_StepGreen.png", "portfolio_youCheck.png");
																	
var morework_baseImages = new Array("portfolio_eBusinessCard_image.png", "portfolio_MyGallery_image.png", "portfolio_weather_image.png", "portfolio_StepGreen_image.png", "portfolio_youCheck_image.png");

var morework_titles =  new Array("eBusiness Card", "My Gallery", "Dynamic Weather System", "StepGreen", "youCheck");
var morework_linkPages = new Array("eBusinessCard.html", "MyGallery.html",  "weather.html", "StepGreen.html", "youCheck.html");

var currentLinkPages;
var currentTitles;

var currentTitleDisplay;
var currentItemIdx = -1;

function loadPage(page) {
	var detailDiv = document.getElementById("detail_desc");
	deleteAllChildren(detailDiv);
	var subnav = document.getElementById("sub_nav");
	deleteAllChildren(subnav);
	
	currentTitleDisplay = "";
	currentItemIdx = -1;
	doHover(-1);
	
	$("#tile_pics").fadeOut("def", function() {
		$("#detail_desc").load(page, null, function() {
			$("#detail_desc").fadeIn("def");
		});
	});
}						

function loadPortfolio(idx) {	
	if (idx == currentItemIdx)
		return;
		
	var detailDiv = document.getElementById("detail_desc");
		
	$("#sub_nav").fadeIn(1000);

	currentTitleDisplay = currentTitles[idx]
	if (currentItemIdx != -1)
		$(".sub_item:eq("+(currentLinkPages.length - 1 - currentItemIdx)+")").removeClass('activated');
	currentItemIdx = idx;
	$(".sub_item:eq("+(currentLinkPages.length - 1 - currentItemIdx)+")").addClass('activated');
	doHover(-1);
	
	$("#tile_pics").fadeOut("def");//, function() {
			$("#detail_desc").css({opacity: 0});
			//deleteAllChildren(detailDiv);
			$("#detail_desc").load(currentLinkPages[idx], null, function() {
				var activeImg = $('ul.gallery img:first').attr('src');
				jQuery(function($) { $('ul.gallery').galleria({history: false}); });
				
				if ($('.galleria_container').length == 0) {
					$('ul.gallery').galleria({history: false});
				}
				$("#detail_desc").css({opacity: 1, display: 'none'}).fadeIn("slow");
				$.galleria.activate(activeImg);
			});
	//});
}

function addTilePic(baseImage, hoverImage) {
	var tiles = document.getElementById("tile_pics");
	var newli = document.createElement('li');
	var numli = tiles.getElementsByTagName('li').length;
	
	newli.setAttribute('class', 'tile');
	newli.className = 'tile';
	if (currentLinkPages != null && currentLinkPages.length > 0)
		newli.innerHTML = "<div class=\'tile_link\'>\n" +
										  	"<img src=\"images/" + baseImage + "\" class=\"pic\"" +
												"onmouseover=\"doOverlay(" + numli + ", \'visible\')\">\n" +
												"<a href=\"javascript:loadPortfolio(" + numli + ")\" " + 
								 			  "onmouseout=\"doOverlay(" + numli + ",\'hidden\')\">\n" +
												"<img src=\"images/hovers/" + hoverImage + "\" class=\"overlay pic\">" +
												"</a>\n"+
											"</div>\n";
	else
		newli.innerHTML = "<div class=\'tile_link\'>\n" +
										  	"<img src=\"images/" + baseImage + "\" class=\"pic\"" +
												"onmouseover=\"doOverlay(" + numli + ", \'visible\')\">\n" +
												"<a " + 
								 			  "onmouseout=\"doOverlay(" + numli + ",\'hidden\')\">\n" +
												"<img src=\"images/hovers/" + hoverImage + "\" class=\"overlay pic\">" +
												"</a>\n"+
											"</div>\n";
	
	tiles.appendChild(newli);
}

function batchAddTilePics(baseImages, hoverImages) {
	for (var i = 0; i < baseImages.length; i++) {
		if (hoverImages[i])
			addTilePic(baseImages[i], hoverImages[i]);
		else
			addTilePic(baseImages[i], "blank.png");
	}
}

function batchAddPagings() {	
	var sub_nav = document.getElementById("sub_nav");
	
	deleteAllChildren(sub_nav);

	if (currentTitles == null || currentTitles.length == 0) 
		return;
		
	sub_nav.style.display = 'none';
	for (var i = currentTitles.length-1; i >= 0 ; i--) {
		var newli = document.createElement('li');
		var numli = sub_nav.getElementsByTagName('li').length;
		
		newli.setAttribute('class', 'sub_link');
		newli.className = 'sub_link';
		newli.innerHTML = "<a href=\"javascript:loadPortfolio(" + i + 
											")\" class=\"sub_item\" onmouseover=\"doHover(" + i + ")\"" +
											"onmouseout = \"doHover(-1)\">";
		
		sub_nav.appendChild(newli);
	}
	$("#sub_nav").css({width: (17 * currentTitles.length)+'px'});
}

function deleteAllChildren(domElement) {
	if ( domElement.hasChildNodes() )
    while ( domElement.childNodes.length >= 1 )
        domElement.removeChild( domElement.firstChild );       

}

function transitToNextList(newBaseImages, newHoverImages, newLinkPages, newTitles ) {	
	currentLinkPages = newLinkPages;
	currentTitles = newTitles;	
	
	currentTitleDisplay = "";
	currentItemIdx = -1;
	doHover(-1); 
	
	$("#sub_nav").fadeOut("def");
	$("#detail_desc").fadeOut("def", function() {
		var ddesc = document.getElementById("detail_desc");
		deleteAllChildren(ddesc);
		$("#tile_pics").fadeOut("def", function() {
		
			var tiles = document.getElementById("tile_pics");
			deleteAllChildren(tiles);
			batchAddTilePics(newBaseImages, newHoverImages);
			batchAddPagings();			
			
			$("#tile_pics").fadeIn(1000);
			$("#detail_desc").fadeIn("fast");
		});
	});
}

function doHover(num) {
	if (num == -1) {
		pTitle = document.getElementById("portfolio_title");
		pTitle.innerHTML = currentTitleDisplay;
		pTitle = document.getElementById("sub_nav_title");
		pTitle.innerHTML = "";
	}
	else if (num == currentItemIdx)
		return;
	else {
		pTitle = document.getElementById("sub_nav_title");
		pTitle.innerHTML = currentTitles[num];
	}
}

function doOverlay(num, state) {
	picItem = document.getElementById("tile_pics").getElementsByTagName("li")[num];
	overlayItem = picItem.getElementsByTagName("img")[1];
	overlayItem.style.visibility = state;
}

var mutex = false;
var menuUp = false;

function getToMain() {
	if (mutex)
		return;
		
	mutex = true;
	if (!menuUp) {
		transitToNextList(main_baseImages, main_hoverImages, null, null);

		$("#initial_quote").fadeOut("def", function() {
			$("#hline").animate({
				backgroundColor: "#e0e0e0",
				marginTop: "103px",
				height: "5px",
				marginBottom: "35px"
			}, "slow", "swing", function() {
				document.getElementById("hline").style.marginTop = "0px";
				document.getElementById("hline").style.marginBottom = "0px";
				$("#sub_menu").fadeIn("def");
				$("#footer").fadeIn("def");
				$("#main_menu").fadeIn("def", function() {

					$("body").animate({backgroundColor: "#f0f0f0"});
					$("#container").css({backgroundImage: "url('images/bg_middle.png')"});
					$("#bkgrnd_bottom").css({backgroundImage: "url('images/bg_bottom.png')"});
				
					$("#content").fadeIn("def");		
				});
			});
		});

		menuUp = true;
	}
	
	mutex = false;
}

$(document).ready(function () {
	function imagePreloader(arr) {
		//var preloader = document.getElementById('hidden_preloader');
		//deleteAllChildren(preloader);
		var image = new Image();
		for (var i=0; i<arr.length; i++) {
			image.src = arr[i];/*
			var newimg = document.createElement('img');
			newimg.setAttribute('src', arr[i]);
			newimg.style.display = 'none';
			preloader.appendChild(newimg);*/
		}
	}
	
	imagePreloader(main_baseImages);
	imagePreloader(portfolio_baseImages);
});