var projectMenuVisible = false;
var activeMenuItem;
var activeProjectMenuItem;
var activeProjectID = -1;
var activeProjectImageIndexNumber;
var projectPageVisible = false;
var activeImageID;
var pImages;
var pImageCount;
var xmlLoader;
var xml;
var projects;

var contactVisible = false;
var splashVisible = true;
var aboutVisible = false;
var freelanceVisible = false;
var clientsVisible = false;

var pageNavigationCallBack;
 
function documentOnLoad() { 
	init();
}

function init() {
	jQuery.easing.def = "easeOutQuad";
	jQuery(window).hashchange( hashChanged );  

	loadProjectsData();
	 
	initMenu();
	initFBK();
	initContact(); 
	initLogo(); 
	initClients();
	
	$(window).resize(function() {	
		centerImage()
	});
}

/*function trace(message) {
	if (typeof console == "object") {
		console.log(message);		
	}
}*/

/******
	NAVIGATION
******/

/* check for deeplinks: called when project data (xml) is loaded and parsed */
function checkForDeeplink() {
	var page = document.location.href; 
	var deeplinkPage = page.split("#")[1];
	
	if(deeplinkPage) {
		hashChanged();
	}  else {
		doDeeplink("about");
	}
}

/* hash in url changed (eventlistener) */
function hashChanged() { 
	var deeplinkpage = location.hash.substr(1, location.hash.length);
	if(deeplinkpage.indexOf("project=") !== -1) {
		if(!projectMenuVisible) doDeeplink("projects");
		var project_id = deeplinkpage.substr(8, deeplinkpage.length);
		activeProjectID = project_id;
		getProjectFromDeeplink(project_id);
		return;
	} 
	if(deeplinkpage) {
		doDeeplink(deeplinkpage);
	} 
} 

function doDeeplink(page) { 
	pageNavigationCallBack = doNothing; 
	
	//trace("doDeeplink : "+page);
	
	if(activeMenuItem) activeMenuItem.css("color","#8b8b8b") 
	
	$("#"+page).css("color","#00c1f1")
	activeMenuItem = $("#"+page);
	
	if(page == "contact"){  
		pageNavigationCallBack = showContact;
	}
	
	if(page == "about"){  
		pageNavigationCallBack = showSplash;
	}
	
	if(page == "freelance"){  
		pageNavigationCallBack = showFreelance;
	}
	
	if(page == "clients"){  
		pageNavigationCallBack = showClients;
	}
	
	if(projectMenuVisible && page !== "projects") {
		hideProjectMenu();	
	} else if(page == "projects"){ 
		
		showProjectMenu(); 
		
		//trace("showProjectMenu: "+activeProjectID);
		
		if(activeProjectID !== -1) { 
			window.location = "#project="+activeProjectID;
		}  else {
		    window.location = "#project=0";
		}
		return;
	} 
	hidePages();
}

function hidePages() {
	hideContact();
	hideClients();
	hideProjectPage();
	hideSplash();
	hideFreelance();
}

/******
	LOGO
******/

function initLogo() {
	$("#logo").click(logoClicked);
}

function logoClicked() { 
	pageNavigationCallBack = showSplash;
	hideProjectMenu();
	hidePages();
}

/******
	MAIN MENU
******/

function initMenu() { 
	$("#menu a").click(toggleProjectMenu); 
}

function fadeInMenu() {  
    $("#clients").fadeTo(1400,1);
	$("#projects").fadeTo(1000,1);
	$("#contact").fadeTo(1200,1);
	$("#about").fadeTo(1400,1);
} 

function toggleProjectMenu() { 
	pageNavigationCallBack = doNothing;
	
	////trace("toggleProjectMenu : "+activeMenuItem, activeMenuItem.text());

	if(activeMenuItem) activeMenuItem.css("color","#8b8b8b")
	$(this).css("color","#00c1f1")
	activeMenuItem = $(this); 
} 

/******
 PROJECTS DATA
******/
function loadProjectsData() {
	  $.ajax({
		type: "GET",
		url: "projects.xml",
		dataType: "xml",
		success: projectDataLoaded
	  });
}

function projectDataLoaded(xml) {
	xml = xml;
	projects = xml.getElementsByTagName('project'); 
	
	initProjectsMenu();
	checkForDeeplink();
	
	/*var preloadImagesList = new Array();
	var pImages = "";
	for(i = 0; i<projects.length; i++) {
		pImages = projects[i].getElementsByTagName("image"); 
		for(j= 0; j<pImages.length; j++) { 
			preloadImagesList[i] = $(pImages[j]).attr("src");
		} 
	}  
	$.preloadImages(preloadImagesList);*/
}

/****** 
	PROJETS 
******/ 
function hideProjectMenu() {
	$("#projectMenu").animate({ height:"0px"}, 250, function() { $("#projectMenu").hide(); });  	 
	projectMenuVisible = false;
}
 
