// promo data
var promos = [
				{title:"Train a home-based carer", href:"/buy/item/31", src:"img/banner_homebasedcarer.png"},
			  	{title:"A chicken breeding programme", href:"/buy/item/17", src:"img/banner_chickenbreeding.png"},
			  	{title:"Schoolbooks, fees and a uniform", href:"/buy/item/35", src:"img/banner_schoolbooks.png"},
				{title:"Cocoa tree seedlings", href:"/buy/item/1", src:"img/banner_cocoatree.png"},
				{title:"A community garden", href:"/buy/item/10", src:"img/banner_communitygarden.png"},
				{title:"Educate a child for a year", href:"/buy/item/18", src:"img/banner_educateachild.png"},
				{title:"A goat breeding programme", href:"/buy/item/4", src:"img/banner_goatbreeding.png"},
				{title:"Mosquito nets for a family of five", href:"/buy/item/30", src:"img/banner_mosquitonet.png"},
				{title:"A volunteer teacher", href:"/buy/item/36", src:"img/banner_volunteerteacher.png"}
			  ];

// new slide timeout duration (ms)
var promosTimeoutDuration = 5000;

// initial promo ID
var promoID = 1;

var newSlideImg;
var promosTimeout;
var visitedPromos = [];

function initPromos(){
	preloadPromos();
	setNavLayer();
	setInitialPromo();
	setPromosTimeout();
}

function preloadPromos(){
	var images = [];
	for(var i = 0, len = promos.length; i < len; i++){
		var img = new Image();
		img.src = promos[i].src;
		images.push(img);
	}
}

function setNavLayer(){
	$("#promos").append("<div id='promosNav' style='z-index:2;position:absolute;top:10px;right:10px'></div>");
	
	for(var i = promos.length; i > 0; i--){
		$("#promosNav").append("<div id='promo" + i + "nav' style='z-index:" + i + ";position:absolute;right:" + (24*(promos.length - i)) + "px;width:20px;height:20px' ></div>");
		var navBtn = $("#promo" + i + "nav");
		$(navBtn).append("<img class='promosNavSdw' src='img/promos_nav_sdw.png' style='position:absolute;top:-3px;left:-5px' />");
		$(navBtn).append("<div id='promo" + i + "navOvr' class='promosNavOvr' style='position:absolute;z-index:1;width:20px;height:20px;background-color:#7a6a5d'></div>");
		$(navBtn).append("<img id='promo" + i + "navLabel' src='img/n" + i + ".gif' art='" + i + "' style='z-index:2;position:absolute' />");
		$("#promo" + i + "navLabel").load(centre);
		$(navBtn).append("<img id='promo" + i + "navBtn' src='img/sp.gif' style='position:absolute;z-index:3;width:20px;height:20px' />");
		$("#promo" + i + "navBtn").hover(navBtnRollover, navBtnRollout).click(navBtnClick);
	}
	PNGFix.fix(".promosNavSdw");
	$(".promosNavOvr").hide();
}

function centre(){
	$(this).css("left", Math.floor(($(this).parent().width() - $(this).width())/2) + "px").css("top", Math.floor(($(this).parent().height() - $(this).height())/2) + "px");	
}

function setInitialPromo(){
	setCurrentPromo();
	selectNavBtn();
}

function selectNavBtn(){
	for(var i = promos.length; i > 0; i--){
		if(i != promoID){
			$("#promo" + i + "navOvr").hide();
			$("#promo" + i + "navLabel").attr("src", "img/n" + i + ".gif");
		}
	}
	$("#promo" + promoID + "navOvr").show();
	$("#promo" + promoID + "navLabel").attr("src", "img/n" + promoID + "_ovr.gif");
}

function navBtnRollover(){
	var id = parseInt($(this).attr("id").substr(5));
	if(id != promoID){
		$("#promo" + id + "navLabel").hide().attr("src", "img/n" + id + "_ovr.gif").fadeIn("slow");
		$("#promo" + id + "navOvr").fadeIn("fast");
		$(this).css("cursor", "pointer");
	}
}

function navBtnRollout(){
	var id = parseInt($(this).attr("id").substr(5));
	if(id != promoID){
		$("#promo" + id + "navLabel").hide().attr("src", "img/n" + id + ".gif").fadeIn("slow");
		$("#promo" + id + "navOvr").fadeOut("fast");
		$(this).css("cursor", "auto");
	}
}

function navBtnClick(){
	var id = parseInt($(this).attr("id").substr(5));
	setPromo(id);
}

function setPromo(id){
	clearPromosTimeout();
	promoID = id;
	selectNavBtn();
	if($("#newSlide").length > 0) $("#newSlide").remove();
	$("#promos").append("<div id='newSlide' style='position:absolute;z-index:1;width:622px;height:276px;top:0px;left:0px'></div>");
	$("#newSlide").append("<img id='loader' src='img/loader.gif' style='position:absolute'/>");
	$("#loader").load(centre);
	newSlideImg = new Image();
	if (visitedPromos.join().indexOf(String(promoID)) < 0){
		$(newSlideImg).attr("src", promos[promoID - 1].src).load(slide);
	} else {
		slide();
	}
	setPromosTimeout();
}

function slide(){
	if(visitedPromos.join().indexOf(String(promoID)) < 0) visitedPromos.push(promoID);
	$("#loader").remove();
	$("#newSlide").append("<img id='newSlideImg' />");
	$("#newSlideImg").attr("src", promos[promoID - 1].src);
	$("#newSlide").css("left", "622px").animate({left: 0}, "slow", "swing", bakeNewSlide);
	newSlideImg = null;
}

function bakeNewSlide(){
	setCurrentPromo();
	$("#newSlide").remove();
}

function setCurrentPromo(){
	$("#promos > a").attr("href", promos[promoID - 1].href).attr("title", promos[promoID - 1].title);
	$("#promos > a > img").attr("src", promos[promoID - 1].src).attr("alt", promos[promoID - 1].title);
}

function setPromosTimeout(){
	promosTimeout = window.setTimeout(nextSlide, promosTimeoutDuration);
	$(window).unload(clearPromosTimeout);
}

function clearPromosTimeout(){
	window.clearTimeout(promosTimeout);
}

function nextSlide(){
	if(++promoID > promos.length) promoID = 1;
	setPromo(promoID);
}