var
	$prev, $next, $cta, $tabsWrapper, $tabs, slideIdx, transTimer,
	slideWidth = 545,
	loadStartTime,
	slideSpeed = 1000,
	slideDuration = 5000;

$(function() {
	$cta = $("#cta"), $tabsWrapper = $cta.find("#tabsWrapper"),
	$prev = $cta.find(".slide.prev"), $next = $cta.find(".slide.next"), $Line1 = $cta.find("#Line1"), $Line2 = $cta.find("#Line2");
	slideIdx=0;
	loadStartTime = (new Date).getTime();
	prepSlide( $prev );
	$prev
		.css({left:0, width:slideWidth})
		.find("img").load(function() {
			slideIdx=1;
			prepSlide( $next )
			$next.find("img").load(function() { setTransitionTime( loadStartTime ); });
		});
	
	//Prepare Slide Number Tabs
	var tabSpacing, tabWidth, x;
	slides = slides.slice(0, 25);
	tabWidth = Math.floor(545 / slides.length); if(tabWidth > 50) tabWidth = 50;
	tabSpacing = 545 - (slides.length * tabWidth); if(tabSpacing > 10) tabSpacing = 10;
	x = (545 - (slides.length * tabWidth) - ((slides.length-1) * tabSpacing)) / 2;
	if(x < 4) {
		tabSpacing = 4;
		x = (545 - (slides.length * tabWidth) - ((slides.length-1) * tabSpacing)) / 2;
	}
	if(x < 4) {
		for(;tabWidth > 15; tabWidth--) {
			x = (545 - (slides.length * tabWidth) - ((slides.length-1) * tabSpacing)) / 2;
			if(x >= 4) break;
		}
	}
	for(var i=0; i<slides.length; i++) {
		$tabsWrapper.append("<div class=\"tab\" id=\"tab_" + i + "\" data-id=\"" + i + "\" style=\"left:" + x + "px; width:" + tabWidth + "px;\">" + (i+1) + "</div>");
		x = x + tabWidth + tabSpacing;
	}
	$tabs = $tabsWrapper.find(".tab").click(tabClick);
	
	//Prep initial slide info
	$Line1.text(slides[0].line1);
	$Line2.text(slides[0].line2);
	$tabsWrapper.find("#tab_0").addClass("selected");
	
	$("#slideWrapper")
		.mouseover(function() { $tabsWrapper.stop().delay(250).animate({opacity:1}); })
		.mouseleave(function() { $tabsWrapper.stop().delay(250).animate({opacity:0}); });
	$cta.find(".slide").click(function () { var href = $(this).attr("data-url"); if(href && href!="") window.open( href ); });
});

function tabClick() {
	clearTimeout( transTimer )
	if( prepSlide( $next, parseInt($(this).attr("data-id")) ) ) $next.find("img").load(function() { slideTransition(); });
	else slideTransition();
}

function setTransitionTime(loadStartTime) {
	var loadTime = (new Date).getTime() - loadStartTime;
	if( loadTime > slideDuration ) slideTransition();
	else transTimer = setTimeout("slideTransition();", slideDuration - loadTime);	
}

function prepSlide($slide, gotoSlide) {
	//Return true if the <img> DOM element was created (will fire .load in webkit)
	//Return false if the <img> DOM element already existed (does not fire .load)
	slideIdx = (gotoSlide===undefined)?slideIdx:gotoSlide;
	$slide.css({
		backgroundImage: "url('" + slides[slideIdx].image + "')",
		backgroundPositionX: 0,
		left: slideWidth,
		width: 185,
		zIndex: 0,
		cursor: slides[slideIdx].href==""?"default":"pointer"
	}).attr("data-url", slides[slideIdx].href );
	var bDOMCreated = false;
	if(! slides[slideIdx].DOM ) {
		slides[slideIdx].DOM = $("<img src=\"" + slides[slideIdx].image + "\" />");
		bDOMCreated = true;
	}
	$slide.empty().append( slides[slideIdx].DOM );
	return bDOMCreated;
}

function slideTransition() {
	$tabs.unbind("click", tabClick);
	$Line1.text(slides[slideIdx].line1);
	$Line2.text(slides[slideIdx].line2);
	$tabs.removeClass("selected");
	$tabsWrapper.find("#tab_" + slideIdx).addClass("selected");
	$prev.css({zIndex:0}).animate( {backgroundPositionX: -slideWidth}, slideSpeed, "swing" ).empty();
	$next.css({width:1, zIndex:1, left:slideWidth-1}).animate( {left: 0, width: slideWidth}, slideSpeed, "swing", function() {
		$("#cta .slide").toggleClass("prev").toggleClass("next");
		temp=$prev; $prev=$next; $next=temp;
		slideIdx = (slideIdx==slides.length-1) ? 0 : slideIdx+1;
		if( prepSlide($next) ) {
			loadStartTime = (new Date).getTime();
			$next.find("img").load(function() { setTransitionTime( loadStartTime ); });
		}
		else transTimer = setTimeout("slideTransition();", slideDuration);
		$tabs.click(tabClick);
	});
}