//anim=false;
var pagenum = 0;
var currentclient = "";
var dropcount=[0,0,0,0];
var someGlobalStop=false;
var	windcount=0;
var	gustcount=0;
var mediaindex=0;

var ie=false;
var safari=false;



if(navigator.userAgent.search(/msie/i)!== -1) {ie=true;}
if(navigator.userAgent.search(/safari/i)!== -1) {safari=true;}


		

function createAnimateFunction(randMax, moveMin, duration) {
	var __animate = function () {
	/*	var rnd = (Math.ceil(Math.random() * randMax) + moveMin),
		  rnd2 = (Math.ceil(Math.random() * randMax) + moveMin),
		  props = {marginTop: -rnd, marginLeft:-rnd2, marginBottom: -rnd, marginRight:-rnd2};
	*/
		var rnd = (Math.random() * randMax + moveMin),
		  rnd2 = (Math.random() * randMax + moveMin),
		  props = {marginTop: -rnd};
	
		if(!someGlobalStop && $(this).hasClass("unpopped")) {
		    $(this).animate(props, duration, __animate);
		}
	};
	return __animate;	
}
function animatebubbles(){
 if(anim==true){
	$('ul.bubbles li').each(function(){
		a=50;b=0;c=1800;
		if($(this).hasClass("large")){
		a=30;b=20;c=2200;
		}
		$(this).each(createAnimateFunction(a, b, c));
	});
}
}

function addbubbles() {	
	
	$("div.page").each(function () {
		currid=$(this).attr("id").replace("page_","");
		lis='';
		$(this).find("div.client").each(function () {
			bsize=$(this).find("ul.media").attr("class").replace("media ","");
			c=$(this).attr("class").replace("client ","");
			
			if($(this).find("div.secret").size()!=0){
			lis=lis+'<li id="'+c+'" class="'+bsize+'"><a href="#'+currid+'/'+c+'"><img src="images/cloud.png" class="secret" /></a></li>';
//		lis=lis+'<li id="'+c+'" class="'+bsize+'"><a href="#'+currid+'/'+c+'"><img src="images/'+currid+'/'+c+'.png" class="secreet"/></a></li>';
			}else{
			lis=lis+'<li id="'+c+'" class="'+bsize+'"><a href="#'+currid+'/'+c+'"><img src="images/'+currid+'/'+c+'.png" /></a></li>';
			}
			
		});
		bhtml='<ul class="bubbles">'+lis+'</ul>';
		if(lis!=="") {
			$(this).find("div.work").after(bhtml);
		}
	});
	
	$("ul.bubbles li img").each(function () {
		$(this).addClass("thumbnail");
//		ih=parseInt($(this).css("height"),10);
		ih=90;
		var syze=$(this).closest("li").attr("class");
		$(this).closest("li").addClass("unpopped");
		var bubnum=Math.floor(Math.random()*3)+1;
		if($(this).hasClass("secret")){
		var bc='<div class="secret bubble '+syze+'"></div>'
		}
		else{
		var bc='<div class="bubble '+syze+'" style="background:url(images/bubble_'+syze+'_'+bubnum+'.png) center center no-repeat;"></div>'
		}
		$(this).closest("a").append(bc);
		$(this).closest("li").find("div.large").css("margin-top",(-110-ih/2)+"px");
		$(this).closest("li").find("div.small").css("margin-top",(-85-ih/2)+"px");
		
		
	});
	animatebubbles();
	
	
}




function restartbubbles() {
	someGlobalStop=false;
	animatebubbles();
}



 
function breeze() {
if(!ie){
		windcount++;
		if(windcount===1) {
			wind1.play();
		}
		else if(windcount===2) {
			wind2.play();
		}
		else if(windcount===3) {
			wind3.play();
		}
		else{
			wind4.play();
			windcount=0;
		}
}
}

function gust(){
if(!ie){
		gustcount++;
		if(gustcount===1) {
			gust1.play();
		}
		else if(gustcount===2) {
			gust2.play();
		}
		else{
			gust3.play();
			gustcount=0;
		}
}		
}

function playpop(){
if(!ie){
	pop.play();
}
}

