﻿/********** Slide Show **********/
var intervalId;
var activeId = 0;
var jumpId = 0;
var description = new Array();
var numberOfSlides = 0;

$(function() {
    description[0] = ""; //not used
	populateSlides();
    startSlide();	
    
	$('#navPanel a').live('click', function() {
	    // Live handler called.
		stopSlide();				
		//jumpId = $(this).attr("href");
		jumpId = $(this).attr("id");
		jumpId = jumpId.replace("nav","");
		slideSwitch();
		startSlide();
		return false;
	});		
	
    $('#slideshow').live('mouseover', function(){
            stopSlide();
    });
    $('#slideshow').live('mouseout', function(){
            startSlide();
    });	
	
});

function stopSlide() {
	//alert(intervalId);
	clearInterval(intervalId);
	return false;
}

function startSlide() {
	intervalId = setInterval( "slideSwitch()", 5000 );	
	//alert(intervalId);
	return false;
}

function slideSwitch() {
	var $active = $('#slide'+activeId);	
    
	$('#nav'+activeId).removeClass('navigationActive');

	if(jumpId > 0) {
		activeId = jumpId;
		jumpId = 0;		
	}else{
		if(activeId == numberOfSlides)
			activeId = 1;
		else
			activeId++;
	}

	$('#slideshowDescription').html(description[activeId]);
    $active.addClass('last-active');

	var $next = $('#slide'+activeId);
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 3000, function() {
            $active.removeClass('active last-active');
        });	
	$('#nav'+activeId).addClass('navigationActive');
}

function populateSlides() {    
	$.ajax({
		type: "GET",
		url: "Scripts/SlideShow.xml",
		dataType: "xml",
		success: parseXml,
		error: function(xhr) {
		    //alert('Error: ' + xhr.status + ' | ' + xhr.statusText);
		}
	});
}

function parseXml(xml)
{    
	var output = "";
	var imageActiveClass = "active";
	var navActiveClass = "navigationActive";
	var imageDescription = "";
	//find every the slide node
	$(xml).find("slide").each(function()
	{
		activeId++;
		//$(this).attr("attribute")
		$('#slideshow').append("<img src='"+ $(this).find("imageLocation").text() +"' alt='" + imageDescription + "' id='slide" + activeId + "' class='" + imageActiveClass + "' width='600'/>");		
		$("<li ><a href='" + activeId + "' id='nav" + activeId + "' class='" + navActiveClass + "'>" + activeId + "</a></li>").appendTo('ul#navPanel');
		description[activeId] = $(this).find("imageDescription").text();
		imageActiveClass = "";
		navActiveClass = "";		
	});
	numberOfSlides = activeId;
	activeId = 1;	
	$('#slideshowDescription').html(description[activeId]);
}

