var last_section = "Solution";
var new_section;
var busy = false;
var newcolor;
var feature_timer;

Event.observe(window,"load",function() {
	Shadowbox.init();

	Prototype.Browser.IE6=Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5))==6;

	// Homepage feature navigation
	$$("#feature_navigation a").invoke("observe","click",function(ev) {
		ev.stop();
		clearInterval(feature_timer);
		activateFeature(this);
	});
	
	feature_timer = setInterval("autoNextFeature();",7000);

	// Homepage feature navigation highlighting action!
	$$("#feature_navigation > ol > li > a").invoke("observe","mouseenter",function(ev) {
		if (this.hasClassName("active"))
			return;
			
		if (this.effect) {
			this.effect.effects[0].cancel();
			this.effect.effects[1].cancel();
		}
						
		acolor = this.readAttribute("href");
		this.effect = new Effect.Parallel([
			new Effect.Morph(this, { style: "background-color: " + acolor}),
			new Effect.Morph(this.down("span"), { style: "color: #FFF" })
			], { duration: 0.3, afterFinish: function(ev) {
				ev.effects[0].element.removeClassName("busy");
			}
		});
	});
	$$("#feature_navigation > ol > li > a").invoke("observe","mouseleave",function(ev) {
		if (this.hasClassName("active"))
			return;

		if (this.effect) {
			this.effect.effects[0].cancel();
			this.effect.effects[1].cancel();
		}
			
		acolor = this.readAttribute("href");
		this.effect = new Effect.Parallel([
			new Effect.Morph(this, { style: "background-color: #1D1D1D" }),
			new Effect.Morph(this.down("span"), { style: "color: " + acolor })
			], { duration: 0.3, afterFinish: function(ev) {
				ev.effects[0].element.removeClassName("busy");
			}
		});
	});

	// Handle Swapping of Sections in Portfolio
	$$(".project_info .nav a").invoke("observe","click",function(ev) {
		if (this.target != "_blank") {
			ev.stop();
			if (!busy && !this.hasClassName("sel")) {
				$$(".project_info a.sel")[0].removeClassName("sel");
				this.addClassName("sel");
				new_section = this.readAttribute("href").substr(1);
				busy = true;

				height = $("project_content").getHeight();
				$("project_content").setStyle({ height: height + "px" });
				new Effect.Fade(last_section, { duration: 0.3, afterFinish: function() {
					$(new_section).show();
					height = $(new_section).getHeight() + 25;
					$(new_section).hide();
					new Effect.Morph("project_content", { duration: 0.3, style: "height: " + height + "px", afterFinish: function() {
						new Effect.Appear(new_section, { duration: 0.3 });
						last_section = new_section;
						busy = false;
					}});
				}});
			}
		}
	});

	// Handle swapping of images in the Portfolio
	$$(".project_info .images a").invoke("observe","click",function(ev) {
		ev.stop();
		if (busy)
			return;
		busy = true;

		$$(".project_info .images a.selected")[0].removeClassName("selected");
		this.addClassName("selected");
		$("project_image").down("img").setStyle({ position: "absolute" });

		el = new Element("img", { src: this.getAttribute("href"), style: "display: none;" });
		$("project_image").down("img").insert({ after: el });

		newheight = this.getAttribute("name");
		if (newheight < $("project_image").getHeight()) {
			new Effect.Fade($("project_image").down("img"), { duration: 0.6 });
			new Effect.Appear($("project_image").down("img",1), { duration: 0.6, afterFinish: function() {
				$("project_image").down("img").remove();
				new Effect.Morph("project_image", { duration: 0.3, style: "height: " + newheight + "px", afterFinish: function() { busy = false; } });
			}});
		} else {
			new Effect.Morph("project_image", { duration: 0.3, style: "height: " + newheight + "px", afterFinish: function() {
				new Effect.Fade($("project_image").down("img"), { duration: 0.6 });
				new Effect.Appear($("project_image").down("img",1), { duration: 0.6, afterFinish: function() {
					$("project_image").down("img").remove();
					busy = false;
				}});
			}});
		}

	});

	//changed this function, would not add function to reloaded link, this way only the image and caption change, link retains functionality
	$$(".image_callout a.refresh").invoke("observe","click", function (ev) {
		ev.stop();
		$("momentImg").setStyle( { height : (parseInt($("old").getHeight())+24) + "px" } );
		$("old").setStyle({ zIndex: "0" });
		new Ajax.Request("http://www.fastspot.com/modules/get-history.php", { onComplete: function(t) {
			text = t.responseText.split(":");
			image = new Element("img", { id: "new", style: "display: none" });
			image.onload = function() {
				$("old").insert({ after: image });
				h = parseInt($("new").getHeight()) + 24;
				new Effect.Fade("old", { duration: 0.3, afterFinish: function() {
					new Effect.Morph($("momentImg"), { duration: 0.3, style: "height: " + h + "px", afterFinish: function() {
						$("old").remove();
						$("new").setStyle( { top: "0px", height: h + "px" });
						new Effect.Appear("new", { duration: 0.3, afterFinish: function() { busy = false; }});
						$("new").id = "old";
						$("momentCaption").innerHTML = text[1];
					}});
				}});
			};
			image.src = "http://www.fastspot.com/images/history/" + text[0];
		}});
	});

	$$(".person a.more").invoke("observe","click", function(ev) {
		ev.stop();
		person = this.up(".person");
		img = person.down("img");
		x = 1;
		if (Prototype.Browser.IE6)
			c = 150;
		else
			c = 10;
		while (img.next(x)) {
			c += img.next(x).getHeight();
			x++;
		}

		new Effect.Morph(person, { style: "height: " + c + "px;", duration: 0.5 });
		this.up(".person").addClassName("person_active");
		new Effect.Fade(this, { duration: 0.5 });
	});

	$$(".person a.close").invoke("observe","click", function(ev) {
		ev.stop();
		new Effect.Morph(this.up(".person"), { style: "height: 132px;", duration: 0.5 });
		this.up(".person").removeClassName("person_active");
		new Effect.Appear(this.up(".person").down(".more"), { duration: 0.5 });
	});
	
	// Make the whole App boxes clickable.
	$$(".app").invoke("observe","click",function(ev) {
		if (ev.target.tagName.toLowerCase() != 'a')
		{
		  //document.location.href = this.down("a").readAttribute("href");
		  window.open(this.down("a").readAttribute("href"), '_blank');
		}
	});

});

