var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
var firsttime = 0;
var $active, $next;

theInterval = function(cur){
	clearInterval(theInt);
	
	if( typeof cur != 'undefined' )
	{
		curclicked = cur;
		
            // Change the fading section
            // find the active div
		    $active = $('#slideshow #slideshowitem.active');
		    // and remove the active class
		    $active.removeClass('last-active');
		    $active.removeClass('active');
		    $active.removeClass('active last-active');
		    // set active to the first div
		    $active = $('#slideshow #slideshowitem:first');


		if (cur == 0)
		{
		    $active.addClass('active');
		}
		else
		{
		    for( i=0; i < cur; i++){
		        // if this is the 1st loop, then add the active class to the 1st div
		        if (i == 0)
		            $active.addClass('active');
    		    
		        // get the active div    
                $active = $('#slideshow #slideshowitem.active');

                // get the next div to go to
    		    $next =  $active.next().length ? $active.next()
                    : $('#slideshow #slideshowitem:first');
                    
                // make the current div the last active div    
                $active.addClass('last-active');

                // make the next div the active one and remove the current div as the active div
                $next.css({opacity: 0.0})
                    .addClass('active')
                    .animate({opacity: 1.0}, 0, function() {
                        $active.removeClass('active last-active');
                });    
            }
        }
        firsttime = 2;
    }
	
	$crosslink.removeClass("active-thumb");
	$navthumb.eq(curclicked).parent().addClass("active-thumb");
	$(".panelNav li a").eq(curclicked).trigger('click');
	
	theInt = setInterval(function(){
		$crosslink.removeClass("active-thumb");
		$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".panelNav li a").eq(curclicked).trigger('click');

        if (firsttime == 0 && curclicked > 0)
        {
	        // For the fading part
            $active = $('#slideshow #slideshowitem.active');
                if ( $active.length == 0 ) $active = $('#slideshow #slideshowitem:last');

            // use this to pull the images in the order they appear in the markup
            $next =  $active.next().length ? $active.next()
                : $('#slideshow #slideshowitem:first');

            $active.addClass('last-active');

            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 2000, function() {
                    $active.removeClass('active last-active');
                });
        }

        if (firsttime == 1)
        {
            $active = $('#slideshow #slideshowitem.active');
                if ( $active.length == 0 ) $active = $('#slideshow #slideshowitem:last');
            
            if (curclicked == 0)
            {
                // use this to pull the images in the order they appear in the markup
                $next =  $('#slideshow #slideshowitem:first');

                $active.addClass('last-active');

                $next.css({opacity: 0.0})
                    .addClass('active')
                    .animate({opacity: 1.0}, 2000, function() {
                        $active.removeClass('active last-active');
                    });
                
            }
            else
            {   
                // use this to pull the images in the order they appear in the markup
                $next =  $active.next().length ? $active.next()
                    : $('#slideshow #slideshowitem:first');

                $active.addClass('last-active');

                $next.css({opacity: 0.0})
                    .addClass('active')
                    .animate({opacity: 1.0}, 2000, function() {
                        $active.removeClass('active last-active');
                    });
            }
        }
	    
	    if (firsttime == 2)
	        firsttime = 0;
	        
		curclicked++;
		if( 4 == curclicked )
		{
			curclicked = 0;
			firsttime = 1;
		}
	    
	}, 7000);
};

$(document).ready(function() {
	
	$("#main-photo-slider").codaSlider();
	$navthumb = $(".nav-thumb");
	$crosslink = $(".cross-link");
	
	$navthumb
	.click(function() {
		var $this = $(this);
		theInterval($this.parent().attr('href').slice(1)-1);
		return false;
	});
	
	theInterval();
});


//function slideSwitch() {
//    var $active = $('#slideshow #slideshowitem.active');

//    if ( $active.length == 0 ) $active = $('#slideshow #slideshowitem:last');

//    // use this to pull the images in the order they appear in the markup
//    var $next =  $active.next().length ? $active.next()
//        : $('#slideshow #slideshowitem:first');

//    // uncomment the 3 lines below to pull the images in random order
//    
//    // var $sibs  = $active.siblings();
//    // var rndNum = Math.floor(Math.random() * $sibs.length );
//    // var $next  = $( $sibs[ rndNum ] );


//    $active.addClass('last-active');

//    $next.css({opacity: 0.0})
//        .addClass('active')
//        .animate({opacity: 1.0}, 2000, function() {
//            $active.removeClass('active last-active');
//        });
//}