var rbl_media_base_url = "http://media.rabble.com/media/image/1/15/";

/* Extensions to prototype.js */
Object.extend(Element, {

	setOpacity: function(element, o) {
	
		var e = $(element);
		e.style.filter = "alpha(opacity= " + o*100 + ")";
		e.style.opacity = o;
	},
	
	getPosition: function(obj) {
		
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft;
			curtop = obj.offsetTop;
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			}
		}
		return { left: curleft, top: curtop };
	}
});

/* Functions for DOM */

function dce(element) {

	return document.createElement(element);
}

function ctn(text) {

	return document.createTextNode(text);
}


/********************** Standard Pager and Standard Pane ****************************************/

var StandardPager = Class.create();
StandardPager.prototype = {
	
	/* public methods */
	
	initialize: function(div, channel_id, per_page, is_owner, is_wide, icon_image_url, title_image_url) {
		
		/* instance data */
		this.panes = [];
		this.current_pane = 1;
		this.is_owner = is_owner;
		this.channel_id = channel_id;
		this.per_page = per_page;

		/* DOM setup */
		var main_div = $(div);
		if(is_wide) {

			main_div.style.left = "5px";	
		}
		else {

			main_div.style.left = "2px";
			main_div.style.top = "0px";
		}

		/* candybar header */
		this.header = dce("div");
		this.header.style.height = "40px";
		if(is_wide) {

			this.header.style.width = "362px";
			this.header.style.background = "url(/images/1/channel_view/middleCandyBar.gif) no-repeat";
		}
		else {
			
			this.header.style.width = "300px";
			this.header.style.background = "url(/images/1/channel_view/leftCandyBar.gif) no-repeat";
		}
		this.header.style.position = "relative";
		main_div.appendChild(this.header);

		/* icon */
		this.icon = dce("img");
		this.icon.setAttribute("src", icon_image_url);
		this.icon.style.position = "absolute";
		this.icon.style.left = "5px";
		this.icon.style.top = "5px";
		this.header.appendChild(this.icon);
		
		/* title graphic */
		var title = dce("img");
		title.setAttribute("src", title_image_url);
		title.style.position = "absolute";
		title.style.left = "38px";
		title.style.top = "5px";
		this.header.appendChild(title);

		/* create the nav pane */
		this.nav = dce("div");
		this.nav.style.position = "absolute";
		this.nav.style.left = "38px";
		this.nav.style.top = "21px";
		this.header.appendChild(this.nav);
		
		/* create the page switcher controls */
		/* start with the left link */
		var left_img = dce("img");
		left_img.setAttribute("src", "/images/1/channel_view/leftArrow.gif");
		var left_link = dce("a");
		left_link.setAttribute("href", "javascript:void(null)");
		left_link.appendChild(left_img);	
		left_link.onclick = this.previous_page.bind(this);
		Element.setOpacity(left_img, 0.5);	
		left_img.onmouseover	= function() { Element.setOpacity(left_img, 1.0); }.bind(this);
		left_img.onmouseout	= function() { Element.setOpacity(left_img, 0.5); }.bind(this);
		
		/* now the right link */
		var right_img = dce("img");
		right_img.setAttribute("src", "/images/1/channel_view/rightArrow.gif");
		var right_link = dce("a");
		right_link.setAttribute("href", "javascript:void(null)");
		right_link.appendChild(right_img);	
		right_link.onclick = this.next_page.bind(this);
		Element.setOpacity(right_img, 0.5);	
		right_img.onmouseover	= function() { Element.setOpacity(right_img, 1.0); }.bind(this);
		right_img.onmouseout	= function() { Element.setOpacity(right_img, 0.5); }.bind(this);
		
		/* page number div */
		this.page_number_div = dce("div");
		
		/* page switcher div */
		left_link.style.cssFloat = "left";
		left_link.style.styleFloat = "left";
		this.page_number_div.style.cssFloat = "left";
		this.page_number_div.style.styleFloat = "left";
		this.page_number_div.style.marginLeft = "2px";
		this.page_number_div.style.marginRight = "3px";
		right_link.style.cssFloat = "left";
		right_link.style.styleFloat = "left";
		this.page_switcher_div = dce("div");
		this.page_switcher_div.appendChild(left_link);
		this.page_switcher_div.appendChild(this.page_number_div);	
		this.page_switcher_div.appendChild(right_link);
		
		/* position and include the page switcher */
		this.page_switcher_div.style.position = "absolute";
		this.page_switcher_div.style.right = (is_wide) ? "5px" : "8px";
		this.page_switcher_div.style.top = "5px";
		this.page_switcher_div.style.display = "none";
		this.header.appendChild(this.page_switcher_div);
		
		/* loading image */
		this.loading_img = document.createElement("img");
		this.loading_img.setAttribute("src", "/images/1/channel_view/indicator.gif");
		this.loading_img.style.position = "absolute";
		this.loading_img.style.left = "10";
		this.loading_img.style.top = "10";

		this.loading_img.style.display = "none";
		main_div.appendChild(this.loading_img);
		
		/* our actual content area div */
		this.div = document.createElement("div");
		this.div.style.overflow = "hidden";
		this.div.style.width = is_wide ? "360px" : "295px";
		main_div.appendChild(this.div);
	},
	
	add_pane: function(pane) {
		
		/* add the pane to our data structure */
		this.panes.push(pane);
		
		/* add the pane's div to our div */
		Element.hide(pane.div);	
		this.div.appendChild(pane.div);	

		/* add the link for the pane */
		var link = dce("a");
		link.setAttribute("href", "javascript:void(null)");
		link.style.marginRight = "10px";	
		link.appendChild(ctn(pane.name));
		pane.link = link;

		/* when it is clicked it needs to display the appropriate pane */
		var new_pane_num = this.panes.length - 1;
		link.onclick = function() { this.show_pane(new_pane_num); }.bind(this);
		this.nav.appendChild(link);
		
		/* if this is the first pane added then we need to show it */
		if(1 == this.panes.length) {
		
			this.show_pane(0);
		}
		else {
			
			this.panes.each(function(i) {
				
				Element.addClassName(i.link, "greyedOut");
			});
			Element.removeClassName(this.panes[this.current_pane].link, "greyedOut");
		}
	},
	
	previous_page: function() {
		
		if(this.locked) {
			
			return;
		}

		this.panes[this.current_pane].previous_page();
	},

	next_page: function() {
		
		if(this.locked) {
			
			return;
		}

		this.panes[this.current_pane].next_page();
	},
	
	/* display panes */
	show_pane: function(pane) {
		
		if(this.locked) {

			return;
		}
		
		this.panes.each(function(i) {
			
			Element.addClassName(i.link, "greyedOut");
		});
		Element.removeClassName(this.panes[pane].link, "greyedOut");
		
		if(0 != pane && 0 == this.panes[pane].total_pages) {
			
			this.panes.each(function(pane) { Element.hide(pane.div); });
			Element.show(this.panes[pane].div);
			this.panes[pane].switch_to_page(1);
		}
		else {

			this.panes.each(function(pane) { Element.hide(pane.div); });
			Element.show(this.panes[pane].div);
		}

		this.current_pane = pane;
		
		if(0 == pane || 0 != this.panes[pane].total_pages) {
		
			this.set_current_page_display(this.panes[pane].current_page, this.panes[pane].total_pages);
		}
	},
	
	set_current_page_display: function(page, total_pages) {
		
		if(this.page_number_div.firstChild) {
		
			this.page_number_div.removeChild(this.page_number_div.firstChild);	
		}

		this.page_number_div.appendChild(ctn(page + " of " + total_pages));
		this.page_switcher_div.style.display = "inline";
	},
	
	ajax_request_begin: function() {
		
		if(this.locked) return;

		this.locked = true;
		this.icon.style.display = "none";	
		this.loading_img.style.display = "inline";	
	},

	ajax_request_end: function() {
		
		if(!this.locked) return;
		
		this.locked = false;
		this.icon.style.display = "inline";	
		this.loading_img.style.display = "none";	
	}
}

