var expertiseProps = new Array();
var projectsProps = new Array();
var	whyProps = new Array();
var	cultureProps = new Array();
var activeArray = new Array();
var subNav = new Array();

var	activeSection,
	newSection,
	sectionNumber,
	activeSub,
	oldSub,
	activeObject,
	currentSection,
	introObj,
	mainNav;
	
var isIntro = true;
var secHeaders = new Array();

var mainImages = ["images/intro/XBOX1.jpg","images/intro/XBOX2.jpg","images/intro/XBOX5.jpg","images/intro/GunnarP1.jpg","images/intro/GunnarP2.jpg","images/intro/GunnarP3.jpg","images/intro/CS_MM_1.jpg","images/intro/CS_MM_4.jpg","images/intro/CS_MM_5.jpg","images/intro/XBOX13.jpg","images/intro/XBOX14.jpg","images/intro/XBOX15.jpg","images/intro/SpeedWheel1.jpg","images/intro/SpeedWheel3.jpg"];

var mainNav = [{id:"expertiseNav", label:"expertise"},
				{id:"projectsNav", label:"projects"},
				{id:"cultureNav", label:"culture"},
				{id:"whyNav", label:"why"}];
				
var isIE;

$(document).ready(function(){

	$.ajax({
		type: "GET",
		url: "xml/pensarSite.xml",
		dataType: "xml",
		success: parseXML
	});
	
	($.browser.msie) ? isIE = true : isIE = false;
	
	var rand = mainImages[Math.floor(Math.random() * mainImages.length)]
	
	introObj = {label:"intro", mainImage:rand, head:"Research + Design + Engineering", subHead:"", copy:"Pensar is an integrated team of designers and engineers that transforms careful observation into meaningful products. By having a clear understanding of the issues at hand the design process moves faster with greater confidence. We specialize in turning complex problems into elegant solutions. Seamless communication between our integrated teams shepherds products to market faster. Teams working in sync means higher quality, better performance, and reduced cost."};
	
	$(mainNav).each(function(i){
		var navItem = "#" + mainNav[i].id;
		$(navItem).attr("label", mainNav[i].label)
		$(navItem).attr("isActive", "false")
		$(navItem).bind("mouseenter mouseleave", function(e){
			$(this).toggleClass("nav_active");
		})
		
		$(navItem).bind("click", function(e){
			changeSection(mainNav[i].label, 0)
		})
	})
	
	$("#logo").bind("click", function(e){
		changeSection("intro", 0)
	})
	
	activeObject = introObj;
	
	
});

$.address.init(function(event){
	//alert("swfaddress init");
}).change(function(event){
	if (!isIntro) swapContents()
});


function parseXML(xml)
{

	$(xml).find("section").each(function(){
		
		if ($(this).attr("label") == "expertise"){
			
			$(this).find("secondary").each(function(){
				var obj = new Object();
				obj.label = $(this).attr("label");
				
				var cont = $(this).find("content");
				
				obj.mainImage = cont.find("mainImage").text();
				obj.head = cont.find("head").text();
				obj.subHead = cont.find("subHead").text(); 
				obj.copy = cont.find("copy").text();
						
				var cols = new Array();
				
				var xmlCol = $(this).find("columns").find("col");
				
				$(xmlCol).each(function(i){				
				
					var col = new Array();
					
					col.push($(this).find("headline").text());
															
					$(this).find("title").each(function(i){				
						col.push($(this).text());
					});
					
					
					cols.push(col);
					
				})			
				
				obj.columns = cols;
				
				expertiseProps.push(obj);
			});
			
		} else if ($(this).attr("label") == "projects"){
			
			$(this).find("secondaryHeader").each(function(){
				secHeaders.push({label:$(this).attr("label"), count:$(this).attr("count")});
			});
			
			$(this).find("secondary").each(function(){
				var obj = new Object();
				obj.label = $(this).attr("label");				
				obj.head = $(this).find("head").text();
				obj.subHead = $(this).find("subHead").text();
				obj.copy = $(this).find("copy").text();
						
				var imgs = new Array();
				
				var xmlImgs = $(this).find("slides").find("image");
				
				$(xmlImgs).each(function(i){				
					imgs.push({thumb:$(this).find("imageThumb").text(), large:$(this).find("imageLarge").text()})
				})
				
				obj.images = imgs;
				
				
				projectsProps.push(obj);
			});
			
		} else if ($(this).attr("label") == "culture/connect"){
			
			$(this).find("secondary").each(function(){
				var obj = new Object();
				obj.label = $(this).attr("label");
				
				var cont = $(this).find("content");
				
				obj.mainImage = cont.find("mainImage").text();
				obj.head = cont.find("head").text();
				obj.subHead = cont.find("subHead").text(); 
				obj.copy = cont.find("copy").text();
				
				cultureProps.push(obj);
				
			});
			
		} else if ($(this).attr("label") == "why pensar"){
			
			$(this).find("secondary").each(function(){
				var obj = new Object();
				obj.label = $(this).attr("label");
				
				var cont = $(this).find("content");
				
				obj.mainImage = cont.find("mainImage").text();
				obj.head = cont.find("head").text();
				obj.subHead = cont.find("subHead").text(); 
				obj.copy = cont.find("copy").text();					
				whyProps.push(obj);
			});
		}
	})	
	
	handleIntro();
}

