var steps = 200;
function navHandler() {
	var className = this.className;

}
function setBackgroundPos(el, start, end, ratio, unitsX, unitsY) {
	if(el && el.style) {
		var startX = start[0];
		var startY = start[1];
		var endX   = end[0];
		var endY   = end[1];
		var curX = startX;
		var curY = endY;
		var unitXStr = unitsX || "px";
		var unitYStr = unitsY || "px";
		if(startX != endX) {
			curX = parseInt(startX + ((endX - startX) * (ratio)));
		}
		if(startY != endY) {
			curY = parseInt(startY + ((endY - startY) * (ratio)));
		}
		var styleStr = "" + curX + unitXStr + " " + curY + unitYStr;
		// safelog(styleStr);
		jq(el).css('background-position', styleStr);
	}
}

function ShowcaseController(el, setAr, navAr) {
	this.mainEl = el;
	this.setAr = setAr;
	this.navAr = navAr;
	this.oldItem = 0;
	this.currentItem = null;
	this.animSet = [];
	this.bgAnims = [];
	this.navController = null;
	this.autoRotate    = 0;
	this.state         = true;

	
}

function stepBg(type, args) {
	cont.navController.nextStep(args[0].currentFrame)
}
function setCurrent() { cont.navController.setCurrentClass(); }
function unsetCurrent() { cont.navController.unsetCurrentClass(); }

function autorotate() {
	if(this.state && this.autoRotate){ this.fadeIn( ((this.currentItem + 1 >= this.animSet.length) ? 0 : this.currentItem + 1), true); }
	else { this.state = true; }
}

function startAutoRotate() {
	this.state = true;
	this.autoRotate = window.setInterval(function() { cont.rotate() }, 5 * 1000);
	safelog("started auto rotate");
}

function initFades() {
	for(var x=0; x<this.setAr.length; x++) {
		var tagline = YAHOO.util.Dom.getElementsByClassName("tagline", "div", this.setAr[x])[0];
		this.animSet[x] = new YAHOO.util.Anim(this.setAr[x], { opacity: { to: 1, from: 0  }}, 0.500);
		this.animSet[x].onTween.subscribe(stepBg);
		this.animSet[x].onComplete.subscribe(setCurrent);
		this.animSet[x].onStart.subscribe(unsetCurrent);
	}
	var links = jq('#show-nav').get(0).getElementsByTagName("a");
	if(links) {
		YAHOO.util.Event.addListener(links, "click", function(e) { YAHOO.util.Event.preventDefault(e) });
	}
	createFrame();
	this.startAutoRotate();
}

function fadeIn(idx, auto) {
	if(idx != this.currentItem) {
		if(this.currentItem == null) { this.currentItem = idx; }
		var isAuto = auto || false;
		this.state = isAuto;
		safelog("autoplay: " + this.state)
		YAHOO.util.Dom.setStyle(this.setAr[idx], "opacity", "0");
		for(var x=0; x<this.setAr.length; x++) {
			if(this.setAr[x] && this.setAr[x].style) {
				this.setAr[x].style.zIndex = (x == idx) ? "100" : x+1;
			}
		}
		this.setAr[idx].style.zIndex = "100";
		this.setAr[this.currentItem].style.zIndex = "10";
		this.animSet[idx].animate();
		this.oldItem = this.currentItem;
		this.currentItem = idx;
		this.navController.synchronize(this);
		this.navController.transition(this.currentItem);
		if(!isAuto) { this.stopAutoRotate(); }
		// safelog("idx: " + idx + ", oldItem: " + this.oldItem + ", currentItem:" + this.currentItem);
	}	
}

function stopAutoRotate() {
	window.clearInterval(this.autoRotate);
	this.autoRotate = 0;
	safelog("stopped auto rotate");
}

function initTriggers() {

}
ShowcaseController.prototype = {
	initFades: initFades,
	fadeIn: fadeIn,
	rotate: autorotate,
	startAutoRotate: startAutoRotate,
	stopAutoRotate: stopAutoRotate
}

