/*jslint browser: true, eqeqeq: true, undef: true */
/*global $, encodeEntities, doBannerRotation */
/******************************************************************************
Lines above are for jslint, the JavaScript verifier.  http://www.jslint.com/
******************************************************************************/

/* This JS file contains scripts for banner/image sliders and rotations */

/* homepage banner rotation variables */
var bannerCount;
var currentBanner;
var previousBanner;
var nextBanner;
var bannerT;

// adds a collection of data about a banner (as an object) to an
// existing array (defined as "bannerArray")

// usage:
//
//     addHomepageBanner(homepageBannerArray, {
//         promoName:  "GE Café | Takes food further.",
//         bannerURL:  "/images/ge_cafe_takeover/banner_4.jpg",
//         thumbURL:   "/images/ge_cafe_takeover/banner_thumb_4.jpg",
//         linkURL:    "http://www.google.com/",                      // optional
//         linkTarget: "blank",                                       // optional
//         disclaimer: "disclaimer text"                              // optional
//     });
//
// backward-compatible usage:
//
//     addHomepageBanner(
//         homepageBannerArray,
//         "GE Café | Takes food further.",
//         "/images/ge_cafe_takeover/banner_4.jpg",
//         "/images/ge_cafe_takeover/banner_thumb_4.jpg",
//         "http://www.google.com/",
//         "blank",
//         "disclaimer text"
//     );

function addHomepageBanner (bannerArray, promoName, bannerURL, thumbURL, linkURL,
			    linkTarget, disclaimer) {
	if (arguments.length === 2 && arguments[1] instanceof Object) {
		bannerArray.push(arguments[1]);
	}
	else {
		bannerArray.push({
			"promoName":  promoName,
			"bannerURL":  bannerURL,
			"thumbURL":   thumbURL,
			"linkURL":    linkURL,
			"linkTarget": linkTarget,
			"disclaimer": disclaimer
		});
	}
}

// this function takes the array of banners built by the
// "addHomepageBanner" function and builds out the banner rotator
// (including disclaimers, thumbs, and controls) from this
// information.

// usage:
//
//     buildBannerRotator(homepageBannerArray, {
//         width: 965,
//         height: 253
//     });
//
// backward-compatible usage:
//
//     buildBannerRotator(homepageBannerArray);

function buildBannerRotator (bannerArray, options) {
	var i, linkTarget, newBanner, newDisclaimer, newThumb, newBannerName,
		width, height;

	width = 965;
	height = 253;
	if (options && "width" in options) {
		width = options.width;
	}
	if (options && "height" in options) {
		height = options.height;
	}

	$("#bannerRotator").css({ height: height + "px" });
	
	// add banner(s) to page
	for( i=(bannerArray.length-1); i>=0; i-- ) {
		if (bannerArray[i].linkTarget) {
			linkTarget = bannerArray[i].linkTarget;
		} else {
			linkTarget = "self";
		}
		
		newBanner = '<div class="slide" id="homepageBanner'+i+'">';
		if( bannerArray[i].linkURL ) {
			newBanner += '<a href="'+bannerArray[i].linkURL+'" target="_'+linkTarget+'">';
		}
		newBanner += '<img src="'+bannerArray[i].bannerURL+'" width="' + width + '" height="' + height + '" alt="'+bannerArray[i].promoName+'" title="'+bannerArray[i].promoName+'" />';
		if( bannerArray[i].linkURL ) {
			newBanner += '</a>';
		}
		newBanner += '</div>';
		
		$("#bannerRotator").append(newBanner);
	}
	
	// create sub-banner container (for controls and/or disclaimers)
	if(bannerArray.length > 1 || bannerArray[0].disclaimer) {
		$("#bannerRotator").after('<div id="subBannerContainer" class="stroke lightBGgeneric"><div id="bannerDisclaimers"></div></div>');
		
		// add disclaimers
		for( i=(bannerArray.length-1); i>=0; i-- ) {
			if (bannerArray[i].linkTarget) {
				linkTarget = bannerArray[i].linkTarget;
			} else {
				linkTarget = "self";
			}

			newDisclaimer = "<div id='bannerDisclaimer"+i+"'>";
			if (bannerArray[i].linkURL) {
				newDisclaimer += '<a href="'+bannerArray[i].linkURL+'" target="_'+linkTarget+'">';
			}
			newDisclaimer += bannerArray[i].disclaimer;
			if (bannerArray[i].linkURL) {
				newDisclaimer += "</a>";
			}
			newDisclaimer += "</div>";

			$("#bannerDisclaimers").append(newDisclaimer);
		}
		
		$("#bannerDisclaimer0").show();
	}
	
	//if more than one banner, add thumbs and controls, then enable rotation
	if(bannerArray.length > 1) {
		// add controls over banners
		$("#bannerRotator").append('<a class="previousButton" href="#" onclick="cycleBanner(\'previous\'); return false;" title="Anterior"></a>' +
					   '<a class="nextButton" href="#" onclick="cycleBanner(\'next\'); return false;" title="Siguiente"></a>');
		
		
		// add control container
		$("#subBannerContainer").prepend('<div id="bannerRotatorControls"><div id="bannerName"></div></div>');
		$("#bannerRotatorControls").prepend('<a href="#" onclick="togglePlayPause(this); return false;" title="Pausa" id="playPause"><span></span></a>');
		
		// add thumbs and banner names
		for( i=(bannerArray.length-1); i>=0; i-- ) {
			newThumb = '<a id="bannerThumb'+i+'" href="#" onclick="skipToBanner('+i+'); return false;" onmouseover="$(\'#bannerName div\').hide(); $(\'#bannerName'+i+'\').show();" onmouseout="$(\'#bannerName div\').hide(); $(\'#bannerName\'+currentBanner).show();"><img src="'+bannerArray[i].thumbURL+'" width="33" height="33" alt="'+bannerArray[i].promoName+'" title="'+bannerArray[i].promoName+'" /></a>';
			$("#bannerName").before(newThumb);
			
			newBannerName = '<div id="bannerName'+i+'">'+bannerArray[i].promoName+'</div>';
			$("#bannerName").append(newBannerName);
		}
		
		bannerCount = $("#bannerRotator div.slide").size();
		currentBanner = 0;
		$("#bannerThumb"+currentBanner).addClass("selected");
		$("#bannerName"+currentBanner).show();
		$("#bannerDisclaimer"+currentBanner).show();
		bannerT = setTimeout(doBannerRotation, 5000);// 5 second rotation
		
	}
	
}