function activateFeature(element) {
	if (!busy && !element.hasClassName("active")) {
	    busy = true;
	    
	    active = $$("#feature_navigation a.active")[0];
	    element.addClassName("active");			

	    i = $$("#feature_navigation a").indexOf(element);
	    newcolor = element.readAttribute("href");
	    new Effect.Fade($$(".feature_content.active")[0], { duration: 0.3, afterFinish: function() {
	    	new Effect.Morph("feature", { style: "background-color: " + newcolor, duration: 0.3, afterFinish: function() {
	    		new Effect.Appear($$(".feature_content")[i], { duration: 0.3, afterFinish: function() {
	    			$$(".feature_content.active")[0].removeClassName("active");
	    			$$(".feature_content")[i].addClassName("active");
	    			busy = false;
	    		}});
	    	}});
	    }});
	    new Effect.Parallel([
	    	new Effect.Morph(active, { style: "background-color: #1D1D1D;" }),
	    	new Effect.Morph(active.down("span"), { style: "color: " + active.getAttribute("href") })],
	    	{ duration: 0.3, afterFinish: function() { active.removeClassName("active"); } }
	    );
	}
}

function autoNextFeature() {
	nav = $$("#feature_navigation a");
	active = $$("#feature_navigation a.active")[0];
	i = nav.indexOf(active);
	if (i == 3)
		next = nav[0];
	else
		next = nav[i+1];	

	if (next.effect) {
	    next.effect.effects[0].cancel();
	    next.effect.effects[1].cancel();
	}
	    			
	acolor = next.readAttribute("href");
	next.effect = new Effect.Parallel([
	    new Effect.Morph(next, { style: "background-color: " + acolor}),
	    new Effect.Morph(next.down("span"), { style: "color: #FFF" })
	    ], { duration: 1, afterFinish: function(ev) {
	    	ev.effects[0].element.removeClassName("busy");
	    }
	});

	activateFeature(next);
}