function pageload() {
	try {
		window.cont = new ShowcaseController(jq('#spotlight').get(0), jq('#spotlight div.spotlight-set').get(), jq('#show-nav li').get());
		cont.initFades();
		cont.navController = new BgController(cont.navAr);
		cont.fadeIn(0, true);
		jq("#spotlight").mouseover(window.cont.stopAutoRotate).mouseout(window.cont.startAutoRotate);
	}
	catch(e) {
		var retries = 1 + ((window.loadRetries) ? window.loadRetries : 0);
		if(retries < 5) {
			window.setTimeout(pageload, 100);
		}
		safelog("Retrying: " + retries + " error:" + e);
		window.loadRetries = retries;
	}
}

pageLoadFuncs.push(function() {
	pageload();
});

function BgController(bgEls) {
	this.state     = true;
	this.bgEls = bgEls || [];
	this.currentEl = 0;
	this.targetEl  = 0;
	this.modEls    = [];
	this.finalized = [];
	this.dir       = 0;
	this.steps     = 200;
	this.curStep   = 0;
	this.stepsPerUnit = this.steps;
	this.activeOut = 0;
	this.activeIn  = 0;
	this.bgStart   = [100, 0];
	this.bgEnd     = [100, 60];
	this.bgUnits   = ["%", "px"];
	this.synchronize = function(master) {
		this.currentEl = master.oldItem;
		this.targetEl  = master.currentItem;
		this.steps     = master.animSet[master.currentItem].totalFrames;
		this.curStep   = master.animSet[master.currentItem].currentFrame;
	}
	this.transition = function(toEl) {
		this.targetEl = toEl;
		if(this.targetEl >= this.currentEl) { //moving downward
			this.dir = 0;
		}
		else { // moving upward
			this.dir = 1;
		}
		this.modEls    = [];
		this.finalized = [];
		// safelog("Current: " + this.currentEl);
		// safelog("Target: " + this.targetEl);
		var xEl = this.currentEl;
		while (xEl!=this.targetEl) {
			// safelog("xEl: " + xEl);
			this.modEls.push(xEl);
			if(this.dir) { xEl-- }
			else { xEl++; }
		}
		this.modEls.push(xEl);
		this.stepsPerUnit = (this.modEls.length > 1) ? this.steps/(this.modEls.length - 1) : this.steps;
		// safelog(this.modEls.join(", "));
		// safelog("Steps per unit:" + this.stepsPerUnit);

	}

	this.nextStep = function(step) {
		var curRatio = step/this.stepsPerUnit;
		var goIn = Math.ceil(curRatio);
		var goOut = goIn - 1;
		if(goIn == this.modEls.length) {
			goIn = this.modEls.length -1;
		}
		if(goOut >= 1) { this.reset(this.modEls[goOut - 1]) }
		curRatio -= goOut;
		curRatio *= (this.dir) ? -1 : 1;

		this.activeIn = this.bgEls[this.modEls[goIn]];
		this.activeOut = this.bgEls[this.modEls[goOut]];

		setBackgroundPos(this.activeIn, this.bgStart, this.bgEnd, curRatio, this.bgUnits[0], this.bgUnits[1]);
		if(this.activeOut && goIn != goOut) {
			setBackgroundPos(this.activeOut, this.bgStart, this.bgEnd, 1+curRatio, this.bgUnits[0], this.bgUnits[1]);
		}

	}

	this.reset = function(idx, force) {
		if(!this.finalized[idx] || force) {
			setBackgroundPos(this.bgEls[idx], this.bgStart, this.bgEnd, 0, this.bgUnits[0], this.bgUnits[1]);
			this.finalized[idx] = true;
		}
	}

	this.setCurrentClass = function() {
		var bgElLim = this.bgEls.length;
		for(var x=0; x<bgElLim; x++) {
			if(x == this.targetEl) { jq(this.bgEls[x]).addClass("active"); }
			else { 
				jq(this.bgEls[x]).removeClass("active");
				this.reset(x, true);
			}
		}
	}
	this.unsetCurrentClass = function() {
		var bgElLim = this.bgEls.length;
		for(var x=0; x<bgElLim; x++) {
			//this.reset(x, true);
			jq(this.bgEls[x]).removeClass("active");
		}
	}

}

function createFrame() {
	var frameHolder = jq('#spotlight').get(0);
	var na = new NodeAssembly(frameHolder);
	for(var x=0; x<5; x++) {
		na.createEl("div", { "id": "spotlight-frame-" + (x+1) });
	}
	na.insertIn();
}