// cycles banner forward or backward by one
function cycleBanner(previousnext) {
	var goingToBanner;

	clearTimeout(bannerT);
	
	$("#playPause").attr("title","Reproducir");
	$("#playPause span").css("background-position","bottom left");
	
	// define previousBanner
	if( currentBanner === 0 ) {
		previousBanner = bannerCount - 1;
	} else {
		previousBanner = currentBanner - 1;
	}
	// define nextBanner
	if( (currentBanner+1) === bannerCount ) {
		nextBanner = 0;
	} else {
		nextBanner = currentBanner + 1;
	}
	
	// are we going forward or back?
	if(previousnext === "next") {
		goingToBanner = nextBanner;
	}
	if(previousnext === "previous") {
		goingToBanner = previousBanner;
	}
	
	// make the switch
	if(currentBanner < goingToBanner) {
		$("#bannerRotator div.slide:not([id=homepageBanner"+currentBanner+"])").hide();
		$("#homepageBanner"+goingToBanner).show();
		$("#homepageBanner"+currentBanner).fadeOut();
	} else {
		$("#homepageBanner"+goingToBanner).fadeIn();
	}
	$("#bannerDisclaimer"+currentBanner).hide();
	$("#bannerDisclaimer"+goingToBanner).fadeIn();
	$("#bannerName div").hide();
	$("#bannerName"+goingToBanner).fadeIn();
	$("#bannerRotatorControls a").removeClass("selected");
	$("#bannerThumb"+goingToBanner).addClass("selected");
	
	//after rotation, reset current
	currentBanner = goingToBanner;
}

//turn on banner rotation (crossfades at 5 second intervals)
function doBannerRotation() {
	cycleBanner("next");
	
	$("#playPause").attr("title","Pausa");
	$("#playPause span").css("background-position","top left");
	
	bannerT = setTimeout(doBannerRotation, 7500);// 7.5 second rotation
}

// function to skip straight to a banner (by index number)
function skipToBanner(num) {
	clearTimeout(bannerT);
	$("#playPause").attr("title","Reproducir");
	$("#playPause span").css("background-position","bottom left");
	
	$("#homepageBanner"+currentBanner).hide();
	$("#homepageBanner"+num).show();
	
	$("#bannerDisclaimer"+currentBanner).hide();
	$("#bannerDisclaimer"+num).show();
	
	$("#bannerName div").hide();
	$("#bannerName"+num).show();
	
	$("#bannerThumb"+currentBanner).removeClass("selected");
	$("#bannerThumb"+num).addClass("selected");
	
	currentBanner = num;
}

// toggles play puase button between states and enables/disables automatic playthrough of banners
function togglePlayPause(obj) {
	if( $(obj).attr("title") === "Pause" ) {
		clearTimeout(bannerT);
		$(obj).attr("title","Reproducir");
		$(obj).children("span").css("background-position","bottom left");
	} else {
		doBannerRotation("#bannerRotator");
		$(obj).attr("title","Pausa");
		$(obj).children("span").css("background-position","top left");
	}
}