//GLOBAL VARIABLES
var galXmlURL = '/includes/carousel.xml';
var $galXML;

//jQuery Plugins Here

(function($) {
  var cache = [];
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

var swapImg = function(imgNum)
{
	var $galList = $('#rotater ul');
	var $refList = $('#ref ul');

	$galList.find('li.top').fadeTo(1500, '0.01', function()
	{
		$galList.find('li.top').remove();
	});

	$refList.find('li.top').fadeTo(1500, '0.01', function()
	{
		$refList.find('li.top').remove();
	});

	$galList.find('li.bottom').fadeTo(1500, '1.0', function()
	{		
		
		$galList.find('li.bottom')
			.removeClass('bottom')
			.addClass('top');
			
	});

	$refList.find('li.bottom').fadeTo(1525, '1.0', function()
	{				
		imgNum++;
		
		$refList.find('li.bottom')
			.removeClass('bottom')
			.addClass('top');
		
		animateGallery(imgNum);
	});

}

var animateGallery = function(imgNum) {

	var $galList = $('#rotater ul');
	var $refList = $('#ref ul');
	
	var galSize = $galXML.find('galImage').size();
		
	if (imgNum >= galSize)
	{
		imgNum = 0;
	}
	
	var nextImg = $galXML.find('gallery galImage:eq('+imgNum+')').text();
	var nextRef = $galXML.find('gallery galImage:eq('+imgNum+')').text();
	
	nextRef = nextRef.replace('/rotater/', '/rotater/ref/');

	var link = $galXML.find('gallery galImage:eq('+imgNum+')').attr('link');

	var $newImg = $('<img />')
		.attr('alt', '')
		.attr('src', nextImg);

	var $newRef = $('<img />')
		.attr('alt', '')
		.attr('src', nextRef);
		
	if (link) {
		
		var $newLink = $('<a />')
			.attr('href', link)
			.append($newImg);
		
		var $newItem = $('<li></li>')
			.addClass('bottom')
			.append($newLink)
			.appendTo($galList);
						
	} else {
	
		var $newItem = $('<li></li>')
			.addClass('bottom')
			.append($newImg)
			.appendTo($galList);
			
	}

	var $newRefItem = $('<li></li>')
		.addClass('bottom')
		.append($newRef)
		.appendTo($refList);

	setTimeout ( 'swapImg('+imgNum+')', 6000 );
}

var tipOn = function(e) {
	
	$('<div/>')
		.addClass('dynamic_text')
		.addClass(e.data.trigger)
		.css({"left": e.pageX + 15, "top" : e.pageY - 15})
		.text(e.data.city).appendTo('body');
}

var tipOnSi = function(e) {
	
	$('<div/>')
		.addClass('dynamic_text')
		.addClass(e.data.trigger)
		.css({"left": e.pageX + 15, "top" : e.pageY})
		.text(e.data.city).appendTo('body');
}

var tipOff = function(e) {
	$('div.' + e.data.trigger).hide();
}


//RUN jQUERY AND JS ON DOM LOAD
jQuery(function() {

$('#rotater').addClass('loading');

$.get(galXmlURL, function(data)
{
	$('gallery galImage', data).each(function()
	{
		var theSrc = $(this).text();
		var refSrc = theSrc.replace('/rotater/', '/rotater/ref/');
		jQuery.preLoadImages(theSrc, refSrc);
	})
});

$('<div/>')
	.addClass('trigger')
	.addClass('trigger_us')
	.appendTo('#header')
	.bind('mouseover', {trigger:'NY', city:'New York, USA'}, tipOn)
	.bind('mouseout', {trigger:'NY'}, tipOff);
	
$('<div/>')
	.addClass('trigger')
	.addClass('trigger_uk')
	.appendTo('#header')
	.bind('mouseover', {trigger:'UK', city:'London, UK'}, tipOn)
	.bind('mouseout', {trigger:'UK'}, tipOff);

$('<div/>')
	.addClass('trigger')
	.addClass('trigger_sing')
	.appendTo('#header')
	.bind('mouseover', {trigger:'SI', city: 'Singapore'}, tipOnSi)
	.bind('mouseout', {trigger:'SI'}, tipOff);
	
$('<div/>')
	.addClass('trigger')
	.addClass('trigger_qa')
	.appendTo('#header')
	.bind('mouseover', {trigger:'QA', city:'Doha, Qatar'}, tipOn)
	.bind('mouseout', {trigger:'QA'}, tipOff);

$('ul.sidenav li a').hover(
	function(){ 
		$('ul.sidenav li a.current').removeClass('active');
		$(this).addClass('active');	
	},
	function(){
		$(this).removeClass('active');
		$('ul.sidenav li a.current').addClass('active');
	});

$('ul.more_video_list').find('li:odd').addClass('odd');

});

//RUN jQUERY AFTER ALL IMAGES ARE LOADED
$(window).load(function() {
	var $rotater = $('#rotater').empty();
	var $galList = $('<ul></ul>');

	var $ref = $('#ref').empty();
	var $refList = $('<ul></ul>');

	$.get(galXmlURL, function(data)
	{
		$('gallery galImage:first-child', data).each(function()
		{								
			var theSrc = $(this).text();

			var refSrc = theSrc.replace('/rotater/', '/rotater/ref/');
			
			var link = $(this).attr('link');

			var $newImg = $('<img />')
				.attr('alt', '')
				.attr('src', theSrc);

			if (link) {
			
				var $newLink = $('<a />')
					.attr('href', link)
					.append($newImg);
			
				var $newItem = $('<li></li>')
					.addClass('top')
					.append($newLink)
					.appendTo($galList);
							
			} else {
		
				var $newItem = $('<li></li>')
					.addClass('top')
					.append($newImg)
					.appendTo($galList);
			}
	
			var $newRef = $('<img />')
				.attr('alt', '')
				.attr('src', refSrc);
			var $newRefItem = $('<li></li>')
				.addClass('top')
				.append($newRef)
				.appendTo($refList);
		});
		
		$galList.appendTo($rotater);
		$refList.appendTo($ref);
		
		$galXML = $(data);
						
		$rotater.load(animateGallery(1));
	});
});