var bgSpeed = 600; // Speed of background animation
var txtSpeed = 400; // Speed of text animation
var currentState = 1; // if 1(odd) then odd banner is on screen, else if 0(even) then even banner is on screen
var rotateSpeed = 6000;
var PRELOADED = false;
var easeType = 'easeInOutExpo';

$('#header').ready(function(){
		$('#header').css('background', 'none');				   
});

$(document).ready(function() {
	
	$('.controls').css('visibility', 'visible');					
	//$('#loader').css({visibility : 'visible'});
	// ---------------------------- XML Read ------------------------------------
	$.ajax({
		type: "GET",
		url: "xml/banners.xml",
		dataType: "xml",
		success: function(xml) {

			var ban = $('banner', xml);   // $(ban.get(1));
			var nodeLevel = Math.floor(Math.random()*(ban.length));

			// preload our images first
			$(xml).find('banner').each(function() {
				$.preload([$(this).find('background').text()], {
					base: 'img/',
					ext: ''
				});
			});

			$(xml).find('banner').each(function() {

				// on page load, this loads in first node into the odd banner
				var client = $(ban.get(nodeLevel)).find('client').text();
				var content = $(ban.get(nodeLevel)).find('content').text();
				var background = $(ban.get(nodeLevel)).find('background').text();
				
				var casestudy = $(ban.get(nodeLevel)).find('casestudylink').text();

				$('#banner-name').html(client);
				$('#banner-desc').html(content);
				$('#banner-odd').css('background', 'transparent url("img/' + background + '") left top no-repeat');
				//runs a case study check for initial div
				caseStudy();

			});
			
			//Case Study function
			function caseStudy(){
				var casestudy = $(ban.get(nodeLevel)).find('casestudylink').text();
				
				if(casestudy != ''){
					$('#cs').fadeIn();
					$('#cs').attr('href', casestudy);
				} else {
					$('#cs').fadeOut();
				}
			}
			
			
			function rightFunc(){
				//blocks user from clicking while it rotates
				$('#control-disable').css({ visibility: 'visible' });
				
				//checks what's currently on and off screen, then changes order
				if (currentState == 1) {
					currentState = 0;
					offScreen = $('#banner-even');
					onScreen = $('#banner-odd');
				} else if (currentState == 0) {
					currentState = 1;
					offScreen = $('#banner-odd');
					onScreen = $('#banner-even');
				}

				//increment node level
				nodeLevel = nodeLevel + 1;

				// if current node level is higher than available nodes, reset to zero (first node)
				if (nodeLevel > (ban.length - 1)) {
					nodeLevel = 0;
				}

				// animate text and change its data to match current node level
				var client = $(ban.get(nodeLevel)).find('client').text();
				var content = $(ban.get(nodeLevel)).find('content').text();
				$('.text-content').animate({ height: 'hide' }, txtSpeed, easeType, function() {
					// does this inside animate function so it occurs off screen
					$('#banner-name').html(client);
					$('#banner-desc').html(content);
				});
				$('.text-content').animate({ height: 'show' }, txtSpeed, easeType);

				//moves offScreen banner to the right
				offScreen.css('left', '990px');

				//gets next background node and adds it to offScreen div
				var background = $(ban.get(nodeLevel)).find('background').text();
				offScreen.css('background', 'transparent url("img/' + background + '") left top no-repeat');
								
				//checks to see whether or not node has a case study attached, then shows link to it.
				caseStudy();			

				//animates the divs
				onScreen.animate({ left: '-990px' }, bgSpeed, easeType);
				offScreen.animate({ left: '0' }, bgSpeed, easeType, function() {
					$('#control-disable').css({ visibility: 'hidden' });
				});

			};
			
			
			auto = setInterval(function(){rightFunc()}, rotateSpeed);



			$('.banner-left').click(function(e) {
				e.preventDefault();					  
				clearInterval(auto);
				auto = setInterval(function(){rightFunc()}, rotateSpeed);

				$('#control-disable').css({ visibility: 'visible' });

				//checks what's currently on and off screen, then changes order
				if (currentState == 1) {
					currentState = 0;
					offScreen = $('#banner-even');
					onScreen = $('#banner-odd');
				} else if (currentState == 0) {
					currentState = 1;
					offScreen = $('#banner-odd');
					onScreen = $('#banner-even');
				}

				//decrement node level
				nodeLevel = nodeLevel - 1;

				// if current node level is less than zeros, make it maximum
				if (nodeLevel < 0) {
					nodeLevel = ban.length - 1;
				}

				//gets next background node and adds it to offScreen div
				var background = $(ban.get(nodeLevel)).find('background').text();
				offScreen.css('background', 'transparent url("img/' + background + '") left top no-repeat');
				
				//checks to see whether or not node has a case study attached, then shows link to it.
				caseStudy();

				// animate text and change its data to match current node level
				var client = $(ban.get(nodeLevel)).find('client').text();
				var content = $(ban.get(nodeLevel)).find('content').text();
				$('.text-content').animate({ height: 'hide' }, txtSpeed, easeType, function() {
					// does this inside animate function so it occurs off screen
					$('#banner-name').html(client);
					$('#banner-desc').html(content);
				});
				$('.text-content').animate({ height: 'show' }, txtSpeed, easeType);

				//moves offScreen banner to the left
				offScreen.css('left', '-990px');


				//animates the divs
				onScreen.animate({ left: '990px' }, bgSpeed, easeType);
				offScreen.animate({ left: '0' }, bgSpeed, easeType, function() {
					$('#control-disable').css({ visibility: 'hidden' });
				});


			});


			$('.banner-right').click(function(e) {
				e.preventDefault();						   
			    clearInterval(auto);
				auto = setInterval(function(){rightFunc()}, rotateSpeed);

				//initiate button disable div
				$('#control-disable').css({ visibility: 'visible' });
				
				rightFunc();


			});
		}
	});
});