var nav = [ '#home', '#portfolio', '#services', '#questions', '#pricing', '#packages', '#contact' ];
var activeNav;
var navbg;

var menu  = [ '#menu_design', '#menu_development', '#menu_marketing', '#menu_deployment' ];
var menuSpeed=400;

var gallery = [ '#menu_esctt', '#menu_esct', '#menu_reeces', '#menu_cld', '#menu_ra' ];

$(document).ready(function(){

	for ( i = 0; i < nav.length; i++ ) {
		$(nav[i] + ' a').bind( 'mouseover', navMouseOver );
		$(nav[i] + ' a').bind( 'mouseout', navMouseOut );
	}

	for ( i = 0; i < menu.length; i++ ) {
		$(menu[i]).bind( 'click', menuClick );
	}

	for ( i = 0; i < gallery.length; i++ ) {
		$(gallery[i]).bind( 'click', galleryClick);
	}

	for ( i = 0; i < gallery.length; i++ ) {
		$(gallery[i] + ' a').bind( 'click', galleryOpen);
	}


	initNav();
	initMenu();
	initGallery();

	$("#body_home ul.work li").click(
		function() {
			window.location = $(this).children("a").attr("href");
		});

	$("#styleswitch p").click(
		function() {
			window.location = $(this).children("a").attr("href");
		});
	

});

function switchStyle() {
	if ($('#extra').length == 0) {
		$("head").append("<link id='extra' rel='stylesheet' href='./css/dark.css' type='text/css' media='screen' />");
		$("img#logo").attr({src: './img/dark/logo.png'});
		createCookie('style', 'dark', 365);	
		alert
	} else {
		$('head #extra').remove();
		$("img#logo").attr({src: './img/light/logo.png'});			
		createCookie('style', 'default', 365);				
	}
}

/*
	Nav
*/

function getBgLeftPos(navelem){
	return navelem.position().left + ( navelem.width() / 2 ) - ( $('#navbg').width() / 2);
}
function getBgTopPos(navelem){
	for ( i = 0; i < nav.length; i++ ) {
		if ($(nav[i]).attr("id") == navelem.attr("id")) {
			var count = i;
			break;
		}
	}
	return count * -45;
}

function initNav() {
	navbg = $('#navbg');
	activeNav = $('#navigation').find('li.active');
	
	navbg.css({
		left: getBgLeftPos(activeNav),
		top: getBgTopPos(activeNav)
	});

//	navbg.animate({top: -navPos * 45}, "medium");	
	
}

function navMouseOver(e) {;
	var thisId = $(this).parent("li").attr("id");

	$("em$desc_"+thisId).stop();

	/* get jQuery object */
	for ( i = 0; i < nav.length; i++ ) {
		if ($(nav[i]).attr("id") == thisId ) var navObj = $(nav[i]);
	}
	$('#navbg').animate({
		left: getBgLeftPos(navObj),
		top: getBgTopPos(navObj)
	},"fast");

	//$("#header").append("<em class='desc' id='desc_" + thisId + "></em>");

	$("#header").find("em#desc_"+thisId).animate({opacity: "show", top: "90"}, "fast");
	$("#header").find("em#desc_"+thisId).css({left: navObj.position().left});	
	var hoverText = $(this).attr("title");
	$("#header").find("em#desc_"+thisId).text(hoverText);
	
}

function navMouseOut(e) {
	var thisId = $(this).parent("li").attr("id");	
	
	$("#header").find("em#desc_"+thisId).animate({opacity: "hide", top: "80"}, "fast");
}






/*
	Services Menu
*/

function initMenu() {

	var selectedMenu = window.location.hash.substr(1);
	if (selectedMenu == "") selectedMenu = "design";

	for ( i = 0; i < menu.length; i++ ) {
	
		if ($(menu[i]).attr("id") == null) break;
	
		var menuItem = $(menu[i]).attr("id").substr(5);
		if ($(menu[i]).attr("id") == "menu_" + selectedMenu) {
			showMenuItem(menuItem, 0);
		} else {
			hideMenuItem(menuItem, 0);
		}
	}
	
}

function menuClick(e) {
	menuItem=this.id.substr(5)
	toggleMenu(menuItem);
	window.location.hash=menuItem;
	return false;
}

function toggleMenu(element) {
	showMenuItem(element,menuSpeed);
	
	for ( i = 0; i < menu.length; i++ ) {
		var menuItem = $(menu[i]).attr("id").substr(5);
		if (menuItem != element) {
			hideMenuItem(menuItem, menuSpeed);
		}
	}

}

function showMenuItem(menuItem, speed) {
	makeActive($("#menu_"+menuItem));
	$("#tray div#tray_"+menuItem).show(speed);
}
function hideMenuItem(menuItem, speed) {
	makeInactive($("#menu_"+menuItem));
	$("#tray div#tray_"+menuItem).hide(speed);
}

function makeActive(element) {
	element.animate({width: '162px' }, menuSpeed, 
		function() {
			element.addClass("active")
		});	
}

function makeInactive(element) {
		element.removeClass("active");
		element.animate({width: '150px' }, menuSpeed);
}



/*
	Gallery
*/

function initGallery() {
	var selectedGallery = window.location.hash.substr(1);
	if (selectedGallery == "") selectedGallery = "esct";

	for ( i = 0; i < gallery.length; i++ ) {
	
		if ($(gallery[i]).attr("id") == null) break;
	
		var galleryItem = $(gallery[i]).attr("id").substr(5);
		if (galleryItem != selectedGallery) {
			$('#tray_' + galleryItem).hide();
		}
	}
	startGallery(selectedGallery);
}

function galleryClick(e) {
	var selectedGallery = this.id.substr(5);

	for ( i = 0; i < gallery.length; i++ ) {
		galleryName = $(gallery[i]).attr("id").substr(5);
		if (galleryName == selectedGallery) {
			$('#tray_' + galleryName).show();
			if ($('#tray_' + galleryName + ' ul').attr("class").indexOf('galleria') == -1) {
				startGallery(this.id.substr(5));
			}
		} else {
			$('#tray_' + galleryName).hide();
		}
	}
	
	window.location.hash = this.id.substr(5);
	return false;
}

function startGallery(gallery) {
	jQuery(function($) {
	
		$('#tray_' + gallery + ' ul.gallery').galleria({
			history   : false, // deactivates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert    : '#img_' + gallery, // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
				
				// fade in the image & caption
				if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
					image.css('display','none').fadeIn(1000);
				}
				caption.css('display','none').fadeIn(1000);
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);
				
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
				
				// add a title for the clickable image
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { // thumbnail effects goes here
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
				
				// fade in the thumbnail when finnished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
				
				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
			}
		});
	});
}

function galleryOpen(e) {
   	window.open($(this).attr("href"));
	return false;
}