<!--//

var mySpeed = 1000;
var myEase = 'easeInOutExpo';

/*
I'm not exactly sure if any of this can be moved outside of this document.
These sizes are dependant on there being exactly 5 case studies.
*/

// Create an array for the 
var caseStudy=new Array();
caseStudy[0]="#case1";
caseStudy[1]="#case2";
caseStudy[2]="#case3";
caseStudy[3]="#case4";
caseStudy[4]="#case5";
caseStudy[5]="#case6";
caseStudy[6]="#case7";
caseStudy[7]="#case8";
caseStudy[8]="#case9";


var caseStudyDetail=new Array();
caseStudyDetail[0]="#case1 div.caseDetails div.caseHeadline";
caseStudyDetail[1]="#case2 div.caseDetails div.caseHeadline";
caseStudyDetail[2]="#case3 div.caseDetails div.caseHeadline";
caseStudyDetail[3]="#case4 div.caseDetails div.caseHeadline";
caseStudyDetail[4]="#case5 div.caseDetails div.caseHeadline";
caseStudyDetail[5]="#case6 div.caseDetails div.caseHeadline";
caseStudyDetail[6]="#case7 div.caseDetails div.caseHeadline";
caseStudyDetail[7]="#case8 div.caseDetails div.caseHeadline";
caseStudyDetail[8]="#case9 div.caseDetails div.caseHeadline";

var caseStudyBG=new Array();
caseStudyBG[0]="#case1 div.caseDetails div.caseBG";
caseStudyBG[1]="#case2 div.caseDetails div.caseBG";
caseStudyBG[2]="#case3 div.caseDetails div.caseBG";
caseStudyBG[3]="#case4 div.caseDetails div.caseBG";
caseStudyBG[4]="#case5 div.caseDetails div.caseBG";
caseStudyBG[5]="#case6 div.caseDetails div.caseBG";
caseStudyBG[6]="#case7 div.caseDetails div.caseBG";
caseStudyBG[7]="#case8 div.caseDetails div.caseBG";
caseStudyBG[8]="#case9 div.caseDetails div.caseBG";

var position=new Array();
// each position, minus
/*
position[0] = 0; // 0
position[1] = 950; // 950
position[2] = 1900; // 1900
position[3] = -1900; // -1900
position[4] = -950; // -950
position[5] = 2850; // 2850 = The furthest left/right position

// OLD WAY: [3] [4] [0] [1] [2] [5...]


position[0] = 0; // 0
position[1] = 950; // 950
position[2] = 1900; // 1900
position[3] = 2850; // -1900
position[4] = -2850; // -950
position[5] = -1900;
position[6] = -950;
position[7] = 3800; // 2850 = The furthest left/right position


*/
position[0] = 0; // 0
position[1] = 950; // 950
position[2] = 1900; // 1900
position[3] = 2850; // -1900
position[4] = 3800; // -950
position[5] = -3800;
position[6] = -2850;
position[7] = -1900;
position[8] = -950;

// NEW WAY:  [5] [6] [7] [8] [0] [1] [2] [3] [4] - 9 TOTAL PROJECTS!!


var zIndex=new Array();
/*
zIndex[0] = 5;
zIndex[1] = 4;
zIndex[2] = 2;
zIndex[3] = 1;
zIndex[4] = 3;

zIndex[0] = 10;
zIndex[1] = 9;
zIndex[2] = 7;
zIndex[3] = 2;
zIndex[4] = 1;
zIndex[5] = 6;
zIndex[6] = 8;

*/
zIndex[0] = 9;
zIndex[1] = 8;
zIndex[2] = 6;
zIndex[3] = 4;
zIndex[4] = 2;
zIndex[5] = 1;
zIndex[6] = 3;
zIndex[7] = 5;
zIndex[8] = 7;



// Establish where the middle and first CaseStudy should be:
//if browser supports window.innerWidth
if (window.innerWidth)
var width = window.innerWidth;

//else if browser supports document.all (IE 4+)
else if (document.all)
var width = document.body.clientWidth;

//startZero = $(window).width()/2 - 475;
startZero = $(window).width()/2 - 475;

//$("#status").after('<div>startZero: ' + startZero + '</div>');
$('#left').css({
    'left': startZero
	});
$('#right').css({
    'left': startZero + 950 - 75 // 75 is the width of the "control div"
	});
$('#block').css({
    'left': startZero
	});
$('#caseStudyBox').css({
    'left': startZero
	});


var currentCase = 0;


for (i=0; i<caseStudy.length; i++) {
	$(caseStudyDetail[i]).animate({
		opacity: 0
		}, 10, function() {
		// Animation complete.
		}
	);
	$(caseStudyBG[i]).animate({
		opacity: 0
		}, 10, function() {
		// Animation complete.
		}
	);
}


