var Spotlights = Class.create({
	IMAGES: {
		play:    "/media/images/controls/play.png",
		stop:    "/media/images/controls/stop.png",
		play_on: "/media/images/controls/play_on.png",
		stop_on: "/media/images/controls/stop_on.png"
	},
	
	bar: null,
	progress: null,
	controls: null,
	controler: null,
	effect: null,

	initialize: function() {
		// the current rules for opacity in browsers requires us to use two divs to produce the effect that we want.  the first
		// div, named bounding_box, is the semi-transparent one.  the second div, named this.controls, is opaque, but has no
		// background color.  Then, the latter is positions over top the former 
		
		var bounding_box = new Element("div").addClassName("spotlight_controler_box right").setOpacity(.5);
		this.controls  = new Element("div").addClassName("spotlight_controls");

		// first thing to do is create the image which will hold our stop and start controller.  then, we'll observe the click,
		// mouseover, and mouseout events for that image so that we can change its state from stop to play and back as well as
		// change it's "hover" state.

		this.controler = new Element("img", { src: this.IMAGES.stop }).addClassName("borderless right").writeAttribute({"state":"stop"});
		this.controler.observe("click", this.change_controler_state.bind(this));
		this.controler.observe("mouseover", this.change_controler_color.bind(this));
		this.controler.observe("mouseout",  this.change_controler_color.bind(this));

		// now we'll need to create our progress bar.  the bar contains two divs, one for the bounding box (.progress) and the
		// other for the bar (.bar).  then, the bar is added to the progress div and we'll start the scriptaculous MoveBy 
		// effect which will slide the bar to the left making it appear as if the progress meter is being filled.

		this.progress = new Element("div").addClassName("progress");
		this.bar = new Element("div").addClassName("bar");
		this.progress.insert(this.bar);
		
		this.effect = new Effect.MoveBy(this.bar, 0, 50, {
			duration: 20, transition: Effect.Transitions.linear, afterUpdate: this.restart_progress_bar.bind(this)
		});
		
		this.controls.insert(this.controler).insert(this.progress);
		$("splash").insert({top: bounding_box});
		$("splash").insert({top: this.controls});
	},
	
	change_controler_state: function() {
		var state = this.controler.readAttribute("state");
		
		state == "stop"
			? this.effect.cancel()
			: this.effect.start(this.effect.options);
		
		this.controler.src = state=="stop" ? this.IMAGES.play_on : this.IMAGES.stop_on;
		this.controler.writeAttribute({"state": (state=="stop" ? "play" : "stop")});
	},
	
	change_controler_color: function() {
		var state = this.controler.readAttribute("state");
		var curr_color = this.controler.src.endsWith("on.png") ? "on" : "off";
		this.controler.src = curr_color == "on" ? this.IMAGES[state] : this.IMAGES[state+"_on"];
	},
	
	restart_progress_bar: function() {
		var left = this.bar.positionedOffset().left;
		if(left == -1) {
			this.effect.cancel();
			
			new Ajax.Request("/ajax/load_spotlight.php", {
				onComplete: function(xhr) { $("spotlight").replace(xhr.responseText); }
			});
			
			
			this.bar.setStyle("left: -50px");
			this.effect = new Effect.MoveBy(this.bar, 0, 50, {
				duration: 20, transition: Effect.Transitions.linear, afterUpdate: this.restart_progress_bar.bind(this)
			});
		}
	}
});



document.observe("dom:loaded", function() { new Spotlights() });