var slider = null;
var slider_next = null;

$(function () {

    var interval = setInterval('rotate_slider()', 8000);

    $('#featuredSlider > div:not(:first)').attr('style','position:absolute;left:800px;width:800px');
    $('#featuredSlider > div:first').next().attr('style','position:absolute;left:0px;width:800px');

	$('#featuredShortcuts > div').click( function() {

		clearInterval(interval);

		sliders = $('#featuredSlider > div:not(:first)');

		sliders.css({"left": "800px", "opacity": 0});

		var curr_div = $(this);
		var selected_div = $('#featuredShortcuts > div.selected');
		
		selected_div.toggleClass('selected');
		curr_div.toggleClass('selected');
			
		clickDiv = parseInt(curr_div.attr('id').substr(1, 1));
		selectDiv = parseInt(selected_div.attr('id').substr(1, 1));
			
		$("#featuredSlider > div").eq( selectDiv ).animate({"left": "-=800px", "opacity": 0}, 1000).css("display","none");
		$("#featuredSlider > div").eq( clickDiv ).animate({"left": "0px", "width": "800px", "opacity": 1}, 1000);
	});
});

function rotate_slider()
{
    var next = null;
    var curr_div = $('#featuredShortcuts > div.selected');

    if( $('#featuredShortcuts > div:last').hasClass('selected') )
    {
        next = $('#featuredShortcuts > div:first');
    }
    else
    {
        next = curr_div.next();
    }

    curr_div.toggleClass('selected');
    next.toggleClass('selected');

    if( ! slider )
    {
        slider = $('#featuredShortcuts').next();
        slider_next = slider.next();
    }
    else if ( slider_next.html() == $('#featuredSlider > div:last').html() )
    {
        slider = slider.next();
        slider_next = $('#featuredShortcuts').next();
    }
    else if ( slider.html() == $('#featuredSlider > div:last').html() )
    {
        slider = $('#featuredShortcuts').next()
        slider_next = slider_next.next();
    }
    else
    {
        slider = slider.next();
        slider_next = slider.next();
    }

	slider.animate({"left": "-=800px", "opacity": 0}, 10).css("display","none");
    slider_next.animate({"left": "0px", "width": "800px","opacity": 1}, 10, function () { slider.css('left', '800px') });

}

