/// <reference path="../json2.js" />
/// <reference path="../enviro.js" />
/// <reference path="../jquery/jquery-1.3.2.js" />
/// <reference path="../jquery/jquery.pan.js" />
/// <reference path="../swfobject-redux.js" />
/// <reference path="../template.js" />

window.$home = function() {
	// Constants
	var c_action = "action.home";
	var c_startPoint = "start_point.home";
	var c_endPoint = "end_point.home";
	var c_pulse = "pulse.home";

	// Types
	var BGFlash = function(id, className, width, height, movie, order) {
		this.id = id;
		this.className = className;
		this.width = width;
		this.height = height;
		this.movie = movie;
		this.order = order;
		this.__type = "BGFlash";

		this.insertInto = function(parent) {
			var divHtml = "<div class=\"" + this.className + "\"><div id=\"" + this.id + "\"></div></div>";
			if (this.order == "back") {
				parent.find("div.trees").before(divHtml);
			}
			else {
				parent.find("div.trees").after(divHtml);
			}

			$so.createSWF({
				data: this.movie,
				width: this.width,
				height: this.height
			}, {
				menu: false,
				wmode: "transparent",
				loop: true,
				quality: "high"
			}, this.id);

			return $("#" + this.id);
		};
	};

	var Tooltip = function(id, className, type, tooltip, section, page) {
		this.id = id;
		this.className = className;
		this.type = type;
		this.tooltip = tooltip;
		this.section = section;
		this.page = page;
		this.__type = "Tooltip";
		this.width = 0;
		this.height = 0;

		switch (this.type) {
			case "tl":
				this.width = 280;
				this.height = 282;
				break;
			case "tr":
				this.width = 280;
				this.height = 210;
				break;
			case "bl":
				this.width = 270;
				this.height = 230;
				break;
			case "br":
				this.width = 220;
				this.height = 282;
				break;
		}

		this.appendTo = function(parent) {
			var div = $("<div class=\"tooltip " + this.className + " " + this.type + "\"><a href=\"#\" class=\"tt_plus\">plus</a>"
					+ "</div>").appendTo(parent);

			if (!$.browser.mozilla && flashIsGood()) {
				div.append("<div id=\"" + this.id + "\"></div>");

				var movie = "/flash/tooltip-" + this.type + ".swf"
					+ "?section=" + this.section
					+ (this.page ? "&page=" + this.page : "")
					+ "&tt=" + this.tooltip;

				$so.createSWF({
					data: movie,
					width: this.width,
					height: this.height
				}, {
					menu: false,
					wmode: "transparent",
					loop: true,
					quality: "high"
				}, this.id);
			}
			else {
				div.prepend("<div class=\"tt_top\"></div><div class=\"tt_mid\">"
				+ "<strong>" + this.tooltip + "</strong>"
				+ "<div class=\"tt_photo\"></div><div class=\"tt_person\"></div>"
				+ "<a href=\"/" + this.section + "/" + this.page + "\" title=\"Take Me There\">Take me there</a>"
				+ "</div><div class=\"tt_bot\"></div>");
			}

			return div;
		};
	};

	// Private Variables
	var _loaded = false;
	var _focus = "home_one";

	// Pulse
	var _pulse = function(delay, callback) {
		///	<summary>
		///		Pulses the given element, then optionally fires the callback function.
		///	</summary>
		/// <param name="element" type="jQuery">
		///		The DOM element to pulse.
		/// </param>
		///	<param name="delay" optional="true" type="Number">
		///		The delay between pulse steps. Default value is 250 milliseconds.
		///	</param>
		/// <param name="callback" optional="true" type="Object">
		///		A function to fire once the callback has completed.
		/// </param>

		var element = $("#home");
		delay = !delay ? 250 : delay;

		setTimeout(function() {
			element.addClass("blink");
			setTimeout(function() {
				element.removeClass("blink");
				setTimeout(function() {
					element.addClass("blink");
					setTimeout(function() {
						element.removeClass("blink");
						if ($.isFunction(callback))
							callback();
					}, delay);
				}, delay);
			}, delay);
		}, delay);
	};

	var _pulseAll = function() {
		_stopPulse();
		$("#home").data(c_pulse, setTimeout(function() {
			_pulse(250, function() {
				_pulseAll();
			});
		}, 2000));
	};

	var _stopPulse = function() {
		var pulse = $("#home").data(c_pulse);
		if (pulse) {
			clearTimeout(pulse);
		}
	};

	// Private Methods
	var _createFlashPeople = function(page) {
		if (!flashIsGood()) {
			return;
		}

		switch (page[0].id) {
			case "home_one":
				if (!$.browser.mozilla) {
					new BGFlash("flaBal1", "flash balcony", 15, 30, "/flash/balcony.swf", "back").insertInto(page);
					new BGFlash("flaSho1", "flash shoppers", 100, 66, "/flash/shop.swf", "back").insertInto(page);
					new BGFlash("flaBen1", "flash bench", 100, 70, "/flash/bench.swf", "front").insertInto(page);
				}
				new BGFlash("flaSu1", "flash suitcase", 290, 96, "/flash/suitcase.swf", "back").insertInto(page);
				new BGFlash("flaBar1", "flash bar_group", 150, 35, "/flash/bar_group.swf", "back").insertInto(page);
				new BGFlash("flaGym1", "flash gym", 100, 70, "/flash/gym.swf", "front").insertInto(page);
				break;
			case "home_two":
				if (!$.browser.mozilla) {
					new BGFlash("flaCof2", "flash coffee", 80, 56, "/flash/coffee.swf", "back").insertInto(page);
					new BGFlash("flaLif2", "flash lifestyle", 200, 46, "/flash/lifestyle_group.swf", "back").insertInto(page);
					new BGFlash("flaSho2", "flash shoppers", 195, 60, "/flash/shop.swf", "back").insertInto(page);
				}
				new BGFlash("flaBal2", "flash balcony", 30, 60, "/flash/balcony.swf", "back").insertInto(page);
				new BGFlash("flaJo2", "flash jogger", 900, 300, "/flash/jogger.swf", "front").insertInto(page);
				break;
		}
	};

	var _createTooltips = function(page) {
		var tooltips = $("<div class=\"tooltips" + (!$.browser.mozilla && flashIsGood() ? " flash" : "")
			+ "\"></div>").appendTo(page);

		if (!$.browser.opera) {
			switch (page[0].id) {
				case "home_one":
					new Tooltip("ttGymOne", "gym", "br", "gym", "facilities", "gym").appendTo(tooltips);
					new Tooltip("ttSpaOne", "spa", "br", "spa", "facilities", "spa").appendTo(tooltips);
					new Tooltip("ttBarOne", "bar", "br", "bar", "facilities", "bar").appendTo(tooltips);
					new Tooltip("ttHotOne", "hotel", "bl", "hotel", "facilities", "boutique").appendTo(tooltips);
					new Tooltip("ttShoOne", "shops", "br", "shops", "facilities", "shops").appendTo(tooltips);
					new Tooltip("ttCanOne", "canal", "bl", "gardens", "facilities", "gardens").appendTo(tooltips);
					new Tooltip("ttLifOne", "lifebox", "tr", "lifebox", "facilities", "lifebox").appendTo(tooltips);
					new Tooltip("ttBenOne", "bedroom", "tl", "bedroom", "apartments", "sleeping").appendTo(tooltips);
					new Tooltip("ttKitOne", "kitchens", "tl", "kitchens", "apartments", "cooking").appendTo(tooltips);
					new Tooltip("ttLivOne", "living", "tl", "living", "apartments", "living").appendTo(tooltips);
					new Tooltip("ttTranOne", "transport", "tl", "visit", "visit").appendTo(tooltips);
					break;
				case "home_two":
					new Tooltip("ttTransTwo", "transport", "tl", "visit", "visit").appendTo(tooltips);
					new Tooltip("ttRestTwo", "restaurant", "br", "restaurant", "facilities", "restaurants").appendTo(tooltips);
					new Tooltip("ttShopTwo", "shops", "bl", "shops", "facilities", "shops").appendTo(tooltips);
					new Tooltip("ttCanaTwo", "canal", "bl", "gardens", "facilities", "gardens").appendTo(tooltips);
					new Tooltip("ttConTwo", "concierge", "tl", "concierge", "facilities", "concierge").appendTo(tooltips);
					new Tooltip("ttBenTwo", "bedroom", "tl", "bedroom", "apartments", "sleeping").appendTo(tooltips);
					new Tooltip("ttKitTwo", "kitchens", "bl", "kitchens", "apartments", "cooking").appendTo(tooltips);
					new Tooltip("ttLivTwo", "living", "tl", "living", "apartments", "living").appendTo(tooltips);
					break;
			}
		}

		return tooltips;
	};

	var _createClickMe = function(page) {
		return $("<a class=\"clickme cm_left\" href=\"#\" title=\"click here to view more facilities\">"
			+ "Click here to view more facilities.</a><a class=\"clickme cm_right\" href=\"#\" title=\""
			+ "click here to view more facilities\">Click here to view more facilities.</a>").appendTo(page);
	};

	var _createPage = function(pageId, home) {
		var page = $("<div id=\"" + pageId + "\" class=\"home_page\"><div class=\"layer trees\">"
			+ "<p>Trees sitting in front of the scene.</p>"
			+ "</div></div>").appendTo(home);

		if (pageId == "home_two" && $.browser.msie && $.browser.version < 7) {
			$(page).append("<div class=\"layer balcony-layer\"><p>Balcony infront of loving couple.</p></div>");
		}

		_createFlashPeople(page);
		_createTooltips(page);
		_createClickMe(page);

		return page;
	};

	var _init = function() {
		var home = null;

		if (entry.home) {
			home = $("#home");
			var homeOne = $("#home_one");
			_createFlashPeople(homeOne);
			_createTooltips(homeOne);
			_createClickMe(homeOne);
		}
		else {
			home = $("<div id=\"home\"></div>").prependTo("#frame");
			_createPage("home_one", home);
		}

		_createPage("home_two", home);

		home.append("<div id=\"home_fade\"></div>");

		$(".tooltip").hover(_tooltip_over, _tooltip_off);
		$(".clickme").click(_clickMe_click);
		$(".tooltip a").click(function(evt) {
			evt.preventDefault()

			var href = $(this).attr("href").split("/");
			goTo(href[1], href[2]);
		});
	};

	var _show = function() {
		$("#home").css({
			display: "block"
		}).pan({
			children: "#" + _focus
		});

		$("#home_fade").fadeOut();

		if (!$.browser.msie && $.browser.version < 7) {
			_pulseAll();
		}
	};

	var _hide = function() {
		_stopPulse();

		$("#home_fade").css({
			display: "block"
		});

		$("#home").pan(false).css({
			display: "none"
		});
	};

	// Private Event Handlers
	var _tooltip_over = function(evt) {
		var $this = $(this);
		if ($this.data(c_action) != true) {
			$this.data(c_action, true);

			var topBot = $this.find(".tt_top, .tt_bot");
			var mid = $this.find(".tt_mid");
			var plus = $this.find(".tt_plus");
			var content = mid.children().css({
				display: "none"
			});

			var topBot_callback = function() {
				content.css({ display: "block" });
				$this.data(c_action, false);
			};

			var i = 0;

			topBot.fadeIn(function() {
				if (i++ == 0) {
					$this.css({
						height: "195px"
					});

					if ($this.hasClass("tl") || $this.hasClass("tr")) {
						mid.stop().slideDown(topBot_callback);
					}
					else {
						var startPoint = $this.data(c_startPoint);
						var endPoint = null;
						if (startPoint == null) {
							startPoint = $this.position().top;
							$this.data(c_startPoint, startPoint);

							endPoint = startPoint - 155;
							$this.data(c_endPoint, endPoint);
						}
						else {
							endPoint = $this.data(c_endPoint);
							if (endPoint == null) {
								endPoint = startPoint - 155;
								$this.data(c_endPoint, endPoint);
							}
						}

						mid.css({
							display: "block"
						});

						$this.stop().animate({
							top: endPoint
						}, {
							step: function(now, evt) {
								var pos = evt.start - Math.ceil(now);
								plus.css({
									top: 10 + pos
								});
								mid.css({
									height: pos
								});
							},
							complete: topBot_callback
						});
					}
				}
			});
		}
	};

	var _tooltip_off = function(evt) {
		var $this = $(this);
		setTimeout(function() {
			if ($this.data(c_action) != true) {
				$this.data(c_action, true);

				var topBot = $this.find(".tt_top, .tt_bot");
				var mid = $this.find(".tt_mid");
				var plus = $this.find(".tt_plus");

				var topBot_callback = function() {
					mid.css({
						display: "none"
					});

					$this.css({
						height: "40px"
					});

					var i = 0;
					topBot.stop().fadeOut(function() {
						if (i++ == 0) {
							$this.data(c_action, false);
						}
					});
				}

				mid.children().css({ display: "none" });

				if ($this.hasClass("tl") || $this.hasClass("tr")) {
					mid.slideUp(topBot_callback);
				}
				else {
					var startPoint = $this.data(c_startPoint);
					if (startPoint != null) {
						$this.stop().animate({
							top: startPoint
						}, {
							step: function(now, evt) {
								var pos = evt.end - Math.ceil(now);
								plus.css({
									top: 10 + pos
								});
								mid.css({
									height: pos
								});
							},
							complete: topBot_callback
						});
					}
				}
			}
		}, 1000);
	};

	var _clickMe_click = function(evt) {
		evt.preventDefault();

		var home = $("#home");
		home.pan(false).find(".flash, .tooltips").css({ display: "none" });

		var current = $("#" + _focus);
		var nextId = _focus == "home_one" ? "home_two" : "home_one";
		var next = $("#" + nextId);
		var isLeft = $(this).hasClass("cm_left");

		var homeWidth = home.width();
		var currentWidth = current.width();
		var nextWidth = next.width();

		next.css({ left: (isLeft ? -(nextWidth) : homeWidth) + "px" }).css({ display: "block" });

		current.animate({
			left: isLeft ? homeWidth : -currentWidth
		}, {
			speed: 5000,
			step: function(now, evt) {
				var pos = Math.ceil(now);

				next.css({ left: isLeft ? pos - nextWidth : pos + currentWidth });
			},
			complete: function() {
				_focus = nextId;

				current.css({ display: "none" });

				home.pan({
					children: "#" + _focus
				}).find(".flash, .tooltips").css({ display: "block" });

				pageTracker._trackPageview("/home/" + _focus);
			}
		});
	};

	return {
		// Public Properties
		isLoaded: function() {
			return _loaded;
		},
		type: "home",
		// Public Methods
		load: function() {
			if (!_loaded) {
				_init();
				_loaded = true;
			}
			_show();
		},
		show: _show,
		hide: _hide
	};
} ();