function handleIntro()
{
	
	var val = $.address.value();

	//alert(val);

	if (val == "/" || val == "/intro") {
		newSection = "intro";			
	} else {
		var subVal = val.split("/");
		newSection = subVal[1];
		sectionNumber = subVal[2];
		
		//alert(newSection + " " + sectionNumber)
	}
	
	swapContents();	
	isIntro = false;
}

function changeSection(newSec, secNum, secName)
{
	var str = "/" + newSec;
	
	if (secName == undefined) secName = "";
	
	if (secNum != sectionNumber){
		str += "/" + secNum +  "/" + secName.split(" ").join("");		
	}
	
	newSection = newSec;
	sectionNumber = secNum;
		
	$.address.value(str);

	
	resetMainNav(newSec);
	
	window.scroll(0,0);
}

function swapContents()
{		
	//alert("swapping contents");

	switch(newSection)
	{
		case "expertise":
				activeObject = expertiseProps[sectionNumber];
				if (activeSection != newSection) changeSubNav(expertiseProps);
			break;
			
		case "projects":
				activeObject = projectsProps[sectionNumber];
				if (activeSection != newSection) changeSubNav(projectsProps, true);
			break;
			
		case "culture":
				activeObject = cultureProps[sectionNumber];
				if (activeSection != newSection) changeSubNav(cultureProps);
			break;
			
		case "why":
				activeObject = whyProps[sectionNumber];
				if (activeSection != newSection) changeSubNav(whyProps);
			break;
		
		case "intro":
				activeObject = introObj;
				$("#secondaryNav").fadeOut("fast");
			break;
	}
	
	activeSection = newSection;
	activeSub = sectionNumber;
	
	clearContent();
	
	if (activeSection == newSection) resetSubNav()
	
}


function changeSubNav(activeArray, isProjects)
{
	subNav = [];

	var nav = "<ul id='secNav'>";
		
	//
	//
	var num = 0;
		
	for (var i = 0; i<activeArray.length; i++){
		if (isProjects){
			if (i == 0) nav += "<h2>" + secHeaders[num].label + "</h2>";
			
			if (i == secHeaders[num].count){
				num++;
				nav += "<br /><h2>" + secHeaders[num].label + "</h2>"				
			}
		}		
		nav += "<li class='secNavItem'>" + activeArray[i].label + "</li>";
	};
	
	nav += "</ul>";
	
	$("#secondaryNav").fadeOut("fast", function(){
		$(this).empty();
		$(this).append(nav);
		
		$(".secNavItem").each(function(i){
			$(this).attr("isActive", "false");
			$(this).attr("label", activeArray[i].label);
			subNav.push($(this))
			
			$(this).bind("mouseenter mouseleave", function(e){
				$(this).toggleClass("nav_active");
			})
			
			$(this).bind("click", function(e){	
				changeSection(activeSection, i, $(this).attr("label"));
			})
		})
		
		resetSubNav();
			
		$(this).hide();
		$(this).fadeIn("fast");
	});
	
	
}

function resetSubNav()
{
	$(subNav).each(function(i){
		if (i == activeSub){
			$(this).unbind("mouseenter mouseleave click")
			$(this).addClass("nav_active");	
			$(this).attr("isActive", "true");
		} else {
			if ($(this).attr("isActive") == "true"){
				$(this).attr("isActive", "false");
				$(this).removeClass("nav_active");
				
				$(this).bind("mouseenter mouseleave", function(e){
					$(this).toggleClass("nav_active");
				})
				
				$(this).bind("click", function(e){
					changeSection(activeSection, i, $(this).attr("label"));
				})		
			}
		}
	})
}


