dojo.require("dojo.fx");
dojo.require("dojo.html");
dojo.require("dojo.cookie");
dojo.require("dojo._base.json");
function HeroGraphicController(arr) {
	this.section = location.href.split("#");
	this.current = (this.section.length > 1 && new RegExp(/^[1-4]$/).test(this.section[1])) ? parseInt(this.section[1]) - 1 : 0;
	this.data = arr;
	this.hotspots = [];
	this.duration = 500;
	this.env = TE_getHomePageURL();
	this.cookie = {
		'name' : 'MarqueeConfig',
		'value' : {
			'sequence' : [],
			'selected' : 0
		}
	};
		
	if(new RegExp(/-dev/g).test(this.env)) {
		this.cookie.name += "Dev";
	} else if(new RegExp(/-qa/g).test(this.env)) {
		this.cookie.name += "Qa";
	} else {
		this.cookie.name += "Prod";
	}
		
	if(!dojo.cookie(this.cookie.name)) {
		dojo.forEach(this.data, function(o, i) {
			this.cookie.value.sequence.push(o.id);
		}, this);
		this.updateCookie(this.current);
	} else {
		var order = [];
		this.cookie.value = dojo.fromJson(dojo.cookie(this.cookie.name));
		dojo.forEach(this.cookie.value.sequence, function(o) {
			dojo.forEach(this.data, function(o2) {
				if(o == o2.id) {
					order.push(o2);
				}
			}, this);
		}, this);
		this.data = order;
		order = null;
	}
		
	// Create, Append, & Fill In the Hero Graphic Message
	this.heroBackground = dojo.byId('te-heroBackground');
	this.heroContent = dojo.byId('te-heroContent');
	this.heroText = newNode('div', { 'id' : 'te-heroText' });
	this.heroH3 = this.heroText.appendChild(newNode('h3'));
	this.heroP = this.heroText.appendChild(newNode('p'));
	this.heroA = newNode('a', { 'className' : 'te-btn te-orange-btn' });
	this.heroS = newNode('span');
	this.heroB = newNode('b');
	this.heroS.appendChild(this.heroB);
	this.heroA.appendChild(this.heroS);
	this.heroText.appendChild(this.heroA);
	this.heroContent.appendChild(this.heroText);
	this.updateContent();
		
	// Create & Append the Hero Graphic Controls
	this.controls = newNode("span", { "id" : "te-heroControl" });
	var span2 = newNode("span");
	var span3 = newNode("span");
	var ul = newNode("ul");
	dojo.forEach(this.data, function(o, i) {
		var li = newNode("li");
		//var obj = { "href" : "javascript:void(0);", "text" : i + 1, "title" : i + 1 };
		var obj = { "href" : "javascript:void(0);", "text" : i + 1, "title" : this.data[i].message.alt };
		if(i === this.current) {
			obj["className"] = "selected";
		}
		var a = newNode("a", obj);
		dojo.connect(a, "onclick", this, function(e) {
			this.updateCookie(i);
			this.updateMarquee(i);
			dojo.back.addToHistory({
				'changeUrl' : i + 1,
				'back' : dojo.hitch(this, function() {
					this.updateMarquee(i);
				})
			});
			dojo.stopEvent(e);
		});
		li.appendChild(a);
		ul.appendChild(li);
		li = null;
	}, this);
	span3.appendChild(ul);
	span3.appendChild(newNode("div", { "className" : "clear-div" }));
	span2.appendChild(span3);
	this.controls.appendChild(span2);
	this.heroContent.appendChild(this.controls);
	span2 = span3 = ul = a = null;
		
	// Hide the controls
	dojo.style(this.controls, {
		"opacity" : 0,
		"display" : "block"
	});
		
	this.controlsA = dojo.query("a", this.controls);
		
	// Create, Append, & Assign Events to the Hot Spots & Hotspot Overlays
	this.createHotspots();
		
	// fadeIn the controls & the hotspots
	var fadeInArr = [];
	fadeInArr[fadeInArr.length] = dojo.fadeIn({
		"node" : this.controls,
		"duration" : this.duration
	});
	dojo.forEach(this.hotspots, function(o) {
		fadeInArr[fadeInArr.length] = dojo.fadeIn({
			"node" : o[0],
			"duration" : this.duration
		});
	}, this);
		
	// Display the controls & hotspots
	dojo.fx.combine(fadeInArr).play();
}
HeroGraphicController.prototype.updateCookie = function(ind) {
	this.cookie.value.selected = ind;
	dojo.cookie(this.cookie.name, dojo.toJson(this.cookie.value), { "domain" : ".tycoelectronics.com"});
};
HeroGraphicController.prototype.updateContent = function() {
	this.heroText.title = this.data[this.current].message.title.replace("<BR />", " ").replace("<br />", " ");
	dojo.style(this.heroText, {
		"top" : this.data[this.current].message.top + "px"
	});
	this.heroH3.innerHTML = this.data[this.current].message.title;
	this.heroP.innerHTML = this.data[this.current].message.body;
	this.heroA.href = this.data[this.current].message.button.href;
	this.heroA.title = this.data[this.current].message.button.text;
	this.heroB.innerHTML = this.data[this.current].message.button.text;
		
	this.heroText.className = (this.data[this.current].message.orientation == "left") ? "te-hero-text-left" : "te-hero-text-right";
		
	dojo.style(this.heroBackground, {
		"backgroundImage" : "url(" + this.data[this.current].message.image + ")"
	});
	this.heroContent.title = this.data[this.current].message.alt;
}
HeroGraphicController.prototype.updateMarquee = function(ind) {
	if(this.current !== ind) {
		this.current = ind;
			
		var hotspotFadeArr = [];
		dojo.forEach(this.hotspots, function(o) {
			hotspotFadeArr[hotspotFadeArr.length] = dojo.fadeOut({
				"node" : o[0],
				"duration" : this.duration
			});
		}, this);
		hotspotFadeArr[hotspotFadeArr.length] = dojo.fadeOut({
			"node" : this.controls,
			"duration" : this.duration
		});
			
		dojo.fx.chain([
			dojo.fx.combine(hotspotFadeArr),
			dojo.fadeOut({
				"node" : this.heroText,
				"duration" : this.duration
			}),
			dojo.fadeOut({
				"node" : this.heroBackground,
				"duration" : this.duration,
				"onEnd" : dojo.hitch(this, function() {
						
					this.destroyHotspots();
					this.createHotspots();
					this.updateContent();
						
					// loop through controls and add/remove active class names accordingly
					this.controlsA.forEach(function(o, i) {
						if(i === this.current) {
							dojo.addClass(o, "selected");
						} else {
							dojo.removeClass(o, "selected");
						}
					}, this);
						
					var newHotspotFadeArr = [];
					dojo.forEach(this.hotspots, function(o) {
						newHotspotFadeArr[newHotspotFadeArr.length] = dojo.fadeIn({ "node" : o[0], "duration" : this.duration });
					}, this);
					newHotspotFadeArr[newHotspotFadeArr.length] = dojo.fadeIn({ "node" : this.controls, "duration" : this.duration });
						
					dojo.fx.chain([
						dojo.fadeIn({ "node" : this.heroBackground, "duration" : this.duration }),
						dojo.fadeIn({ "node" : this.heroText, "duration" : this.duration }),
						dojo.fx.combine(newHotspotFadeArr)
					]).play();
						
				})
			})
		]).play();
	}
};
HeroGraphicController.prototype.destroyHotspots = function() {
	dojo.forEach(this.hotspots, dojo.hitch(this, function(o) {
		for(var i = 0; i < 2; i++) {
			o[i] = this.heroContent.removeChild(o[i]);
			o[i] = null;
		}
	}));
	this.hotspots = [];
};
HeroGraphicController.prototype.createHotspots = function() {
	dojo.forEach(this.data[this.current].hotspots, dojo.hitch(this, function(o) {
		this.hotspots[this.hotspots.length] = [];
			
		// Create the hotspot
		this.hotspots[this.hotspots.length - 1][0] = newNode("div", { "className" : "te-hero-hs" });
		dojo.style(this.hotspots[this.hotspots.length - 1][0], {
			"left" : o.coords[0] + "px",
			"top" : o.coords[1] + "px"
		});
		if(dojo.isIE < 8) {
			this.hotspots[this.hotspots.length - 1][0].appendChild(newNode("div", { "className" : "circle-border" }));
			this.hotspots[this.hotspots.length - 1][0].appendChild(newNode("div", { "className" : "circle-inner" }));
		}
			
		// Create the hotspot overlay
		this.hotspots[this.hotspots.length - 1][1] = newNode("div", {
			"className" : "te-hero-hs-overlay",
			"title" : o.overlay.title
		});
		dojo.addClass(this.hotspots[this.hotspots.length - 1][1], (o.overlay.image.orientation == "left") ? "te-hero-hs-overlay-left" : "te-hero-hs-overlay-right");
		dojo.style(this.hotspots[this.hotspots.length - 1][1], {
			"left" : o.overlay.coords[0] + "px",
			"top" : o.overlay.coords[1] + "px"
		});
		var div2 = newNode("div");
		var div3 = newNode("div");
		var a1 = newNode("a", {
			"href" : o.overlay.button.href,
			"className" : "te-btn te-orange-btn",
			"title" : o.overlay.button.text
		});
		var a2 = newNode("span");
		a2.appendChild(newNode("b", { "text" : o.overlay.button.text }));
		a1.appendChild(a2);
		div3.appendChild(newNode("h4", { "innerHTML" : o.overlay.title }));
		div3.appendChild(newNode("p", { "text" : o.overlay.body }));
		div3.appendChild(a1);
		div2.appendChild(div3);
		if(dojo.isIE < 8) {
			div2.appendChild(newNode("div", { "className" : "te-hero-hs-bg-fix" }));
		}
		this.hotspots[this.hotspots.length - 1][1].appendChild(div2);
		this.hotspots[this.hotspots.length - 1][1].appendChild(newNode("img", {
			"src" : dojo.isIE < 7 ? o.overlay.image.file.substr(0, o.overlay.image.file.length - 4) + "IE6" + o.overlay.image.file.substr(o.overlay.image.file.length - 4, o.overlay.image.file.length) : o.overlay.image.file,
			"alt" : o.overlay.title
		}));
			
		// Append the hotspot & hotspot overlay
		this.heroContent.appendChild(this.hotspots[this.hotspots.length - 1][0]);
		this.heroContent.appendChild(this.hotspots[this.hotspots.length - 1][1]);
			
		// Assign Events
		new HotSpotControl({
			"overlay" : this.hotspots[this.hotspots.length - 1][1],
			"hotspot" : this.hotspots[this.hotspots.length - 1][0]
		});
			
		dojo.style(this.hotspots[this.hotspots.length - 1][0], {
			"opacity" : 0,
			"display" : "block"
		});
			
		// Cleanup
		div2 = div3 = a1 = a2 = null;
	}));
};
// Controls the showing & hiding of the hostspot content divs
function HotSpotControl(cfg) {
	this.overlay = dojo.byId(cfg.overlay);
	this.hotspot = dojo.byId(cfg.hotspot);
	this.show = false;
	this.isIE6 = dojo.isIE <= 7;
	this.IE6Fixed = false;
	this.delay = 1000;
	dojo.connect(this.hotspot, "onmouseover", this, this.showOverlay);
	dojo.connect(this.hotspot, "onmouseout", this, this.hideOverlay);
	dojo.connect(this.overlay, "onmouseover", this, function(e) { this.show = true; });
	dojo.connect(this.overlay, "onmouseout", this, this.hideOverlay);
};
HotSpotControl.prototype.showOverlay = function(e) {
	this.show = true;
	setTimeout(dojo.hitch(this, function() {
		dojo.style(this.overlay, { "display" : "block" });
		if(this.isIE6 && !this.IE6Fixed) {
			dojo.query(".te-hero-hs-bg-fix", this.overlay).forEach(function(o) {
				var n = o.parentNode;
				dojo.style(o, {
					"height" : n.offsetHeight - 22 + "px",
					"width" : n.offsetWidth - 22 + "px"
				});
			});
			this.IE6Fixed = true;
		}
	}), this.delay);
};
HotSpotControl.prototype.hideOverlay = function(e) {
	this.show = false;
	setTimeout(dojo.hitch(this, function() {
		if(!this.show & !this.resetTimeout) {
				dojo.style(this.overlay, { "display" : "none" });
				this.resetTimeout = false;
		}
	}), this.delay);
};
function newNode(type, attr) {
	if(type != "img") {
		var x = document.createElement(type);
	} else {
		var x = new Image();
	}
	for(var i in attr) {
		if(i == "text") {
			x.appendChild(document.createTextNode(attr[i]));
		} else if(i == "innerHTML") {
			x.innerHTML = attr[i];
		} else {
			x[i] = attr[i];
		}
	}
	return x;
}
dojo.addOnLoad(function() {
	var container = dojo.byId("te-hpContent");
	new ForceConsistentHeight({
		"nodes" : dojo.query(".te-hp-section-content-inner", container)
	});
	new ForceConsistentHeight({
		"nodes" : dojo.query(".te-hp-section-content", container)
	});
});