/* Homepage Carousel js */

// Global Variables
var oldWidth,
minWidth = 960,
currentIndex = 0,
joinWidth = 265,
screenWidth = minWidth +(2*joinWidth),
$slides, $controls, interval, count = 0,
seconds = 6;

function fnHomeCarousel() {
    	
	$j(window).resize(function() {
		fnWidthCheck();
	});
	
	fnWidthCheck();
	fnResetSlides();
	
	$j('.slidesWrapper .slide, .slidesWrapper .joiner').removeClass('hide');
	
	//build controls
	
	var playPauseBtn = '<div class="playPause"><a href="#" class="pause">Pause</a></div>',
	first_slide = $j('.slidesWrapper .slide:first'),
	first_slide = first_slide.add(first_slide.next('.joiner')), 
	last_joiner = $j('.slidesWrapper .joiner:last'),
	controls = '<div id="controls">';
	nav_length = 0,
	
	$j('.slidesWrapper .slide').each(function(i){
		controls+='<a href="#">'+(i+1)+'</a>';
		nav_length = i //used for infinite scroll
	});
	
	controls +='</div>';
	
	//clone the first slide and insert after last so we can fake infinite scrolling later
	last_joiner.after(first_slide.clone().addClass('cloned'));
	
	$j('#controlsWrap').append(controls).append(playPauseBtn);

	$j('#controls a').click(function (obj) {

	    secondsPer = 1000;
	    ind = $j(this).index();
	    time = Math.abs(((currentIndex + 1) - (ind + 1)) * secondsPer);
	    amt = (ind * screenWidth) - (joinWidth * ind);
	    count = ind;

	    //if the slideshow is playing and this is an original click (not a simulated one)
	    if ($j('#controlsWrap a.pause').length > 0 && obj.originalEvent) {
	        $j('#controlsWrap a.pause').click();
	    }

	    //if we're on the last slide and the user requests the first slide, do some magic
	    if (currentIndex === nav_length && ind === 0) {
	        amt = $j('.slidesWrapper').scrollLeft() + minWidth + joinWidth; //go left by width of cloned elements
	        $j('.slidesWrapper').animate({ scrollLeft: amt }, secondsPer, "easeOutQuad", function () {
	            //after animation silently reset position to start 
	            $j('.slidesWrapper').scrollLeft(0);
	            count = 0;
	            currentIndex = 0;
	        });
	    }
	    else {
	        $j('.slidesWrapper').animate({ scrollLeft: amt }, time, "easeOutQuad", function () {
	            //after animation
	            currentIndex = ind;
	            //  			fnPauseOnLast(ind);
	        });
	    }
	    $j('#controls a').removeClass('active').filter($j(this)).addClass('active');
	    return false;
	});  //end click
	
	$j('#controls a').removeClass('active').filter(':first').addClass('active');
	
	
	$j(window).load(function(){
	    fnLoadBgImgs();
	    fnLoadImgs();

	    fnHomeSlidePlay(true);
	});
	
	
	$j('#controlsWrap a.pause').live('click', function() {
		fnHomeSlidePause();
		return false;
	});
	
	$j('#controlsWrap a.play').live('click', function() {
		fnHomeSlidePlay(true);
		return false;
	});
	
	
	$j('.slidesWrapper').mouseenter(function(){
		fnHomeSlidePause();
		return false;
	});

}

function fnLoadBgImgs() {
    placeholderClass = '.bg-img-placeholder';
    dataClass = '.bg-img-data';

    $j(placeholderClass).each(
        function () {
            oThis = $j(this);
            data = $j(dataClass, oThis);

            if (oThis.css('background-image') == 'none') {
                oThis.css('background-image', "url('" + data.attr('href') + "')");
            }

            data.remove();
        }
    );
}

function fnLoadImgs() {
    placeholderClass = '.img-placeholder';
    dataClass = '.img-data';
    closestClass = '.box';

    $j(placeholderClass).each(
        function () {
            placeholder = $j(this);
            data = $j(dataClass, placeholder.closest(closestClass));

            if (placeholder.attr('src') == '') {
                placeholder.attr('src', data.attr('href'));
            }

            data.remove();
        }
    );
}

function fnResetSlides(){
	$j('.slideWrapper').scrollLeft(0);
}


function fnClickSlide(){
	
	//console.log("count: "+count);
	
	$controls = $j('#controls');
	
	$controls.find('a:eq('+count+')').click();
	
	if(count>=($controls.find('a').length -1)){
		
		
		count = 0;
	}
	else{
		count++;
	}
	
	//console.log("after click: "+count)
}

function fnHomeSlidePlay(init){
	//if its an initial click then start playing imediately
	if(init){
		count++;
//		fnClickSlide();
    interval = window.setTimeout( "fnClickSlide()", seconds*1000 )
	}
	
	//var seconds = 4;
	
	window.clearInterval(interval);
	$j('.playPause a').removeClass('play').addClass('pause').text('Pause');
	interval = window.setInterval( "fnClickSlide()", seconds*1000 );
	
}

function fnHomeSlidePause(){

	$j('.slidesWrapper').stop(true, true);
	window.clearInterval(interval);
	$j('.playPause a').removeClass('pause').addClass('play').text('Play');
	return false;
}



function fnHomeSlideStop(){

	window.clearInterval(interval);
	$j('.slidesWrapper').stop(true, true);
	//do this again in half a second as it sometimes goes to the wrong position.
	setTimeout('fnResetSlides()', 500);
	fnResetSlides();
	$j('.playPause a').removeClass('pause').addClass('play').text('Play');
	fnHomeSlide();
}


//function fnPauseOnLast(x){
//	
//	if(x == $j('#controls a').length-1){
		//dont use stop command here as it triggers the animation end, which results in a recursive loop;
//		window.clearInterval(interval);
//		$j('.playPause a').removeClass('pause').addClass('play').text('Play');
//		count = -1;
//	}
//}


// Find width of body, if it's big enough, serve the wider layout
function fnWidthCheck(){
	
	w =	$j('body').width();
	
	if (w<=minWidth){w=minWidth;}
	
	offset = Math.round((w-screenWidth)/2);
	
	if(w > screenWidth){
		$j('body').addClass('wide');
		wide=true;
		$j('.slidesWrapper').css({'left': offset, 'width':(screenWidth)});
		
	}else{
		$j('body').removeClass('wide');
		wide=false;
		
		$j('.slidesWrapper').css({'left': offset,'width':w+Math.abs(offset)});
	}
}