function popbubble(bubble) {
		r=Math.floor(Math.random()*300);
		bubble.append('<div id="bubble_popped" style="-webkit-transform:rotate('+r+'deg);-moz-transform:rotate('+r+'deg);-ms-transform: rotate('+r+'deg);-webkit-transform: rotate('+r+'deg);-moz-transform: rotate('+r+'deg);-o-transform:  rotate('+r+'deg);"></div>');
		bubble.find("div.bubble").fadeTo(20,0.0,function () {
			$("#bubble_popped").remove();
		});
		playpop();
	 if(anim==true){
		breeze();
		}
}


function drop() {

if(anim==true) {
		var bgvals=[-65,-130,-500,-1500];
		var bgpos=[];
		for(i=0;i<4;i++) {
			var resetme=false;
			if((i===3 && dropcount[i]===4) || (i===2 && dropcount[i]===2)  || (i===1 && dropcount[i]===5)  || (i===0 && dropcount[i]===10)){ dropcount[i]=0; resetme=true;}
			dropcount[i]=dropcount[i]+1; //add 1 to dropcount
			bgpos[i]=bgvals[i]*dropcount[i]; //calculate pixels

			if(resetme===true) {
				$('#clouds div').eq(i).css('backgroundPosition','-20px 0px');
			}
			$("#clouds div").eq(i).stop().animate(
					{'backgroundPosition':'-20px '+bgpos[i]},
					{easing: "easeOutQuint",duration: 5000+((i/5)*1800)}
			);
		}
		
}	

}


function pan(change) {
	$("div.client").hide();
	var bgvals=[-35,-70,-100,-200];
	var bgpos=[];
	
	if(anim===true){gust();}

	for(i=0;i<4;i++) {
		bgpos[i]=bgvals[i]*(change+1); //calculate pixels
		originalbgpos=$("#clouds div").eq(i).backgroundPosition().split(" ");
		w=bgpos[i]+" "+originalbgpos[1];
		if(anim===true) {
			$("#clouds div").eq(i).stop().animate(
				{'backgroundPosition':bgpos[i]+" "+originalbgpos[1]},
				{easing: "easeOutQuint",duration: 1250*Math.abs(change)}
			);
		}else{
			$("#clouds div").eq(i).stop().animate(
				{'backgroundPosition':bgpos[i]+" "+originalbgpos[1]},
				{duration: 0*Math.abs(change)}
			);
		}
	}
			
} 
 
 

function startchart() {
	$("span#interact_with_chart").html("playing with");
	var expertise=[];
		
	$("#roles table").each(function () {
		$(this).find("tr:not(:has('th'))").each(function(d) { //prepend bullet to each skill
			$(this).find('td.skill').prepend('<span class="marker_'+parseInt(d+1,10)+'">&bull; </span>');
		});
	});
	
	$("td.skill").live("mouseover",function () { 
		a=$("td.skill").index($(this));
		$("td.skill.active").removeClass("active");
		$(this).addClass("active");
		$(".description_popout").hide();
		$(".description_popout").eq(a).show();
	});
	
	$("li.skill").live("mouseover",function () {
		a=$("li.skill").index($(this));
		$("td.skill.active").removeClass("active");
		$("td.skill").eq(a).addClass("active");
		$(".description_popout").hide();
		$(".description_popout").eq(a).show();
	});
	
	$("#roles table, ul.expertise li").live("mouseout",function () {
		$(".description_popout").hide();
		$(".skill.active").removeClass("active");
	});
	
	
	$("#roles table").each(function(e) { //save values, make bubbles
		expertise[e]='<ul class="expertise">';
		$(this).find("td.level").each(function(z) {
			levelnum=$(this).html();
			expertise[e]=expertise[e]+'<li class="skill"><strong class="marker_'+parseInt(z+1,10)+'">&bull;<span class="level">'+levelnum+'</span></strong></li>';
		});
		expertise[e]=expertise[e]+'</ul>';
		$("div.table_wrapper").eq(e).after(expertise[e]); 
	});
	
	$("ul.expertise li").each(function(y) {
		deschtml=$("td.description").eq(y).html();
		$(this).append('<span class="description_popout">'+deschtml+'</span>');
	});
	
	
	$('#roles').append('<label id="expert">Expert</label><label id="just_a_tad">Novice</label>');

	
}


function hideclient() {
	$("div.work").hide();
	$("div.client").hide();
	$("div#specimen").hide();
}

	
function startnav() {
	$("#nav a").each(function () {
		h=$(this).attr("href");
		h=h.replace("page_","");
		$(this).attr("href",h);
	});
	$("#send_message").hide();
}

