// JavaScript Document

$(document).ready(function(){
	$.preloadCssImages({statusTextEl: '#textStatus'});
	$("#ajax-empty").load('ajax/jobs.html');
});
function init(){
	// init show and hide
	$('#loading').fadeOut(2000);
	$('#em-info').fadeIn(2000);
	$('#right-arrow').fadeIn(2000);
	$('#main-left').fadeIn(2000);
	$('#main-right').fadeIn(2000);
	// FLOWER IMAGE ANIMATION START HERE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
		// create divs to add images to later
		var flowers = new Array("flower0.png","flower1.png","flower3.png","flower4.png","flower5.png","flower6.png","flower7.png");
		var jobsNum=30;
		var count=0;
		var fixTextAn = 0;
		function creatediv(id, html, width, height, left, top) {
				var newdiv = document.createElement('div');
				newdiv.setAttribute('id', id);
				newdiv.style.width = width;
				newdiv.style.height = height;
				newdiv.style.position = "absolute";
				newdiv.style.left = left;
				newdiv.style.top = top;
				newdiv.innerHTML = html;
				var fraf = document.getElementById("image-0");
				fraf.appendChild(newdiv);
		}
		
		function moveIt(myDiv){
			if(stopped == false){
				newRandomLeft = -10+(Math.floor(Math.random()*490));
				newRandomTop = 100+(Math.floor(Math.random()*150));
				randomInterval = 200+(Math.floor(Math.random()*400));
				$(myDiv).animate({
						"left": newRandomLeft,
						"top": "-="+newRandomTop
				}, randomInterval, "easeInQuad", 
				function(){
						var $child = $(this);
						if($child.position().top < -50){
						$child.css('top', 300);
						$child.css('left', 225);
				}
				moveIt($child);
				});
			}
	}
	function startFlowers(){
		stopped = false;
		for(var j = 0; j< 80; j++){
					var randomNumber=Math.floor(Math.random()*7);//
					var randomLocation=Math.floor(Math.random()*50);
					creatediv('newOne'+j, '<img src="images/flowers/'+flowers[randomNumber]+'">', 'auto', 'auto', 430+'px', (450+randomLocation)+'px');
					moveIt('#newOne'+j);
		}
	}
	function removeFlowers(){
		stopped = true;
		for(var k = 0; k < 80; k++){
					var myNode = document.getElementById('newOne'+k);
					var myParent = document.getElementById('image-0');
					myParent.removeChild(myNode);
		}
	}
	// FLOWER IMAGE ANIMATION END HERE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%						   
						   
		
	var t;
	var my_chars = ["a", "b", "c", "d", "e"];
	var my_array = [];
	var my_position = 0;
	var temp_str = "";
	var end_str = "";
	var charNumber = 0;
	var p;
	
	function loopit(thediv, my_str)
	{
		my_array = my_str.split("");
		if(my_position < my_array.length+1){
			for (var i = 0; i<(my_array.length - end_str.length); i++) {
				charNumber = Math.floor(Math.random()*my_chars.length);
				temp_str += my_chars[charNumber];
			}
			document.getElementById(thediv).innerHTML=end_str+temp_str;
			temp_str = "";
			end_str += my_array[my_position];
			my_position++;
			p=setTimeout(function(){loopit(thediv,my_str)}, 40);
		}else{
			my_position = 0;
			temp_str = "";
			end_str = "";
			clearTimeout(p);
		}
		var k = document.getElementById('header-text');
		k.style.visibility = 'visible';
	}					   
	//////////////////////////////////////////////////////////////////////////////
	//////////////////////////////////////////////////////////////////////////////
	function slide(element,startPoint,endPoint,direction){
		var ease;
		//var loopit;
		if(direction == 'left'){
			if(Math.floor(startPoint) > endPoint){
				ease = endPoint + (startPoint-endPoint)/2; 
				var b=document.getElementById(element);
				b.style.left = ease + 'px';
				startPoint = ease;
				var t=setTimeout(function(){slide(element,startPoint,endPoint,direction)}, 50);
			}else{
				clearTimeout(t);
				var c=document.getElementById(element);
				c.style.left = endPoint + 'px';
				if(fixTextAn == 0){
					fixTextAn = 1;
				}else{
					fixTextAn = 0;
					loopit("header-text",document.getElementById('headline'+count).innerHTML);
					$('#body-text').fadeIn(2000);
				}
			}
		}
		else{
			if(endPoint > Math.ceil(startPoint)){
				ease = endPoint - (endPoint-startPoint)/2;
				var b=document.getElementById(element);
				b.style.left = ease + 'px';
				startPoint = ease;
				var n=setTimeout(function(){slide(element,startPoint,endPoint,direction)}, 50);
			}else{
				clearTimeout(n);
				var c=document.getElementById(element);
				c.style.left = endPoint + 'px';
				if(fixTextAn == 0){
					fixTextAn = 1;
				}else{
					fixTextAn = 0;
					loopit("header-text",document.getElementById('headline'+count).innerHTML);
					$('#body-text').fadeIn(2000);
				}
			}
		}
	}

	
	$("#header-text").load('ajax/jobs.html #headline'+0);
	$("#body-text").load('ajax/jobs.html #body'+0);
	slide("image-"+count,493,0,'left');
	
	startFlowers();
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	var returnPosition;
	var windowW;
	var myOffset;
	$("#info-panel2").mouseover(function () {
		$(this).css('width', 100+"%");	
		var position = $(this).position();
		returnPosition = position.left;
		windowW = $(window).width();
		myOffset = windowW - 20;
		slide("info-panel2",position.left,0,'left');
		$(this).css('cursor', 'pointer');
	});
	$("#info-panel2").mouseout(function () {	
		slide("info-panel2",0,myOffset,'right');
	});
	////////////////////////////////////////////////////////////////////
	////////////////////////////////////////////////////////////////////
	
	$("#down-arrow").css({ opacity: 0.5 });
	$("#left-arrow").css({ opacity: 0.5 });
	$("#right-arrow").css({ opacity: 0.5 });
	//
	$("#down-arrow").mouseout(function () {
		$(this).css({ opacity: 0.5 });
	});
	$("#left-arrow").mouseout(function () {
		$(this).css({ opacity: 0.5 });
	});
	$("#right-arrow").mouseout(function () {
		$(this).css({ opacity: 0.5 });
	});
	$("#down-arrow").mouseover(function () {
		$(this).css('cursor', 'pointer');
		$(this).css({ opacity: 1 });
	});
	$("#left-arrow").mouseover(function () {
		$(this).css('cursor', 'pointer');
		$(this).css({ opacity: 1 });
	});
	$("#right-arrow").mouseover(function () {
		$(this).css('cursor', 'pointer');
		$(this).css({ opacity: 1 });
	});
	
	var arrowDirection = "up";
	$("#down-arrow").click(function(){
		if(arrowDirection == "up"){
			$.scrollTo( '800px', 1000, { easing:'easeOutCubic' });
			this.style.backgroundPosition = '0px -41px';
			arrowDirection = "down";
		}else{
			$.scrollTo( '0px', 1000, { easing:'easeOutCubic' });
			this.style.backgroundPosition = '0px 0px';
			arrowDirection = "up";
		}
	});									
									
	$("#left-arrow").click(function(){
		
		//clears the text animation - so fast clicking works
		clearTimeout(p);
		my_position = 0;
		temp_str = "";
		end_str = "";
		
		//google analytics
		//_gaq.push(['_trackEvent', 'portfolio', 'click-left', 'count-left'+count]);
		var pageTracker = _gat._getTracker("UA-20198532-1");
		pageTracker._trackPageview("/portfolio/click_left"+count);
		//
		var k = document.getElementById('header-text');
		k.style.visibility = 'hidden';
		$('#body-text').hide();
		
		if(count == 30){
			startFlowers();
		}else if(count == 0){
			removeFlowers();
		}
		if(count == jobsNum){
			count = 0;
			slide("image-shadow",493,0,'left');
			slide("image-shadow2",0,-493,'left');
			slide("image-"+jobsNum,0,-493,'left');
			slide("image-"+count,493,0,'left');
			$("#header-text").load('ajax/jobs.html #headline'+count);
			$("#body-text").load('ajax/jobs.html #body'+count);
		}else{
			slide("image-shadow",493,0,'left');
			slide("image-shadow2",0,-493,'left');
			slide("image-"+count,0,-493,'left');
			slide("image-"+(count+1),493,0,'left');
			$("#header-text").load('ajax/jobs.html #headline'+(count+1));
			$("#body-text").load('ajax/jobs.html #body'+(count+1));
			count++;
		}
	});
	$("#right-arrow").click(function(){
		clearTimeout(p);
		my_position = 0;
		temp_str = "";
		end_str = "";
		//google analytics
		//_gaq.push(['_trackEvent', 'portfolio', 'click-right', 'count-right'+count]);
		var pageTracker = _gat._getTracker("UA-20198532-1");
		pageTracker._trackPageview("/portfolio/click_right"+count);
		//
		var k = document.getElementById('header-text');
		k.style.visibility = 'hidden';
		$('#body-text').hide();
		if(count == 1){
			startFlowers();
			
		}else if(count == 0){
			removeFlowers();
		}
		if(count == 0){
			count = jobsNum;
			slide("image-shadow",-493,0,'right');
			slide("image-shadow2",0,493,'right');
			slide("image-"+0,0,493,'right');
			slide("image-"+jobsNum,-493,0,'right');
			$("#header-text").load('ajax/jobs.html #headline'+jobsNum);
			$("#body-text").load('ajax/jobs.html #body'+jobsNum);
		}else{
			slide("image-shadow",-493,0,'right');
			slide("image-shadow2",0,493,'right');
			slide("image-"+count,0,493,'right');
			slide("image-"+(count-1),-493,0,'right');
			$("#header-text").load('ajax/jobs.html #headline'+(count-1));
			$("#body-text").load('ajax/jobs.html #body'+(count-1));
			count--;
		}
		
	});
}