var last_active,new_active;
var busy = false;
var scrollmax = 0;
var scrollcurrent = 0;

Event.observe(window,"load",function(ev) {

	// Handle swapping between Key Issues
	$$("#feature_area > ul > li").invoke("observe","click",function(ev) {
		if (busy || this.hasClassName("active"))
			return;
		ev.stop();
		busy = true;
		
		last_active = $$("#feature_area ul li.active")[0];
		$$("#feature_area ul li.active div").invoke("setStyle",{ position: "relative" });
		$$("#feature_area ul li.active h3 a").invoke("setStyle",{ display: "none" });
		
		
		new_active = this;
		this.style.background = "#EDEDED";
		new Effect.Morph(this, { style: "background: #484848; height: 151px; color: #FFF;", duration: 0.5, afterFinish: function() { new_active.addClassName("active"); x = 0; while (new_active.down("h3 a",x)) { new_active.down("h3 a",x).show(); x++; } x = 0; while (new_active.down("div",x)) { new_active.down("div",x).setStyle({ position: "absolute"}); x++; } busy = false; }});
		new Effect.Morph(last_active, { style: "height: 14px; color: #4C4846; background: #EDEDED;", duration: 0.5, afterFinish: function() { last_active.removeClassName("active"); last_active.style.background = "url(http://dev.fastspot.com/clients/idfa/images/ki-item-gradient.jpg)" }});

		new Effect.Fade($$("#feature_area img")[last_active.getAttribute("title")], { duration: 0.5 });
		new Effect.Appear($$("#feature_area img")[new_active.getAttribute("title")], { duration: 0.5 });
		
	});

	// Directory dropdown
	$("directorytype").observe("dropdown:change",function(ev) {
		if (this.value == "buyers")
			this.up("form").action = "http://dev.fastspot.com/clients/idfa/resource-center/directories/buyers-guide/";
		if (this.value == "companies")
			this.up("form").action = "http://dev.fastspot.com/clients/idfa/resource-center/directories/dairy-foods-companies/";
	});
	
	// Events scroller
	$$(".scroll_right").invoke("observe","click",function(ev) {
		ev.stop();
		if (this.hasClassName("disabled") || busy)
			return;
		busy = true;
		
		ul = this.previous("div").down("ul");
		margin = parseInt(ul.getStyle("margin-left"));
		margin -= 560;
		
		new Effect.Morph(ul, { style: "margin-left: " + margin + "px;", duration: 0.5, afterFinish: function() { busy = false; } });
		
		scrollcurrent++;
		if (scrollcurrent == scrollmax)
			this.addClassName("disabled");
		$$(".scroll_left").invoke("removeClassName","disabled");
	});

	$$(".scroll_left").invoke("observe","click",function(ev) {
		ev.stop();
		if (this.hasClassName("disabled") || busy)
			return;
		busy = true;
		
		ul = this.next("div").down("ul");
		margin = parseInt(ul.getStyle("margin-left"));
		margin += 560;
		
		new Effect.Morph(ul, { style: "margin-left: " + margin + "px;", duration: 0.5, afterFinish: function() { busy = false; } });
		
		scrollcurrent--;
		if (scrollcurrent == 0)
			this.addClassName("disabled");
		if (scrollmax > 0)
			$$(".scroll_right").invoke("removeClassName","disabled");
	});
	
	$$(".scroll_wrap a").invoke("observe","click",function(ev) {
		ev.stop();
		if (busy)
			return;
		busy = true;
		margin = parseInt(this.readAttribute("href").substr(1)) * -582;
		new Effect.Morph($$(".scroller")[0], { style: "margin-left: " + margin + "px;", duration: 0.5, afterFinish: function() { busy = false; } });
		
		$$(".scroll_wrap a").invoke("removeClassName","active");
		this.addClassName("active");
	});

	scrollmax = Math.ceil($$(".item").length / 4) - 1;
	if (scrollmax == 0)
		$$(".scroll_right").invoke("addClassName","disabled");

});