function showProjectMenu() {
	
	if(pageTracker) pageTracker._trackPageview("projects");
	
	$("#projectMenu").animate({ height:"18px"},150, function() { $("#projectMenu").show(); });  
	projectMenuVisible = true;
}
  
function initProjectsMenu() { 
	$("#image").click(imageClicked);
} 

function projectItemClick() {
	//var id = this.id.substr(8,this.id.length); 
	//getProject(id);
}

function getProjectFromDeeplink(id) {
	if(activeProjectMenuItem) $(activeProjectMenuItem).css("color","#8b8b8b")
	activeProjectMenuItem = $("#project_"+id);
	$("#project_"+id).css("color","#00c1f1")
	
	pageNavigationCallBack = showProjectPage;
	
	hideSplash();
	hideContact();  
	hideFreelance();
	hideClients();
	
	getProjectByID(id);
	setTimeout(centerImage, 300);
}

function showProjectPage() {
	if(!projectPageVisible) {
	
		centerImage();
		projectPageVisible = true;
		
		
		$("#projectPage").css("opacity",0);
		$("#projectPage").show();
		$("#projectPage").animate({opacity:1}, 150);	
	}
}

function hideProjectPage() {
	if(projectPageVisible) {
		$("#projectPage").animate({opacity:0}, 150, function() {
			$(this).hide(); 
			pageNavigationCallBack();
	  	});
		projectPageVisible = false;
	}
}

function centerImage() {
	var wH = window.innerHeight;
	var menuHeight = 140;
	if(wH == undefined) wH = document.documentElement.clientHeight;
	var mTop = ((wH-menuHeight)/2)-($("#projectImage").height()/2); 
	if(mTop < 0) { mTop = 0; }
	$("#projectImage").css("margin-top", mTop);
}

function getProjectByID(id) {
	var pTitle = projects[id].getElementsByTagName("title")[0].firstChild.nodeValue;
	var pClient = projects[id].getElementsByTagName("client")[0].firstChild.nodeValue;
	var pTech = projects[id].getElementsByTagName("technology")[0].firstChild.nodeValue;
	var pDesign = projects[id].getElementsByTagName("design")[0].firstChild.nodeValue;
	var pLink = "";
	
	try {
		pLink = projects[id].getElementsByTagName("link")[0].firstChild.nodeValue;	
	} catch(err) { 
	
	}
	
	//"<span class='projectDetailsTitle'>"+pTitle+"</span> 
	var projectDetails = "<span class='projectDetailsCategory'>client</span> "+pClient+" <span class='projectDetailsCategory'>technology</span> "+pTech+" <span class='projectDetailsCategory'>design</span> "+pDesign;

	if(pLink !== "") {
		projectDetails += "<span class='projectDetailsCategory'>visit</span> <a href='"+pLink+"' target='_blank'>"+pLink+"</a>";
	 } else {
	 	projectDetails += "<span class='projectDetailsCategory'>visit</span> (website offline)";
	 }

	pImages = projects[id].getElementsByTagName("image");
	pImageCount = pImages.length; 
	
	var imgSrc = $(pImages[0]).attr("src");
	//imgSrc = "http://www.mediavan.be/preview/"+imgSrc;
	
	$("#projectDetailsText").html(projectDetails); 
	
	activeProjectImageIndexNumber = null;
	activeImageID = 0;
	
	if(pageTracker) pageTracker._trackPageview("projects/project/"+pTitle);	

	$("#image").hide();
	$("#imageLoadIndicator").show();
	
	$('#image').unbind('load', imageLoaded);
	$("#image").attr("src",imgSrc).load(imageLoaded); 
	
	//trace('imgSrc : '+imgSrc);
	//$("#projectImage").css("background-image", "url("+imgSrc+")");
	
	var imageIndexNavigator = "<ul>"; 
	for(i = 0;i<pImageCount; i++) { 
		imageIndexNavigator +=	"<li><a href='#' id='image_"+i+"' title=''>"+(i+1)+"</a></li>";
	}
	
	imageIndexNavigator += "</ul>";
	$("#projectImageIndexNavigator").html(imageIndexNavigator); 
	  
	for(i = 0;i<pImageCount; i++) {  
		$("#image_"+i).css("opacity",0);
		$("#image_"+i).fadeTo((500+(i*60)), 1); 
	} 
	
	$("#projectImageIndexNavigator a").click(imageIndexNumberClicked);
	
	highlightActiveItem($("#image_0"));
	
	centerImage(); 
}

function imageLoaded() { 
	//trace('imageLoaded');
	$("#imageLoadIndicator").hide();
	$("#image").show();
	//$("#image").fadeTo(500, 1);	
	$("#image").click(imageClicked); 
	
	centerImage(); 
}

