dojo.require("dojo.fx");

var lastPanel = null, lastPanelTime = 0, waitTime = 5500, mouseX = 0, mouseY = 0, activePanel = false, userInitiated = false, animRate = 50, animDuration = 350;

function now() {
	var d = new Date();
	return d.getTime();
}

function revealPanel(panelID, isUserInitiated){
	var animNull = dojo.animateProperty({ node: dojo.byId('featuredContent'), duration: 0}), properties1, properties1a, 
		anim1 = animNull,
		anim1a = animNull,
		anim2 = animNull,
		anim2a = animNull,
		anim3 = animNull,
		anim3a = animNull;
	properties1 = {
		width: { end: '89', unit:"px" }
	};
	properties1a = {
        opacity: { end: '0.0' },
	    marginLeft: { end: '-193', unit:"px" }
    };
	userInitiated = isUserInitiated;
	activePanel = true;
	lastPanel = panelID;
	lastPanelTime = now();
	if(panelID != "panel1") {
		anim1 = dojo.animateProperty({ node: dojo.byId('panel1'), duration:animDuration, rate:animRate, properties: properties1 });
		anim1a = dojo.animateProperty({ node: dojo.query('#panel1 img')[0], duration:animDuration, rate:animRate, properties: properties1a });
	}
	if(panelID != "panel2") {
		anim2 = dojo.animateProperty({ node: dojo.byId('panel2'), duration:animDuration, rate:animRate, properties: properties1 });
		anim2a = dojo.animateProperty({ node: dojo.query('#panel2 img')[0], duration:animDuration, rate:animRate, properties: properties1a });
	}
	if(panelID != "panel3") {
		anim3 = dojo.animateProperty({ node: dojo.byId('panel3'), duration:animDuration, rate:animRate, properties: properties1 });
		anim3a = dojo.animateProperty({ node: dojo.query('#panel3 img')[0], duration:animDuration, rate:animRate, properties: properties1a });
	}
	var anim4 = dojo.animateProperty({ node: dojo.byId(panelID), duration:animDuration, rate:animRate,
	    properties: {
	        width: { end: '400', unit:"px" }
	    }
	
	});
	var anim4a = dojo.animateProperty({ node: dojo.query('img', dojo.byId(panelID))[0], duration:animDuration, rate:animRate,
	    properties: {
	        opacity: { end: '1.0' },
		    marginLeft: { end: '0', unit:"px" }
	    }
	});
	
    // and play them at the same moment
    dojo.fx.combine([anim1, anim1a, anim2, anim2a, anim3, anim3a, anim4, anim4a]).play();
}

function resetPanels(forceReset) {
	if((activePanel && userInitiated) || forceReset){
		var animDuration = 350;
		var anim1 = dojo.animateProperty({ node: dojo.byId('panel1'), duration:animDuration,
		    properties: {
		        width: { end: '193', unit:"px" }
		    }
		});
		var anim1a = dojo.animateProperty({ node: dojo.query('#panel1 img')[0], duration:animDuration, rate:animRate,
		    properties: {
		        opacity: { end: '0.0' },
			    marginLeft: { end: '-193', unit:"px" }
		    }
		});
		var anim2 = dojo.animateProperty({ node: dojo.byId('panel2'), duration:animDuration,
		    properties: {
		        width: { end: '192', unit:"px" }
		    }
		});
		var anim2a = dojo.animateProperty({ node: dojo.query('#panel2 img')[0], duration:animDuration, rate:animRate,
		    properties: {
		        opacity: { end: '0.0' },
			    marginLeft: { end: '-193', unit:"px" }
		    }
		});
		var anim3 = dojo.animateProperty({ node: dojo.byId('panel3'), duration:animDuration,
		    properties: {
		        width: { end: '193', unit:"px" }
		    }
		});
		var anim3a = dojo.animateProperty({ node: dojo.query('#panel3 img')[0], duration:animDuration, rate:animRate,
		    properties: {
		        opacity: { end: '0.0' },
			    marginLeft: { end: '-193', unit:"px" }
		    }
		});
		lastPanel = null;
		lastPanelTime = now();
		activePanel = false;
	    dojo.fx.combine([anim1, anim1a, anim2, anim2a, anim3, anim3a]).play();
	}
}	

function showNextPanel(forceShow) {
	if((now() + 10 - lastPanelTime) > waitTime || forceShow) {
		var coords = dojo.coords(dojo.byId("featuredContent"), true);
		var mouseInX = (mouseX > coords.x && mouseX < (coords.x + coords.w));
		var mouseInY = (mouseY > coords.y && mouseY < (coords.y + coords.h));
		var mouseOverPanels = (mouseInX && mouseInY);
		if(!mouseOverPanels) {
			switch(lastPanel) {
				case "panel1":
					revealPanel("panel2", false);
					break;
				case "panel2":
					revealPanel("panel3", false);
					break;
				case "panel3":
					revealPanel("panel1", false);
					// resetPanels(true);
					break;
				default:
					revealPanel("panel1", false);
					break;
			}
		} else {
			// console.log("mouseOverPanels == true");
		}
	} else {
		// var t = now();
		// console.log("not long enough - only " + (t - lastPanelTime) + " has passed, needs to be " + waitTime);
	}
}	
	
function getMouseMovePos(evt) {
	mouseX = evt.clientX;
	mouseY = evt.clientY;
}

function init(){	
	dojo.connect(document.body, 'onmousemove', getMouseMovePos);
	dojo.connect(dojo.byId('panel1'), 'onmouseover', function(){ revealPanel("panel1", true); });
	dojo.connect(dojo.byId('panel2'), 'onmouseover', function(){ revealPanel("panel2", true); });
	dojo.connect(dojo.byId('panel3'), 'onmouseover', function(){ revealPanel("panel3", true); });
	dojo.style(dojo.byId('featuredContentContainer'), "display", "block");
	
	lastPanelTime = now();
	setInterval(showNextPanel, waitTime);
	showNextPanel(true);
}

dojo.addOnLoad(init);