//= require <mootools-core-1.3-full-nocompat>
//= require <uiframework/Panel>
//=  require <uiframework/URLUtil>
var TopCenterColumn = function()
{
	this.Extends = Panel;

	this.initialize = function()
	{
		this.parent("topCenterColumn");
		this.states = /^(home|category|listing|action)$/;
		this.updatePending = false;
		this.content = {};
		this.previousContent = {};
		this.images = [];
		this.categoryName = null;
		this.businessName = null;
		this.businessAddress = null;
		this.socialButtons = [];
		this.borderData(
		{
			bottomLeft : "img/bottom-left-upper-center-column.png",
			bottomRight : "img/bottom-right-upper-center-column.png",
			bottom : "img/border-height35px-light-blue.png"
		});
		this.backgroundStyle(
		{
			"background" : '#D5DEE6'
		});
	};

	this.commitProperties = function()
	{
		this.parent();
		if (this.contentChanged)
		{
			// Update only
			if (this.content.contentType == this.currentState)
				this.updatePending = true;
			else
				this.callLater(this.state.bind(this), [ this.content.contentType ]);

			this.contentChanged = false;
		}
		if (this.updatePending)
		{
			this.updateContent();
			this.updatePending = false;
		}
	};

	this.updateDisplayList = function(width, height)
	{
		this.parent(width, height);

		switch (this.currentState)
		{
			case "home":
				this.layoutHomeContent();
				break;

			case "category":
				this.layoutCategoryContent();
				break;

			case "listing":
				this.layoutListingContent();
				break;
				
			case "action":
				break;
		}
	};

	this.layoutHomeContent = function()
	{
		// Should be 3 images
		this.images[0].move(0, this.height() - this.images[0].height());
		this.images[1].move((this.width() - this.images[1].width()) / 2, (this.height() - this.images[1].height()) / 2);
		this.images[2].move(this.width() - this.images[2].width(), this.height() - this.images[2].height());
	};

	this.layoutCategoryContent = function()
	{
		this.categoryName.move(20, 20);
		if (this.images.length)
		{
			this.images[0].move(25, (this.height() - this.images[0].height()) / 2);
			this.images[1].move(this.width() - this.images[1].width(), this.height() - this.images[1].height());
		}
	};

	this.layoutListingContent = function()
	{
		var padding = 25;
		if (this.images.length)
		{
			this.images[0].move((this.width() - this.images[0].width()) / 2, (this.height() - this.images[0].height()) / 2);
			if (this.images[1])
				this.images[1].move(this.width() - this.images[1].width(), this.height() - this.images[1].height());
		}
		//---------------------------
		var maxY = padding;
		if (this.socialButtons)
		{
			var posX = padding;
			var len = this.socialButtons.length;
			for (var i = 0; i < len; i++)
			{
				var button = this.socialButtons[i];
				button.move(posX, 5);
				posX += button.width() + 5;
				maxY = Math.max(maxY, button._y + button.height());
			}
		}
		this.businessName.move(padding, maxY);
		this.businessAddress.move(padding, this.businessName._y + this.businessName.height());
	};

	this.commitNewState = function()
	{
		this.parent();
		if (this.states.test(this.newState))
			this.updatePending = true;
		else
			this.newStatePrevented = true;
	};

	this.updateContent = function()
	{
		switch (this.currentState)
		{
			case "category":
				this.showCategoryName(true);
				this.showListingHeader();
				break;

			case "home":
				this.showCategoryName(false);
				this.showListingHeader();
				break;

			case "listing":
				this.showCategoryName(false);
				this.showListingHeader(true);
				break;
			
			case "action":
				return;
		}
		this.createHeaderImages();
		this.invalidateDisplayList();
	};

	/**
	 * Sets the initial state of this control depending on the properties in the
	 * hash object or search string if present.
	 * 
	 * @param hash
	 *            Object containing the key => value pairs that make up the
	 *            hash.
	 */
	this.setInitializationState = function(hash /* Object */)
	{
		// Look for properties that we're interested in.
		var state = null;
		for ( var key in hash)
		{
			if (this.states.test(key))
			{
				state = key;
				break;
			}
		}
		if (location.search)
		{
			if (!state)
			{
				// We are using the DOM returned by the server.
				this.setStateBySearch();
				return;
			}
			else
			{
				// We have a hash and are expecting data
				this.killDOMState(URLUtil.searchStringToObject(location.search));
			}
		}
		else if (state)
		{
			// Defaults to kill to the home state
			this.killDOMState();
		}
		else
		{
			// No hash and no search string - default page state and DOM.
			this.state("home");
		}
	};

	this.showCategoryName = function(show /* Boolean */)
	{
		// Remove it from the displayList
		if (this.categoryName)
			this.removeChild(this.categoryName);
		this.categoryName = null;
		if (!show)
		{
			if ($('categoryName'))
				$('categoryName').dispose();
			return;
		}
		// Check the DOM
		if ($('categoryName'))
			this.categoryName = new UIComponent('categoryName');
		// Try the content hash
		else if (this.content['category'])
		{
			var category = this.content['category'];
			this.categoryName = new UIComponent('h1',
			{
				id : "categoryName",
				html : category.name
			});
		}
		if (this.categoryName)
			this.addChild(this.categoryName);
	};

	this.createHeaderImages = function()
	{
		this.removeAllImages();
		// Create content from the DOM
		var images = $$(".header-img");
		if (images.length)
			this.createImagesFromElements(images);
		else
			this.createImagesFromJSON();
	};

	this.showListingHeader = function(show /* Boolean */)
	{
		var o = this;
		// Business Name
		if (this.businessName)
			this.removeChild(this.businessName);
		this.businessName = null;
		// Address
		if (this.businessAddress)
			this.removeChild(this.businessAddress);
		// Soc links
		if (this.socialButtons.length)
		{
			this.socialButtons.each(function(item){
				o.removeChild(item);
			});
			this.socialButtons = [];
		}
		this.businessAddress = null;
		if (!show)
		{
			if ($('business-name'))
				$('business-name').dispose();
			if ($('business-address'))
				$('business-address').dispose();
			$$(".socLink").dispose();
			return;
		}
		var listing = this.content['listing'];
		if ($('business-name'))
			this.businessName = new UIComponent('business-name');
		else if (listing)
			this.businessName = new UIComponent('h1',
			{
				id : 'business-name',
				html : listing['title']
			});
		if (this.businessName)
			this.addChild(this.businessName);
		// Address
		if ($('business-address'))
			this.businessAddress = new UIComponent('business-address');
		else if (listing)
		{
			var html = listing.address1 + '<br/>' + listing.city + ', ' + listing.state + ' ' + listing.zip + '<br/>' + listing.phone_number;
			var url = listing.web_address ? URLUtil.stripSlashes(listing.web_address) : '';
			var web_address = '';
			if (url)
			{
				// look for the http://
				if (/^(http:\/\/)/.test(url) == false)
					url = 'http://' + url;
				web_address = '<p><a href=' + url + '>' + url + '</a></p>';
				html += web_address;
			}
			this.businessAddress = new UIComponent('p',
			{
				id : 'business-address',
				html:html
			});
		}
		if (this.businessAddress)
			this.addChild(this.businessAddress);
		// Soc links
		var socLinks = $$(".socLink");
		var button = null;
		if (socLinks.length)
		{
			var len = socLinks.length;
			for (var i = 0; i < len; i++)
			{
				button = new UIComponent(socLinks[i]);
				this.addChild(button);
				this.socialButtons.push(button);
			}
		}
		else if (this.content['socialButtons'])
		{
			var socButtons = this.content['socialButtons'];
			var link = null;
			var image = null;
			var factory = function(data)
			{
				image = new Element("img", data.image);
				link = new Element("a", {
					href:URLUtil.stripSlashes(data.url)
				});
				link.grab(image);
				button = new UIComponent(image);
				o.addChild(button);
				o.socialButtons.push(button);
			}
			if (socButtons.facebook)
				factory(socButtons.facebook);
			if (socButtons.twitter)
				factory(socButtons.twitter);
			if (socButtons.linked_in)
				factory(socButtons.linked_in);
			if (socButtons.blogger)
				factory(socButtons.blogger);
			if (socButtons.myspace)
				factory(socButtons.myspace);
		}
	};

	this.createImagesFromElements = function(elements /* Array of Elements */)
	{
		var len = elements.length;
		for ( var i = 0; i < len; i++)
		{
			var img = new UIComponent(elements[i]);
			this.addChild(img);
			this.images.push(img);
		}
	};

	this.createImagesFromJSON = function()
	{
		var images = this.content['headerImages'];
		if (!images)
			return;
		var len = images.length;
		for ( var i = 0; i < len; i++)
		{
			var image = images[i]; // Object
			var href = image["href"];
			var img = new UIComponent("img",
			{
				"class" : "header-img",
				width : image.width,
				height : image.height,
				src : 'index.php?image=' + image.image_id,
				alt : URLUtil.stripSlashes(image.alt)
			});
			if (href)
			{
				var link = new UIComponent('a',
				{
					href : URLUtil.stripSlashes(href)
				});
				this.addChild(link);
				link.addChild(img);
			}
			else
				this.addChild(img);
			this.images.push(img);
		}
	};

	this.removeAllImages = function()
	{
		var i = this.images.length;
		while (i--)
			this.removeChild(this.images[i]);
		// -------------------------------
		this.images = [];
	};

	this.setStateBySearch = function()
	{
		var hashObj = URLUtil.searchStringToObject(location.search);
		for ( var key in hashObj)
		{
			if (this.states.test(key))
			{
				this.state(key);
				return;
			}
		}
		this.state('home');
	};

	this.setContent = function(value /* JSON object */)
	{
		this.previousContent = this.content;
		this.content = value;
		this.contentChanged = true;

		this.invalidateProperties();
	};

	this.killDOMState = function(hash /* Object */)
	{
		// Kill the default state
		var catName = $('categoryName');
		if (catName)
			catName.dispose();
		var pageTitle = $("pageTitle");
		if (pageTitle)
			pageTitle.dispose();
		var listingDes = $("listing-description");
		if (listingDes)
			listingDes.dispose();
		var busName = $("business-name");
		if (busName)
			busName.dispose();
		var busAddress = $("business-address");
		if (busAddress)
			busAddress.dispose();
		$$(".header-img").dispose();
		$$(".socLink").dispose();
	};
};
TopCenterColumn = new Class(new TopCenterColumn());