function addsounds() {
	pop = document.getElementById('sound_pop');
	wind1 = document.getElementById('sound_wind1');
	wind2 = document.getElementById('sound_wind2');
	wind3 = document.getElementById('sound_wind3');
	wind4 = document.getElementById('sound_wind4');
	gust1 = document.getElementById('sound_gust1');
	gust2 = document.getElementById('sound_gust2');
	gust3 = document.getElementById('sound_gust3');
}


function showpage(p) {
	if(mobile){
		pagetoload=$("#nav a").eq(p).attr("href").replace(/#/,"");
		$("#page_wrapper").load(pagetoload+".php",function(){
		
		
		if(pagetoload==="design"){
			addcontrols();
			addbubbles();
		}
		else if(pagetoload==="type"){
			addcontrols();
			addbubbles();
			startfonts();
		}
		else if(pagetoload==="about"){
			startchart();
			setTimeout("drawchart() ",500);
			$("form.validate").each(function(){$(this).validate();});		
		}
		
		
		});

	}else{
		scrollfactor=(-p*100/$("#nav a").size())+"%";
		if(anim==true){
		$('#page_window div.page').animate({"left":scrollfactor},400);
		}
		else{
		$('#page_window div.page').css("left",scrollfactor);
		}
	}
		$("#nav a.active").removeClass("active");
		$("#nav a").eq(p).addClass('active');
		
		

}

function showmedia(mediaindex) {
	if(mediaindex<1){mediaindex=0;}
	myitem=$("div."+currentclient+" ul.media li").eq(mediaindex);
	$("div."+currentclient+" ul.media li").hide();
	myitem.show();
	myitem.find("img").bind('drag',function( event ){
		$(this).css({
			top: event.offsetY-140
			});
		});
		
	bubbleli=$("div."+currentclient+" ul.media_nav li");
	if(!bubbleli.eq(mediaindex).find("a").hasClass("active")){		
		bubbleli.closest("ul").find("a.active").removeClass("active");
		bubbleli.eq(mediaindex).find("a").addClass("active");
	}
	
}


function addmedianav(){ //adds tiny bubbles to each client
	$("div.client").each(function(){
		clid=$(this).attr("class").replace("client ","");
		
			navhtml='<ul class="media_nav">';
			for(i=0;i<$(this).find(".media li").size();i++) {
				navhtml=navhtml+'<li><a href="#design/'+clid+'/'+parseInt(i+1,10)+'" class="bubble_'+parseInt(i+1,10)+'">'+parseInt(i+1,10)+'</a></li>';
			}
			navhtml=navhtml+'</ul>';
		$(this).find(".description").append(navhtml);
		
		
		if($(this).find(".media li").size()===1){ //hide tiny bubbles if there's only one
			$(this).find(".media_nav").hide();
		}

	});
		
}
		
		
function showclient(clientid,item) {
		
	hideclient();
	clientname=$("div.client."+clientid);
	
	if(clientname.size()>0){ 
		popbubble($("#"+clientid));
		$("#"+clientid).removeClass("unpopped");
		clientname.show(); //show client
		$("div.work").show();

		currentclient=clientid;
		myitem=$("div."+currentclient+" ul.media li").eq(mediaindex);
		
		if($("div."+currentclient+" ul.fullyloaded").size()==0){
			$("div."+currentclient+" ul.media li").each(function(){ //convert thumbnails into big images
				is=$(this).find("a").attr("href");
				h=$(this).find("img").attr("src",is).addClass("detailed_image").parent().html();
				$(this).find("a").remove();
				$(this).html(h);
			});
			$("div."+currentclient+" ul.media").addClass("fullyloaded");
		}
		
		showmedia(parseInt(item,10)-1);
	
	}
	else{//if font
		f=$("#typefaces li").index($("#typefaces li#"+clientid));
		rotatefont(f);
		$("#specimen").show();
	}

	
}



function drawchart() {
	eachlevel=$("ul.expertise").height()/10-1;
	$("ul.expertise li span.level").each(function () { //position the bubbles
		li=$(this).closest("li");
		v=parseInt($(this).html(),10);
		v=10-v;
		
		li.css("top",v*eachlevel);
		li.css("height","30px");
	});	
}

var fontindex=0;

function rotatefont(d) {
	nf=$("#typefaces li").size()-1;
	if(d<0) {//set boundaries.
			d=nf;
	}
	else if(d>nf) {
		d=0;
	}
	cf=$("#typefaces li").eq(d);
	if(anim){	$("#typefaces li:visible").slideUp(300);	cf.slideDown(150);}
	else{	$("#typefaces li:visible").hide();cf.show();}

	pic=cf.find("a").attr("href");
	fontname=cf.find("a span").html();
	$("#specimen div.content").html('<img src="'+pic+'" alt="'+fontname+'"/>');
	fontindex=d;
}

function startfonts() {

	hs='<div id="specimen"><div class="controls"><a href="#type" class="prev">&lt;</a><a href="#type" class="next">&gt;</a><a href="#type" class="close">&#215;</a></div><div class="content"></div></div>';
	$("#page_type").append(hs);
	
	
	ch='<div class="controls"><a href="#type" class="prev">&lt;</a><a href="#type" class="next">&gt;</a></div>';
	$("#typefaces div.content").append(ch);
	
	
	
	
	rotatefont(fontindex);
	$("#page_type .next").click(function () {
		fontindex++;
		rotatefont(fontindex);
	});
	$("#page_type .prev").click(function () {
		fontindex--;
		rotatefont(fontindex);
	});
	
	$("#specimen a.prev, #specimen a.next, #typefaces li a").live("click",function(){
		z=$("#typefaces li").eq(fontindex).attr("id");
		window.location="#type/"+z;
		return false;
	});

	$("#typefaces li a").live("click",function(){
		hideclient();
		$("#specimen").show();
		return false;
	});
	
	
	
}


function handleanchors() {
	var section;
	var itemnumber;
	
	anchor=document.location.hash.substring(1).split("/");
	if(anchor.length>=1) {
		page=anchor[0];
		
		if(anchor[0]==="") {
			page="design";
		}
	}else {page="design";}


	if(anchor.length>=2) {//if it at least contains the section
		section=anchor[1];
	}else {section="nothing";}


	if(anchor.length===2){//if it has section and client
		showclient(section,1);
	}
	else{
		if(anchor.length>=3) { //if it has section, client, and media#
			itemnumber=parseInt(anchor[2],10);	
			showclient(section,itemnumber);
		}
	}

	if(page!=="") {
		$("#nav a.active").removeClass("active");
	}
		$("a[href="+"#"+page+"]").addClass("active");
		
		if(mobile){
		showpage($("#nav li a").index($("a[href="+"#"+page+"]")));
		}
}

function addcontrols(){
	$("div.description").prepend('<div class="controls"><a href="#" class="close">&#215;</a></div>');
	
	$("#page_writing ul").after('<a href="#writing" class="changepage">&#709;</a>');
	
}

 
function initsite() {
          var d = document;
          var dHead = d.getElementsByTagName('head')[0];
          var newStyle = d.createElement('link');
              newStyle.setAttribute('rel','stylesheet');
              newStyle.setAttribute('type','text/css');
              newStyle.setAttribute('media','screen,projection');
              newStyle.setAttribute('href','css/styles.css');
			  dHead.appendChild(newStyle);

	addsounds();
	startnav();
	startfonts();
	startchart();	
	addmedianav();
	addcontrols();
	if(mobile===false){	
		if(anim===true){
		$('#footer').append('<a href="#" id="animations" title="Turn Animations Off"><span class="active"></span> Animations</a>');
		}else{
		$('#footer').append('<a href="#" id="animations" title="Turn Animations On"><span></span> Animations</a>');
		}
	}
}


/******** document ready**/

$(document).ready(function () {
	
	$("#container").css("visibility","hidden");
	initsite();
	pagewidth=parseInt($('div.page:eq(0)').css("width"),10);
	handleanchors();


	$(window).resize(function () {
		updatepagewrapper();
		drawchart();
		if($(window).width()<=480){
		}
	});
	
	clickcounter=0;
	$("div#header").click(function(){
			clickcounter++;
			if(clickcounter==10){
				$("img.secret").fadeIn(2000);
			}
	});
			
	$("#animations").toggle(function(){
			$(this).attr("title","Turn Animations On");
			$(this).find("span").removeClass("active");
			anim=false;
			someGlobalStop=true;
			return false;
		},function(){
			$(this).find("span").addClass("active");
			$(this).attr("title","Turn Animations Off");
			anim=true;
			restartbubbles();
			return false;
	});
	
	if(!mobile){showpage($("#nav a").index($("#nav a.active")));}//find the active link in nav, show the page for it
	
	

	$("p a[href^='#']").live("click",function () {
		m=$(this).attr("href");
		showpage($("#nav a").index($("#nav a[href="+m+"]")));
	});
	
	
	$('#nav a').live("click",function () {
			if($(this).hasClass("active")) {
				window.location="#";
				return false;
			}else {
			activeindex=$("#nav a").index($("#nav a.active"));
			newindex=$("#nav a").index(this);
			showpage(newindex);
			pan(newindex-activeindex);
			someGlobalStop=true;
			pagenum=newindex;
			if(newindex===0 || newindex===1) {
				setTimeout("restartbubbles()",1800);
			} 
			}
	});
	
	$("ul.bubbles li")
		.mouseover(function () { 
			$(this).find(".thumbnail").css("opacity","1"); 
		})
		.mouseout(function () { 
			$(this).find(".thumbnail").css("opacity",".7"); 
		});

			
	$("ul.bubbles li>a").live("click",function () {
		client=$(this).closest("li").attr("id");
		showclient(client, 1);
		drop();
	});	
	
	$("ul.media_nav a").live("click",function () {
		if(!$(this).hasClass("active")) {playpop();}
		showmedia(parseInt($(this).html(),10)-1);
	});
	
	$("a.close").live("click",function () {
		hideclient();
	});
	
	
	$("#scissors").live("mousedown",function () {
		if($("#contact form").valid()){$(this).addClass("active");}
	});
	
	$("#scissors").live("mouseup",function () {
		$(this).removeClass("active");
	});


	$("#scissors").live("click",function () {
		if($("#contact form").valid()){
		if(anim==true){
			$("#scissors").fadeOut(500);
			$("img#rope").addClass("rotated");
			$("#contact").animate(
				{'marginTop':'-180%'},
				{easing: "easeInSine",duration: 4100}
			);
		}else{
			$("#scissors").hide();
			$("img#rope").hide()
			$("#contact").css("marginTop","-180%");
		}
			$.post($("#contact form").attr("action"), $("#contact form").serialize(), function(returnedhtml){
			
			});
		}
		return false;
	});
	
	writingpage=0;
	$("#page_writing a.changepage").live("click",function(){
		$("#page_writing ul li").removeClass("hide, show");
		if(writingpage==1){
			$("#page_writing ul li:lt(3)").addClass("show");
			$("#page_writing ul li:gt(2)").addClass("hide");
			$(this).html("&#709;");
			writingpage=0;
		}else{
			$("#page_writing ul li:lt(3)").addClass("hide");
			$("#page_writing ul li:gt(2)").addClass("show");
			$(this).html("&#708;");
			writingpage=1;
		}
	});
	
	
	changeintro();

});	/******** end document ready**/
function updatepagewrapper(){
	$("#page_wrapper").css("height",$("#container").css("height"));
}
$(window).load(function(){
	
	$("#container").css("visibility","visible");
	//alert($(window).height());
	//$("#container").css("height",$(window).height()+"px");
	updatepagewrapper();
	if(!mobile){addbubbles();drawchart();}
	
	$("form.validate").each(function(){
		$(this).validate();
	});
});
	
var greeting=new Array();
greeting[0]="Hello!";
greeting[1]="Greetings!";
greeting[2]="Hi!";
greeting[3]="Hey, there!";

var likeword=new Array();
likeword[0]="Nepal";
likeword[1]="Chagall";
likeword[2]="Bilal";
likeword[3]="Bilal";


function changeintro(){
	intronum=Math.floor(Math.random()*4);
	$("#page_design div.intro p strong").html(greeting[intronum]);
	$("#page_design div.intro p span").html(likeword[intronum]);
}

(function($) {
  jQuery.fn.backgroundPosition = function () {
    var p = $(this).css('background-position');
    if(typeof(p) === 'undefined'){
		return $(this).css('background-position-x') + ' ' + $(this).css('background-position-y');
		}
    else{
		return p;
		}
  };
}(jQuery));