/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * BROWSER
 * The card browser (used by Image insert and Link insert, amongst others)
 *+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
		
var Browser = Class.create ( {

	ITEMS_PER_PAGE: 48,
	DEFAULT_VIEW_STYLE: "grid",
	
 	/*-----------------------------------------------------------------------------------------------------
	 * INITIALIZE
	 * Initialise and display the browser
	 *-----------------------------------------------------------------------------------------------------*/

	initialize: function(el, settings) {
		this.id = el;
		this.settings = settings;
		
		// Set up the viewing style
		this.viewStyle = (settings.viewStyle != undefined) ? settings.viewStyle : this.DEFAULT_VIEW_STYLE;
		
		console.log(settings.viewStyle);
		
		var obj = this;
		this.browserWindow = $(this.id);
		
		this.pathBar = new Element("div", {id: "browser-path-bar-" + this.id, 'class': "browser-path-bar"});
		var pathA = "<ul><li><a href='#'>Website Name</a></li><li><a href='#'>News</a></li><li><a href='#'>2010</a></li><li><span>October</span></li></ul>";
		this.pathBar.update(pathA);
		
		this.navigationBar = new Element("div", {id: "browser-navigation" + this.id, 'class': "browser-controls"}).update("Browser controls go here");
		
		// Set up the card browser controls...
		var navFirst = new Element("li", {title: "First page", id: "browser-nav-first-" + this.id}).update(new Element("span", {style: "background-position: 0px 0px;"}));
		navFirst.observe("click", function(event) { event.stop(); obj.CardPageNavigation('first'); });
		
		var navPrevious = new Element("li", {title: "Previous page", id: "browser-nav-previous-" + this.id}).update(new Element("span", {style: "background-position: -19px 0px;"}));
		navPrevious.observe("click", function(event) { event.stop(); obj.CardPageNavigation('previous'); });
		
		var navNext = new Element("li", {title: "Next page", id: "browser-nav-next-" + this.id, 'class': "browser-button-disabled"}).update(new Element("span", {style: "background-position: -38px 0px;"}));
		navNext.observe("click", function(event) { event.stop(); obj.CardPageNavigation('next'); });
		
		var navLast = new Element("li", {title: "Last page", id: "browser-nav-last" + this.id, 'class': "browser-button-disabled"}).update(new Element("span", {style: "background-position: -57px 0px;"}));
		navLast.observe("click", function(event) { event.stop(); obj.CardPageNavigation('last'); });

		var navigation = new Element("ul");
		UIUtils.InsertElements(navigation, navFirst, navPrevious, navNext, navLast);
		this.navigationBar.insert(navigation);
		this.navigationBar.insert(new Element("div", {'class': "clear"}));
		
		this.browser = new Element("div", {id: "browser-cards-" + this.id, 'class': "card-browser popover-form-block with-scroll-bars visible", style: "height: 320px;" });

		
		this.browserWindow.insert(this.pathBar);
		this.browserWindow.insert(this.browser);
		this.browserWindow.insert(this.navigationBar);
			
		this.RequestCardCount();
				
		},
	
	/*-----------------------------------------------------------------------------------------------------
	 * FUNCTION NAME
	 * Description
	 *-----------------------------------------------------------------------------------------------------*/

	CardPageNavigation: function(position) {
	
	
		},

	RequestCardCount: function() {
		var obj = this;
		var params = $H({ cardType: "Product" });
		new Ajax.Request("/index.php", {
				method: "post",
				parameters: params,
				requestHeaders: { Request: "card-count" },
				onSuccess: function(response) {
					obj.UpdateCardToolbar(response.responseText);
					}
				});
	
		},
	
	UpdateCardToolbar: function(cardTotal) {
		this.cardOffset = 0;
		this.RequestCards(this.cardOffset);
		},
		
	RequestCards: function(cardOffset) {
		var obj = this;
		var params = $H({ cardType: "Product", cardOffset: cardOffset, cardCount: this.ITEMS_PER_PAGE });
		new Ajax.Request("/index.php", {
				method: "post",
				parameters: params,
				requestHeaders: { Request: "fetch-cards", outputType: "HTML", templateType: this.viewStyle + "-browser" },
				onCreate: function() {
					obj.Rotary = new Rotary(obj.browser.id, {size: 30, type: "rotary" });
					},
				onSuccess: function(response) {
					obj.DisplayCards(response.responseText);
					},
				onComplete: function() {
					obj.Rotary.Stop();
					obj.Rotary = null;
					}
				});
	
		},
		
	DisplayCards: function(HTML) {
		console.log(HTML);
		this.browser.update(HTML + "<div class='clear'></div>");
		this.currentlySelectedCard = -1;
		var obj = this;
		// Get the cards and add an "onclick" event to each of the DIVs...
		cards = this.browser.getElementsByTagName("div");
		for (i = 0; i < cards.length; i++) {
			cards[i].observe("click", function(event) { obj.ToggleSelectedCard(event); });
			}
		},
		
	ToggleSelectedCard: function(event) {
	
		var el = Event.element(event);
		while (el.nodeName != "DIV" && el.nodeName != "BODY") {
			el = el.parentNode;
			}
		if (this.currentlySelectedCard != -1) {
			$(this.currentlySelectedCard).toggleClassName("card-selected");
			}
		
		this.currentlySelectedCard = el.id;
		$(this.currentlySelectedCard).toggleClassName("card-selected");
		this.currentlySelectedCardID = this.currentlySelectedCard.substring(5);
		var cardTitle = $(this.currentlySelectedCard).getElementsByTagName("h3")[0].innerHTML; // Title of the card is ALWAYS stored in an H3 tag
		var cardCaption = $(this.currentlySelectedCard).getElementsByTagName("img")[0].title; // Caption of the photo is stored in the IMG title attribute
		
		$('image-caption').setValue(cardTitle);
		$('image-alt-text').setValue(cardCaption);
		var obj = this;
		//var params = $H({ cardID: this.currentlySelectedCard });
		// Get the card information for the currently selected card ID
		new Ajax.Request("/index.php", {
				method: "post",
				parameters: {cardID: this.currentlySelectedCardID },
				requestHeaders: { Request: "fetch-card-by-id", outputType: "JSON" },
				onSuccess: function(response) {
				console.log(response.responseText);
					obj.UpdateURL(response.responseText);
					}
				});
					
		},
	
	UpdateURL: function(JSON) {
		theCard = eval("(" + JSON + ")");
		var URL = theCard.Content.Preview;
		$("image-final-url").setValue(URL);
	
		},
	
	/*-----------------------------------------------------------------------------------------------------
	 * TERMINATE
	 * Browser is to be terminated - clean up here
	 *-----------------------------------------------------------------------------------------------------*/
	
	Terminate: function() {
		return;
		}
		
	});