var StandardPane = Class.create();
StandardPane.prototype = {
	
	/* concrete methods */
	initialize: function(name, pager, init_display_data) {
		
		/* instance data */
		this.name = name;
		this.pager = pager;
		this.channel_id = pager.channel_id;
		this.current_page = 1;
		this.total_pages = 0;
		this.link = null;	
		this.div = dce("div");
		
		this.pane_init(init_display_data);
	},
	
	clear_div: function() {

		$A(this.div.childNodes).each(function(node) { Element.remove(node); });
	},

	next_page: function() {

		this.switch_to_page(this.current_page + 1);
	},

	previous_page: function() {

		this.switch_to_page(this.current_page - 1);
	},

	switch_to_page: function(page) {
	
		if(0 == this.total_pages) {

			this.update();
			return;
		}

		if(page < 1 || page > this.total_pages) {

			return;
		}
		
		this.current_page = page;
		this.update();
	},
	
	perform_ajax_request: function(parent_resource, resource, page_num, callback) {
		
		var params = "per_page=" + this.per_page + "&page_num=" + page_num;
        var url = "/" + parent_resource + "/" + this.channel_id + "/" + resource + "/";
        var request = new Ajax.Request(url,
							{
								method: 'get',
								parameters: params,
								onComplete: callback,
								onFailure: function() { this.message("There was an error while attempting to contact the server."); }.bind(this),
								onException: function(t, e) { this.message("There was an error while attempting to contact the server: " + e.message); }.bind(this)
							});
	},

	update: function() {
		
		this.pager.ajax_request_begin();
		this.perform_ajax_request(this.parent_resource, this.resource, this.current_page, this.update_callback.bind(this));
	},

	update_callback: function(xhr) {
		
        if(xhr.status != "200") {
			
			this.message("There was an xhr error while attempting to contact the server.");
			return;
		}
		
		var json = xhr.responseText;
		var response = eval("(" + json + ")");
		
		if(0 != response.meta.status) {
			
			this.message(response.meta.message);
			return;
		}
		
		if(0 == response.meta.total_items) {
		
			this.message("There are no " + this.item_readable + "s to display.");
			return;
		}
		
		this.total_pages = response.meta.total_pages;
		
		/* ready steady go */
		this.render(response.result);	
		this.pager.ajax_request_end();
		this.pager.set_current_page_display(this.current_page, this.total_pages);	
	},

	message: function(msg) {
		
		this.total_pages = 1;
		this.current_page = 1;
		this.pager.set_current_page_display(1, 1);
		
		this.pager.ajax_request_end();
		this.draw_message(msg);	
	},

	draw_message: function(msg) {

        $A(this.div.childNodes).each(function(item) { Element.remove(item); });
		var s = dce("span");
		s.style.fontSize = "12pt";
		s.appendChild(ctn(msg));
		this.div.appendChild(s);
	}
}