function imageIndexNumberClicked() {
	highlightActiveItem(this); 
	var id = this.id.substr(6,this.id.length);
	activeImageID = parseInt(id);
	 
	showImageByID(activeImageID);
}

function highlightActiveItem(obj) {
	if(activeProjectImageIndexNumber) {
		$(activeProjectImageIndexNumber).css("color","#8b8b8b");
		$(activeProjectImageIndexNumber).css("background-color","#e2e2e2"); 
	} 
	activeProjectImageIndexNumber = $(obj);
	$(obj).css("color","#00c1f1")
	$(obj).css("background-color","#ffffff")
}

function imageClicked() {
	activeImageID +=1;  
	console.log("imageClicked: "+activeImageID); 
	if(activeImageID == pImageCount) {
		activeImageID = 0;
	}  
	highlightActiveItem($("#image_"+activeImageID)); 
	showImageByID(activeImageID);
}

function showImageByID(imageID) { 
	var imgSrc = $(pImages[imageID]).attr("src"); 
	//$("#image").css("opacity",0); 
	
	$("#image").hide()
	$("#imageLoadIndicator").show();
	centerImage(); 
	
	$("#image").unbind("click", imageClicked);
	$('#image').unbind('load', imageLoaded);
	$("#image").attr("src",imgSrc).load(imageLoaded); 
}

/******
	CONTACT 
******/ 
function initContact() {  }

function showContact() { 
	if(!contactVisible) {
		contactVisible = true; 
		$("#contactPage").css("opacity",0);
		$("#contactPage").show();
		$("#contactPage").animate({opacity:1}, 150);
		
		if(pageTracker) pageTracker._trackPageview("contact");
	} 
}

function hideContact() { 
	if(contactVisible) {
		$("#contactPage").animate({opacity:0}, 150, function() {
			$(this).hide();
			pageNavigationCallBack();
  		});
		contactVisible = false;
	}
}
 
function contactLink(type) {
	pageTracker._trackPageview("contact/"+type);
	if(type == 'email') {
		location.href = "mailto:info@mediavan.be";
	} else if(type == 'phone'){
		location.href = "tel:0032472577490";
	}
	
} 
 
/*****
	SPLASH 
*****/ 
function initSplash() {  
	$("#splashPage").fadeTo(1600,1);
}

function showSplash() {
	if(!splashVisible) {
		if(pageTracker) pageTracker._trackPageview("about");
		splashVisible = true; 
		$("#splashPage").css("opacity",0);
		$("#splashPage").show();
		$("#splashPage").animate({opacity:1}, 150);
	} 
}

function hideSplash() { 
	if(splashVisible) {
		$("#splashPage").animate({opacity:0}, 150, function() {
			$(this).hide();
			pageNavigationCallBack();
  		});
		splashVisible = false;
	}
}


/****

Freelance

**/ 

function showFreelance() {
	if(!freelanceVisible) {
		if(pageTracker) pageTracker._trackPageview("freelance");
		freelanceVisible = true; 
		$("#freelancePage").css("opacity",0);
		$("#freelancePage").show();
		$("#freelancePage").animate({opacity:1}, 150);
	} 
}

function hideFreelance() { 
	if(freelanceVisible) {
		$("#freelancePage").animate({opacity:0}, 150, function() {
			$(this).hide();
			pageNavigationCallBack();
  		});
		freelanceVisible = false;
	}
}

/*****

Clients

***/

function initClients() {
    $("#clientList img").mouseover(function() {
        var name = $(this).attr('name');
        if(name) $(this).attr('src', 'images/logos/clients/'+name+'.jpg' );
        
    });
    
     $("#clientList img").mouseout(function() {
        var name = $(this).attr('name');
         if(name) $(this).attr('src', 'images/logos/clients/'+name+'_up.jpg' );
        
    });
    
     $("#brandList img").mouseover(function() {
        var name = $(this).attr('name');
        if(name) $(this).attr('src', 'images/logos/brands/'+name+'.jpg' );
        
    });
    
     $("#brandList img").mouseout(function() {
        var name = $(this).attr('name');
         if(name) $(this).attr('src', 'images/logos/brands/'+name+'_up.jpg' );
        
    });
}

function showClients() {
	if(!clientsVisible) {
		if(pageTracker) pageTracker._trackPageview("clients");
		clientsVisible = true; 
		$("#clientsPage").css("opacity",0);
		$("#clientsPage").show();
		$("#clientsPage").animate({opacity:1}, 150);
	}
}

function hideClients() { 
	if(clientsVisible) {
		$("#clientsPage").animate({opacity:0}, 150, function() {
			$(this).hide();
			pageNavigationCallBack();
  		});
		clientsVisible = false;
	}
}


/*****
	FLASHBANNERKING LOGO
*****/ 
function initFBK() {  
	$("#fbk").fadeTo(1000,1);
}

function doNothing() {
	// :-)	
}