function resetMainNav(section)
{
	$(mainNav).each(function(i){
		var navItem = "#" + mainNav[i].id;
		
		if (section == mainNav[i].label){			
			$(navItem).unbind("mouseenter mouseleave click")
			$(navItem).addClass("nav_active");	
			$(navItem).attr("isActive", "true");
			
		} else {
			
			if ($(navItem).attr("isActive") == "true"){
				$(navItem).attr("isActive", "false");
				$(navItem).removeClass("nav_active");
				
				$(navItem).bind("mouseenter mouseleave", function(e){
					$(this).toggleClass("nav_active");
				})
				
				$(navItem).bind("click", function(e){
					changeSection(mainNav[i].label, 0);
				})		
			}
			
		}
	})
}


function clearContent()
{
	$("#col1").empty();
	$("#col2").empty();
	$("#col3").empty();
	$("#slideshowContainer").empty();
	
	$("#imageShadow").fadeTo("fast", 0);
	
	
	$("#copy").fadeOut("fast", function()
	{			
		if (!isIE){
			$("#image").animate({left:"-=800px"}, 500, function(){			
				addContent();			
			})
		
		} else {
		
			$("#image").animate({width:0}, 500, function(){			
				addContent();			
			})	
		
		}
	});	
}



function addContent()
{	
	
	$("#copy").empty();
	
	(activeSection == "projects") ? changeImage(activeObject.images[0].large) : changeImage(activeObject.mainImage);
	
	var txt = "";
	var head = activeObject.head;
	var sub = activeObject.subHead;
	var copy = activeObject.copy;
	
	if (head != "") txt += "<h1>" + head + "</h1>";
	if (sub != "") txt += "<h2>" + sub + "</h2>";
	if (copy != "") txt += "<br />" + copy;
	
	$("#copy").append(txt);
	
	$("#copy").hide();
	
	if (!isIE){	
		$("#image").animate({left:"+=800px"}, 500, function(){
			$("#copy").fadeIn("fast");
			
			if (activeSection == "expertise") addColumns(activeObject.columns)
			
			$("#imageShadow").fadeTo("slow", 1);
			
			if (activeSection == "projects") addSlides();		
		});

	} else {
	
		$("#image").animate({width:800}, 500, function(){
			$("#copy").fadeIn("fast");
			
			if (activeSection == "expertise") addColumns(activeObject.columns)
			
			$("#imageShadow").fadeTo("slow", 1);
			
			if (activeSection == "projects") addSlides();		
		});
		
	}
}

function changeImage(path)
{
	$("#image").empty();

	var imageContent;
		
	if (path.substr(path.length - 3, 3) == "swf"){
		imageContent = addFlashContent(path)
		$("#image").append(imageContent);	
	} else {
		var img = new Image();
		img.src = path;
		img.onLoad = imageLoaded(img);
	}
}

function imageLoaded(im)
{
	$("#image").append(im);
}

function addSlides()
{
	var arr = activeObject.images;
	
	if (arr.length > 1){
		$(arr).each(function(i){
			var str = "thumb_" + i;
			var imageContent = "<img class='slideshowNav_img' id=" + str + " link=" + arr[i].large + " src=" + arr[i].thumb + " width='44' height='44' alt='' />";
				
			$("#slideshowContainer").append(imageContent);
			
		})
		
		$(".slideshowNav_img").bind("click", function(e){
			var link = $(this).attr("link");
			changeImage(link);			
		})
	}
}


function addColumns(arr){

	for (var i = 0; i<arr.length; i++){		
	
		if (i == 0) $("#col1").append("<h2>" + arr[i][0] + "</h2>");
		else if (i == 1) $("#col2").append("<h2>" + arr[i][0] + "</h2>");
		else if (i == 2) $("#col3").append("<h2>" + arr[i][0] + "</h2>");
			
		for (var j = 1; j<arr[i].length; j++){
		
			var str = "<p class='columns_sub'>" + arr[i][j] + "</p>";
			
			if (i == 0) $("#col1").append(str);
			else if (i == 1) $("#col2").append(str);
			else if (i == 2) $("#col3").append(str);
			
		}
	}
	
	$("#columns").hide();	
	$("#columns").fadeIn("fast");	
}


function addFlashContent(swf)
{

	var fl = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='800' height='373' id='image'><param name='movie' wmode='opaque' value='" + swf + "' /><param name='wmode' value='opaque' /><!--[if !IE]>--><object type='application/x-shockwave-flash' data='" + swf + "' width='800' height='373' wmode='opaque'><!--<![endif]--><a href='http://www.adobe.com/go/getflashplayer'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a><!--[if !IE]>--></object><!--<![endif]--></object>";
			
	return fl;
	
}