$(function() {
	$(".accordion").accordion({
		autoHeight: false
	});
});

var active = false;
var bgSpeed = 600; // Speed of background animation
var txtSpeed = 400;
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';

$(document).ready(function() {

	$("#slider")
		.mouseenter(function(){
			active = true;
		}).mouseleave(function(){
			active = false;
		})

	$('#global-banner').addClass('banner-js');
	
	// ---------------------------- XML Read ------------------------------------
	$.ajax({
		type: "GET",
		url: "/data/banners.xml",
		dataType: "xml",
		success: function(xml) {
			
			var ban = $('banner', xml); 
			var nodeLevel = Math.floor(Math.random()*(ban.length));
			if (nodeLevel > 0 && nodeLevel < ban.length ) {
				var lastNode = nodeLevel - 1;
			} else {
				var lastNode = 0;
			}
			
			// preload our images first
			$(xml).find('banner').each(function() {
				$.preload([$(this).find('image').text()], {
					base: '/Library/Galleries/Original/',
					ext: ''
				});
			});

			$(xml).find('banner').each(function() {
				// on page load, this loads in first node into the odd banner
				lastNode = nodeLevel;
				id = $('.slider-item:eq('+nodeLevel+')').attr("id");
				var title = $(ban.get(nodeLevel)).find('title').text();
				var image = $(ban.get(nodeLevel)).find('image').text();
				$('#odd').css('background', 'transparent url("/Library/Galleries/Original/' + image + '") left top no-repeat');
				$('#title h2').html(title);
				if (!active) {
					id = $('.slider-item:eq('+nodeLevel+')').attr("id");
					var index = parseInt(nodeLevel)
					$('#slider #slider-mask').trigger( 'goto', [ index ] );
				}
				
				$('.slider-item a').removeClass("active");
				$('#'+id+' a').addClass("active");
			});
			
			function animate(){
				
				//checks what's currently on and off screen, then changes order
				if (currentState == 1) {
					currentState = 0;
					offScreen = $('#even');
					onScreen = $('#odd');
				} else if (currentState == 0) {
					currentState = 1;
					offScreen = $('#odd');
					onScreen = $('#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;
				}
				
				if (!active) {
					id = $('.slider-item:eq('+nodeLevel+')').attr("id");
					var index = parseInt(nodeLevel)
					$('#slider #slider-mask').trigger( 'goto', [ index ] );
				}
				
				$('.slider-item a').removeClass("active");
				$('#'+id+' a').addClass("active");
				
				
				
				/*$('#controls .slider-group').localScroll({
   					target:'#'+id
				});*/
	
				
				lastNode = nodeLevel;
				
				autoPlay(false);
				
				autoPlay(true);
				
				//moves offScreen banner to the right
				offScreen.css('left', '1000px');

				//gets next background node and adds it to offScreen div
				var title = $(ban.get(nodeLevel)).find('title').text();
				var image = $(ban.get(nodeLevel)).find('image').text();
				
				$('#title h2').animate({ top: 100 }, txtSpeed, easeType, function() {
					// does this inside animate function so it occurs off screen
					$('#title h2').html(title);
				});
				$('#title h2').animate({ top: 30 }, txtSpeed, easeType);
				
				offScreen.css('background', 'transparent url("/Library/Galleries/Original/' + image + '") left top no-repeat');

				//animates the divs
				onScreen.animate({ left: '-1000px' }, bgSpeed, easeType);
				offScreen.animate({ left: '0' }, bgSpeed, easeType, function() {
				});

			};
			
			autoPlay(true);
			
			$('.slider-item a').click( function(e) {
				
				e.preventDefault();	
				
				$('.slider-item a').removeClass("active");
				$(this).addClass("active");		
				
				nodeLevel = $('.slider-item a').index(this);
				
				if (nodeLevel != lastNode) {
				
					autoPlay(false);
					
					var index = $('.slider-item a').index(this);
					if ( index == 0 ) { 
						$("a#prev").css('visibility', 'hidden'); 
					} else { 
						$("a#prev").css('visibility', 'visible');
					}
					if ( index == $('.slider-item').length-1 ) { 
						$("a#next").css('visibility', 'hidden'); 
					} else { 
						$("a#next").css('visibility', 'visible');
					}	
					
					//checks what's currently on and off screen, then changes order
					if (currentState == 1) {
						currentState = 0;
						offScreen = $('#even');
						onScreen = $('#odd');
					} else if (currentState == 0) {
						currentState = 1;
						offScreen = $('#odd');
						onScreen = $('#even');
					}
	
					// if current node level is less than zeros, make it maximum
					if (nodeLevel < 0) {
						nodeLevel = ban.length - 1;
					}
	
					//moves offScreen banner to the right
					offScreen.css('left', '1000px');
	
					//gets next background node and adds it to offScreen div
					var title = $(ban.get(nodeLevel)).find('title').text();
					var image = $(ban.get(nodeLevel)).find('image').text();
					
					$('#title h2').animate({ top: 100 }, txtSpeed, easeType, function() {
						// does this inside animate function so it occurs off screen
						$('#title h2').html(title);
					});
					$('#title h2').animate({ top: 30 }, txtSpeed, easeType);
					
					offScreen.css('background', 'transparent url("/Library/Galleries/Original/' + image + '") left top no-repeat');
	
					//animates the divs
					onScreen.animate({ left: '-1000px' }, bgSpeed, easeType);
					offScreen.animate({ left: '0' }, bgSpeed, easeType, function() {
						autoPlay(true);
					});
					
				}
				lastNode = nodeLevel; 
			});
			
			
			function autoPlay(active) {
				if(active == true) {
					auto = setInterval(function(){animate()}, rotateSpeed);
				} else {
					clearInterval(auto);
				}
			}
			
		}

	});
});

$(function() {

	var $controls = $('#slider #slider-bg');
	var $mask = $('#slider #slider-mask');
	var $panels = $('#slider .slider-item');
	var $container = $('#slider .slider-group');

	$panels.css({
    	'float' : 'left',
    	'position' : 'relative' // IE fix to ensure overflow is hidden
  	});
  
  	// calculate a new width for the container (so it holds all panels)
  	$container.css({'width': $panels[0].offsetWidth * $panels.length, 'background':'transparent'});

	// collect the scroll object, at the same time apply the hidden overflow
	// to remove the default scrollbars that will appear
	var $mask = $('#slider #slider-mask').css('overflow', 'hidden');

	// apply our left + right buttons
	$controls
  		.before('<a id="prev" class="slider-nav" href="#" title="Previous slide">Previous slide</a>')
  		.after('<a id="next" class="slider-nav" href="#" title="Next slide">Next slide</a>');
  		
	
	var offset = parseInt($container.css('paddingLeft')|| 0) * -1;

	var scrollOptions = {
			
  		target: $mask, // the element that has the overflow
  
  		// can be a selector which will be relative to the target
  		items: $panels,
    
  		// selectors are NOT relative to document, i.e. make sure they're unique
  		prev: '#prev', 
  		next: '#next',
  
  		// allow the scroll effect to run both directions
  		axis: 'xy',
  		  		
  		offset: offset,
      
  		// duration of the sliding effect
 		duration: 500,
 		 
 		cycle: false,
  
  		// easing - can be used with the easing plugin: 
  		// http://gsgd.co.uk/sandbox/jquery/easing/
  		easing: 'swing',
  		
		onAfter:function(elem){
			var index = $('.slider-item').index(elem);
			if ( index == 0 ) { 
				$("a#prev").css('visibility', 'hidden'); 
			} else { 
				$("a#prev").css('visibility', 'visible');
			}
			if ( index == $('.slider-item').length-1 ) { 
				$("a#next").css('visibility', 'hidden'); 
			} else { 
				$("a#next").css('visibility', 'visible');
			}			
		}
	};

	// apply serialScroll to the slider - we chose this plugin because it 
	// supports// the indexed next and previous scroll along with hooking 
	// in to our navigation.
	$('#slider').serialScroll(scrollOptions);  
	
	$.localScroll(scrollOptions);
  
});