function fadeCase()
{
	$('#left div.control').show();
	$('#right div.control').show();
	$('#left').css({
		'left': startZero
		});
	$('#right').css({
		'right': startZero
		});
	// QUICK ECHO OF CONTENT:
	// $("#status").after('<div>currentCase: ' + currentCase + '</div>');
	$(caseStudyDetail[currentCase]).animate({
		opacity: 1
		}, 500, function() {
		// Animation complete.
		}
	);
	$(caseStudyBG[currentCase]).animate({
		opacity: 0.6
		}, 400, function() {
		// Animation complete.
		}
	);
}


function resetCases(n) {
	$('#left div.control').hide();
	$('#right div.control').hide();
	for (i=0; i<caseStudyDetail.length; i++)
	{
		$(caseStudyDetail[i]).animate({
			opacity: 0
			}, 300, function() {
			// Animation complete.
			}
		);
		$(caseStudyBG[i]).animate({
			opacity: 0
			}, 500, function() {
			// Animation complete.
			}
		);
	}
}
// Place Case studies in the right places.
for (i=0; i<caseStudy.length; i++)
{
	$(caseStudy[i]).css({
		'left': position[i]
		//'margin-left': $('#modal').width/2 - 475
	});
	$(caseStudy[i]).css({
		//'opacity': 0.5
		'opacity': 1
		//'margin-left': $('#modal').width/2 - 475
	});
}

myE = 0;

function movePhotos(n, dir) {
	//$("#status").after('<div>Current photo: ' + n + ' --- zIndex[n]: ' + zIndex[0] + '</div>');
		$(caseStudy[n]).css({
			//'opacity': 0.5
			'z-index': zIndex[0]
			//'margin-left': $('#modal').width/2 - 475
		});

		
		
	$("#caseTracker").animate({
		left: 820 + (n*10)
		}, {
		duration: mySpeed*1.25,
		specialEasing: { left: 'easeInOutExpo' },
		complete: function() {
			fadeCase(n);
		}
	});
	
	if (dir == 0) {
		//$("#status").after('<div>Doing nothing!</div>');
	} else {
		
		for (i=0; i<caseStudy.length; i++)
		{
			
			//The following script pops the left (or right) Case Study to the far other end prior to moving.
			if (dir > 0) // Moving L >> R
			{
				if (n-6 >= 0)
				{
				$(caseStudy[n-2]).css({
					'left': -(position[caseStudy.length]) // Far left position!
					});
				$(caseStudy[n-2]).css({
					'z-index': zIndex[n-2]
				});
				
	
				} else {
				$(caseStudy[n+3]).css({
					'left': -(position[caseStudy.length]) // Far left position!
					});
				}
			} else { // Moving R << L
				
				if (n+4 <= 6) // 4 here should be the total caseStudy.length minus(-) 1
					{
					$(caseStudy[n+2]).css({
						'left': (position[caseStudy.length]) // Far left position!
						});
					$(caseStudy[n+2]).css({
						'z-index': zIndex[3]
					});
					} else {
					$(caseStudy[n-3]).css({
						'left': (position[caseStudy.length]) // Far left position!
					});
					$(caseStudy[n-3]).css({
						'z-index': zIndex[3]
					});
				}
			}

			//  Let's start moving the case studies...
			if (i-n >= 0) // this will move the case that is in position 4 to 0, and down one level.
			{ 
				$(caseStudy[i]).animate({
					//left: '-=950px'
					left: position[i-n]
					
					}, {
					duration: mySpeed,
					specialEasing: { left: 'easeInOutExpo' },
					complete: function() {
						//$("#status").after('<div>LEFT Animation complete.</div>');
						//fadeCase(n);
					}
				});
				
			} else {
				
				$(caseStudy[i]).animate({
					//left: '-=950px'
					left: position[i+caseStudy.length-n]
					}, {
					duration: mySpeed,
					specialEasing: { left: 'easeInOutExpo' },
					complete: function() {
						//$("#status").after('<div>LEFT Animation complete.</div>');
						//fadeCase(n);
					}
				});
			}
		}
	}
}


// RIGHT BUTTON ACTION
$("#right div.control").click(function(){
	currentCase++;
	resetCases();
	if (currentCase == caseStudy.length)
	{
		currentCase = 0;
	}
	movePhotos(currentCase, -1);
	
	for (i=0; i<caseStudy.length; i++) {
		$(caseStudy[i]).css({
			//'opacity': 0.5
			'opacity': 1
			//'margin-left': $('#modal').width/2 - 475
		});
	}
	
});

// LEFT BUTTON ACTION
$("#left div.control").click(function(){
	currentCase--;
	resetCases();
	if (currentCase < 0)
	{
		currentCase = caseStudy.length-1;
	}
	movePhotos(currentCase, 1);
	
	for (i=0; i<caseStudy.length; i++) {
		$(caseStudy[i]).css({
			//'opacity': 0.5
			'opacity': 1
			//'margin-left': $('#modal').width/2 - 475
		});
	}
	
});



movePhotos(currentCase, 0);

//-->
