var $jq_wrapper;
var interval = 5000 //5 seconds
var slideShow, autoId =1;

$(function(){

		$jq_wrapper = $('#jq_Wrapper');
		
		$.get('xml/homepageSlider.xml',generateHTML);
		     
	
	})
	
function generateHTML(data)
{
	var iw = $(data).find('banner').attr('imgWidth');
	var ih = $(data).find('banner').attr('imgHeight');

	var $slider_content = $('<ul />',{
			id: 'slider_content'
		});
	
	var $jq_nav = $('<div />').addClass('jq_nav');
	
	var $jq_nav_buttons = $('<ul />').addClass('jq_nav_buttons');
	
	
	var $jq_Slider = $('<div />',{
			id: 'jq_Slider'
		});
	
	//xml pharse
	$(data).find('slide').each(function(id){
		//var img = new Image();
		var $img = $('<div />');
		var $atag = $('<a />');
		var $li = $('<li />');
		var $tli = $('<li />');
		var $thumb = $('<img />');
		var imgURL = $(this).find('image').text();
		var imgAlt = $.trim($(this).find('imgAlt').text());
		var imgLink = $(this).find('link').text();
		var imgLinkTitle = $.trim($(this).find('linkTitle').text());
		var linkTarget = $(this).find('linkTarget').text();
		
		var logoURL = $(this).find('logo').text();
		var logoAlt = $(this).find('logoAlt').text();
		
		if(id==0) $li.addClass('active');		
		
		$atag.attr({
			href : imgLink,
			title : imgLinkTitle,
			target : linkTarget
			});
		
		/*$(img).hide().load(function(){
			$(this).fadeIn();
			}).attr({
				src : imgURL,
				alt : imgAlt,
				width : iw,
				height: ih
			}).appendTo($atag);*/
		
		
		$img.css({
			backgroundImage:'url('+imgURL+')',
			backgroundPosition: 'top center',
			height: ih+'px',
			backgroundRepeat: 'no-repeat'
			}).appendTo($atag);
		
		
		
		$atag.appendTo($li);
		$li.appendTo($slider_content);
		
		
		$thumb.attr({
				src : logoURL,
				alt : logoAlt
			});
		
		var $ta = $('<a />',{
				href : '#'
			});
		$thumb.appendTo($ta);	
		$ta.appendTo($tli);	
		if(id==0) $tli.addClass('select');	
		$tli.appendTo($jq_nav_buttons);
		
			
		});
		
	//pointer
	$('<li><img src="images/nav-pointer.png" width="10" height="9" /></li>').addClass('pointer').appendTo($jq_nav_buttons);
	
	
	
	$jq_nav_buttons.appendTo($jq_nav);
	
	$slider_content.appendTo($jq_Slider);	
	$jq_nav.appendTo($jq_Slider);
	$jq_Slider.appendTo($jq_wrapper);
	
	
	sliderFunc();
	
	slideShow = setInterval("onTimer()",interval);
		
}


	
function sliderFunc()
{
	$pointer = $('#jq_Slider .jq_nav ul.jq_nav_buttons li.pointer');
		$pointer.animate({
					left: $('ul.jq_nav_buttons li.select').position().left+$('ul.jq_nav_buttons li.select').width()/2-4
				 });
		//logo select
		$('ul.jq_nav_buttons li a').click(function(e){
			e.preventDefault();
				var id = $(this).parent().prevAll().length;
				clearInterval(slideShow);
				navigate_to_slide(id);
				autoId++;
				slideShow = setInterval("onTimer()",interval);
			//$(this).addClass('loading').parent('ul').find('li.select').removeClass('select');
			});
		
		//pointer animation
		$('ul.jq_nav_buttons li a').mouseenter(function(){
				//console.log($(this).position().left+$(this).width()/2-4);
				//clearInterval(slideShow);
				var i = $(this);
				setPointer(i);
			//	var id = $(this).parent().prevAll().length;
				//navigate_to_slide(id);
				
				
			});
			
		$('ul.jq_nav_buttons').mouseleave(function(){
				resetPointer();
			});	
}

function onTimer()
{
	if(autoId>$('ul.jq_nav_buttons li').length-2 /* pointer removed */) autoId=0; 
	setPointer($('ul.jq_nav_buttons li:eq('+autoId+') a'));
	navigate_to_slide(autoId);
	autoId++;
}
	
function setPointer($i)
{
	$pointer.animate({
					left: $i.position().left+$i.width()/2-4
				 },{queue:false});
}
	
function resetPointer()
{
	$pointer.animate({
					left: $('ul.jq_nav_buttons').find('li.select').position().left+$('ul.jq_nav_buttons').find('li.select').width()/2-4
				 },{queue:false});	
}

function navigate_to_slide(id)
{
	autoId = id;
	if($('ul.jq_nav_buttons li:eq('+id+')').hasClass('select')) return;
	$('ul.jq_nav_buttons li:eq('+id+') a').parent().addClass('loading').parent('ul').find('li.select').removeClass('select').parent().find('.loading').removeClass('loading').addClass('select');
	
	var $active = $('ul#slider_content li.active');
	var $next = $('ul#slider_content li').eq(id);
	
	$active.addClass('last-active');
	
	$next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
	
}