var current_feature = 0;
var scroll_per_point;
var move_timer;
var hover_timer;
var active_feature = false;

Event.observe(window,"load", function() {
	
	$$(".hover_image").invoke("observe","mouseover", function(ev) {
		el = ev.element();
		alt = el.readAttribute("alt");
		src = el.readAttribute("src");
		el.src = alt;
		el.alt = src;
	});
	
	$$(".hover_image").invoke("observe","mouseout", function(ev) {
		el = ev.element();
		alt = el.readAttribute("alt");
		src = el.readAttribute("src");
		el.src = alt;
		el.alt = src;
	});
	
	$$(".feature_button").invoke("observe","click", function(ev) {
		ev.stop();
		if (active_feature)
			return;
		clearInterval(auto_scroll_timer);
		active_feature = true;
		newf = ev.element().innerHTML - 1;
		new Effect.Fade($$(".bg_image")[current_feature]);
		new Effect.Appear($$(".bg_image")[newf]);
		new Effect.Fade($$(".feature_left img")[current_feature]);
		new Effect.Appear($$(".feature_left img")[newf]);
		new Effect.Fade($$(".feature_right > a > img")[current_feature]);
		new Effect.Appear($$(".feature_right > a > img")[newf]);
		new Effect.Fade($$(".feature_links")[current_feature]);
		new Effect.Appear($$(".feature_links")[newf], { afterFinish: function() { active_feature = false; } });
		
		$$(".feature_button").each(function(el) {
			el.className = el.className.replace("_active","");
		});
		
		$$(".feature_button")[newf].className += "_active";
		current_feature = newf;
		auto_scroll_timer = setInterval("nextFeature();",5000);
	});
	
	new Draggable("style_handle", { constraint: "horizontal", starteffect: function() { }, endeffect: function() { },
		onDrag: function(ev) {
			left = ev.element.style.left.substr(0,ev.element.style.left.length-2);
			scrollResults(left);
		},
		snap: function(x,y) {
			if (x < 0)
				newx = 0;
			else if (x > 815)
				newx = 815;
			else
				newx = x;
			return [newx,y];
    	}
	});	
	
	
	// Setup the darn scrollbar.  I hate these things.
	dims = $$("#style_scroll_container ul")[0].getDimensions();
	w = dims.width - 924;
	scroll_per_point = w / 815;
	
	$("scroll_left").observe("mousedown",function(ev) {
		move_timer = setInterval("scrollItLeft();",10);
	});
	$("scroll_left").observe("mouseup",function(ev) {
		clearInterval(move_timer);
		ev.stop();
	});
	$("scroll_left").observe("click", function(ev) { ev.stop(); });
	
	$("scroll_right").observe("mousedown",function(ev) {
		move_timer = setInterval("scrollItRight();",10);
	});
	$("scroll_right").observe("mouseup",function(ev) {
		clearInterval(move_timer);
		ev.stop();
	});
	$("scroll_right").observe("click", function(ev) { ev.stop(); });
	
	/*$("style_scroller").observe("click",function(ev) {
		x = ev.layerX - 78;
		if (x < 0)
			x = 0;
		if (x > 815)
			x = 815;
		$("style_handle").style.left = x + "px";
		scrollResults(x);
	});*/
	
	// Setup the hover window
	$$("#style_scroll_container img").invoke("observe","mouseover",function(ev) {
		if (hover_timer)
			clearTimeout(hover_timer);
		$("hover_info").removeClassName("left");
		el = ev.element();
		pos = parseInt(el.getAttribute("name")) * 225;
		sX = parseInt($("style_scroll_container").scrollLeft);
		if (pos - sX + 317 > 924) {
			$("hover_info").addClassName("left");
			pos -= 540;
		} else {
			pos -= 38;
		}
		
		
		$("hover_info").setStyle({ marginLeft: pos + "px" });
		$("hover_info").innerHTML = $("hover_info_" + el.getAttribute("name")).innerHTML;
		$("hover_info").show();
	});
	$$("#style_scroll_container img").invoke("observe","mouseout",function(ev) {
		el = ev.element();
		hover_timer = setTimeout('hideHover();',1);
	});
	
	$("hover_info").observe("mouseover",function(ev) {
		clearTimeout(hover_timer);
	});
	$("hover_info").observe("mouseout",function(ev) {
		hover_timer = setTimeout('hideHover();',1);	
	});
	
	auto_scroll_timer = setInterval("nextFeature();",5000);

});

function nextFeature() {
	if (active_feature)
		return;
	newf = current_feature + 1;
	if (newf == 5)
	    newf = 0;
	active_feature = true;
	new Effect.Fade($$(".bg_image")[current_feature]);
	new Effect.Appear($$(".bg_image")[newf]);
	new Effect.Fade($$(".feature_left img")[current_feature]);
	new Effect.Appear($$(".feature_left img")[newf]);
	new Effect.Fade($$(".feature_right > a > img")[current_feature]);
	new Effect.Appear($$(".feature_right > a > img")[newf]);
	new Effect.Fade($$(".feature_links")[current_feature]);
	new Effect.Appear($$(".feature_links")[newf], { afterFinish: function() { active_feature = false; } });
	
	$$(".feature_button").each(function(el) {
	    el.className = el.className.replace("_active","");
	});
	
	$$(".feature_button")[newf].className += "_active";
	current_feature = newf;
}

function hideHover() {
	$("hover_info").hide();
}

function scrollResults(x) {
	$("style_scroll_container").scrollLeft = Math.round(x * scroll_per_point);
}

function scrollItLeft() {
	hleft = parseInt($("style_handle").style.left.replace("px","")) - 6;
	if (hleft < 0)
		hleft = 0;
	$("style_handle").style.left = hleft + "px";
	scrollResults(hleft);
}

function scrollItRight() {
	hleft = parseInt($("style_handle").style.left.replace("px","")) + 6;
	if (hleft > 815)
		hleft = 815;
	$("style_handle").style.left = hleft + "px";
	scrollResults(hleft);
}

function addPreconfigured(config) {
	new Ajax.Request("http://www.russellmackenna.com/modules/willow/_ajax/add-preconfigured-to-cart.php?config=" + config);
}