var CE_Highlights_Controller = new Class({
    options: {
		id: null,
		application_webroot: null,
		datasource: null,
		gallery_path: null,
		gallery_id: null,
		container: "highlights-main",
		btn_container: "highlights-buttons",
		prev_btn: "highlights-prev",
		play_pause_btn: "highlights-play-pause",
		next_btn: "highlights-next",
		header_element: "h3",
		read_more_text: "Read More »",
		autoplay: false,
		resize_image_width: 0, // set to zero to use the image's natural width/height
		transition_interval: 5000, // how long to wait between transitions
		fx_duration: 200
    },

    initialize: function(options) {
		this.setOptions(options);
		
		this.ajax = null;
		this.container = $(this.options.container);
		this.btn_container = $(this.options.btn_container);
		this.prev_btn = $(this.options.prev_btn);
		this.play_pause_btn = $(this.options.play_pause_btn);
		this.next_btn = $(this.options.next_btn);
		
		var controller = this;
		this.prev_btn.addEvent("click", function() { controller.prev(); });
		this.play_pause_btn.addEvent("click", function() { controller.toggle_play(); });
		this.next_btn.addEvent("click", function() { controller.next(); });

		this.highlights = [];
		this.current_highlight = 0;
		this.tallest_highlight_size = 0;
		this.interval = null;
		this.playing = false;
	},
	
	init: function() {
		pars = "method=get_highlights";
		var success_fn = this.populate.bind(this);

		this.ajax = new Request({
			url: this.options.datasource,
			data: pars,
			onSuccess: success_fn
		}).send();
	},
	
	populate: function(request) {
		r = JSON.decode(request);
		
		for (var x = 0; x < r.ROWCOUNT; x++) {
			var highlight = new Element("div", {
				"id": "highlight-container-" + x,
				"class": "highlight",
				"styles": { 
					"display": "none"
				}
			});
			//if (x !== 0) { highlight.setStyle("display", "none"); }
			highlight.inject(this.container, "top");
			
			var highlight_left = new Element("div", {
				"class": "highlight-left"
			}).inject(highlight);
			
			//if (r.DATA.TYPE[x] == "external_link") alert(r.DATA.TYPE[x]);
			
			var href = null;
			var src = null;
			
			if (r.DATA.TYPE[x] == "external_link") {
				href = r.DATA.URI[x];
				src = r.DATA.IMAGE_URI[x];
			} else {
				href = r.DATA.URL[x];
				src = r.DATA.IMAGE[x];
			}
			
			var link = new Element("a", {
				"href": href
			}).inject(highlight_left);
			
			var image = new Element("img", {
				"src": src,
				"alt": r.DATA.TITLE[x]
			});

			image.inject(link);
			/*var size = image.measure(function() { return this.getSize(); });
			if (this.options.resize_image_width !== 0 && size.x > this.options.resize_image_width) {
				image.set("width", this.options.resize_image_width);
				// IE is dumb and doesn't autosize the height if given just the width, so calculate and set it
				image.set("height", this.options.resize_image_width * size.x / size.y);
			}*/
			
			var highlight_right = new Element("div", {
				"class": "highlight-right"
			}).inject(highlight);
			
			var header = new Element(this.options.header_element, {
				"text": r.DATA.TITLE[x]
			}).inject(highlight_right);
			
			var summary = new Element("div", {
				"html": r.DATA.SUMMARY[x]
			}).inject(highlight_right);
			
			var read_more = new Element("p", {
				"html": "<a href='" + href + "'>" + this.options.read_more_text + "</a>"
			}).inject(highlight_right);
			
			var clear = new Element("div", {
				"class": "clear",
				"html": "<!-- // -->"
			}).inject(highlight);
			
			size = highlight.measure(function() { return this.getSize(); });

			if (size.y > this.tallest_highlight_size) {
				this.tallest_highlight_size = size.y;
			}
			highlight.setStyle("height", size.y);

			this.highlights.push({ "id": "highlight-container-" + x, "highlight": highlight });
		}

		this.container.setStyle("height", this.tallest_highlight_size);
		this.container.removeClass("loading");
		this.highlights[0].highlight.setStyle("display", "block");
		
		if (this.options.autoplay) {
			this.play();
		} else {
			this.btn_container.addClass("paused");
		}
	},
	
	get_height: function(elem) {

	},
	
	toggle_play: function() {
		if (this.playing) {
			this.pause();
		} else {
			this.next();
			this.play();
		}
	},
	
	play: function() {
		this.playing = true;
		this.interval = setInterval(this.options.id + ".next()", this.options.transition_interval);
		//this.btn_container.toggleClass("paused");
		this.btn_container.removeClass("paused");
	},
	
	pause: function() {
		this.playing = false;
		clearInterval(this.interval);
		//this.btn_container.toggleClass("paused");
		this.btn_container.addClass("paused");
	},
	
	prev: function() {
		if (this.playing) { this.reset_interval(); }
		if (this.current_highlight == 0) {
			this.do_highlight(this.highlights.length - 1);
		} else {
			this.do_highlight(this.current_highlight - 1);
		}
	},
	
	next: function() {
		if (this.playing) { this.reset_interval(); }
		if (this.current_highlight == (this.highlights.length - 1)) {
			this.do_highlight(0);
		} else {
			this.do_highlight(this.current_highlight + 1);
		}
	},
	
	/** called from prev/next; resets the play interval */
	reset_interval: function() {
		clearInterval(this.interval);
		this.interval = setInterval(this.options.id + ".next()", this.options.transition_interval);
	},
	
	do_highlight: function(which) {
		if (this.current_highlight !== which) {	
			this.transition("highlight-container-" + this.current_highlight, "highlight-container-" + which);
			this.current_highlight = which;
		}
	},
	
	transition: function(from, to) {
		var f = new Fx.Tween($(from), { duration:this.options.fx_duration, onComplete:function(elem) { elem.style.display = "none"; } });
		var t = new Fx.Tween($(to), { duration:this.options.fx_duration });

		f.start("opacity", 1, 0).chain(
			function() {
				$(to).setStyles({ opacity: 0, display:"block" });
				t.start("opacity", 0, 1);
			}
		);
	}
});

CE_Highlights_Controller.implement(new Options);