/**
 * Lens.js
 * @fileOverview This file contains code needed for lens pages.
 * @version 0.1
 * @author LBi - http://www.lbi.com/en
 * @requires jQuery Core 1.3.2 - http://www.jquery.com/
 */

/*jslint eqeqeq: true, undef: true */
/*global $, jQuery, BTT, window, document, swfobject, confirm, prompt  */



/**
 * Object that stores functions needed on lens pages
 * @namespace Object that stores functions needed on lens pages
 * @member BTT
 */
BTT.Lens = {
	
	/**
	 * Gives search panel on homepage & error page focus
	 */
	giveSearchPanelFocus: function () {
		$('input#searchTS')
			.val("")
			.focus();
	},
	
	
	/**
	 * Class that defines attributes and methods for a lens panel
	 */
	LensPanel: function( id ){
		
		// Test for successful initiation
		if ($("#" + id) === "") { return true; }
		
		// Private attributes
		var $html = $("#" + id) || "",
			$rollOverPanel = $('div.layoutAreaOverlay', $html),
			that = this;  // For sending object to jQuery's event functions
			
		// Public attributes
		this.getHTML = $html[0];
		this.getRollOverPanelHTML = $rollOverPanel[0];
		this.getID = id;
		this.arrowSelector = '.JS_linkArrow';
		this.hintTextSelector = 'div.contentAreaImagePanel ul';
		this.rollPanelHiddenClass = 'JS_hidden';
		this.containerSelector = '#lensParent';
		
		
		// Public Methods
		this.giveArrow = function(){
			$(this.hintTextSelector, this.getHTML).after('<div class="JS_linkArrow hidden"></div>');
		};
		this.getArrow = function(){
			return $(this.arrowSelector, this.getHTML);
		};
		this.showArrow = function(){
			this
				.getArrow()
				.removeClass("hidden")
				.fadeIn(300);
		};
		this.hideArrow = function(){
			this
				.getArrow()
				.fadeOut(300,
					function(){
						$(this).addClass("hidden");
					}
				);
		};
		this.isArrowShowing = function(){
			return (!this.getArrow().hasClass("hidden"));
		};
		this.showHintText = function(){
			$(this.hintTextSelector, this.getHTML)
				.removeClass("hidden")
				.hide()
				.slideDown(20);
		};
		this.hideHintText = function(){
			$(this.hintTextSelector, this.getHTML)
				.slideUp(200, function(){
					$(this)
						.show()
						.addClass("hidden");
				});
		};
		this.showRollOverPanel = function(e){

			$rollOverPanel.removeClass(this.rollPanelHiddenClass); // made visible early to get true dimensions

			// Vars
			// c = container
			// p = panel
			// rp = roll over panel
			// m = mouse coordinates on document
			// ms = mouse coordinates on screen
			// s = screen
				
			var wasMouseClicked = function(){
					return typeof e.clientX !== "undefined" ? true : false;
				},
			
				cX = $(this.containerSelector)[0].offsetLeft,
				cY = $(this.containerSelector)[0].offsetTop,
				
				pX = this.getHTML.offsetLeft,
				pY = this.getHTML.offsetTop,
				pW = this.getHTML.offsetWidth,
				pH = this.getHTML.offsetHeight,
				
				sX = (function(){
						if (typeof window.scrollX === "undefined") {
							return $('html')[0].scrollLeft; 
						} else {
							return window.scrollX;
						}
					}()),
				sY = (function(){
						if (typeof window.scrollY === "undefined") {
							return $('html')[0].scrollTop; 
						} else {
							return window.scrollY;
						}		   
					}()),
				sW = $(window).width(),
				sH = $(window).height(),
				
				mX = wasMouseClicked() ? e.pageX : cX + pX + 50,
				mY = wasMouseClicked() ? e.pageY : cY + pY,
				msX = wasMouseClicked() ? e.clientX : mX - sX,
				msY = wasMouseClicked() ? e.clientY : mY - sY,
				
				rpW = this.getRollOverPanelHTML.offsetWidth,
				rpH = this.getRollOverPanelHTML.offsetHeight,
				rpX = 0,
				rpY = 0;

			function tooLeft() {
				return msX < 0;
			}
			function tooHigh() {
				return msY < 0;
			}
			function tooTall() {
				return rpH + 10 > sH;
			}
			function tooWide() {
				return rpW + 10 > sW;
			}
			function tooLow() {
				return rpH + 10 > sH - msY;
			}
			function tooRight() {
				return rpW + 10 > sW - msX;
			}
			
			if (tooLeft() || tooWide()) {
				rpX = mX - msX - cX - pX + 10;
			} else if (tooRight()) {
				rpX = sW + mX - msX - cX - pX - rpW - 10;
			} else {
				rpX = mX - cX - pX + 10;
			}
			
			if (tooHigh() || tooTall()) {
				rpY = mY - msY - cY - pY + 10;
			} else if (tooLow()) {
				rpY = sH + mY - msY - cY - pY - rpH - 10;
			} else {
				rpY = mY - cY - pY - 10;
			}

			// CSS manipulation	
			$rollOverPanel
				.css({
					left: rpX,
					top: rpY
				});
		};
		this.hideRollOverPanel = function(){
			$rollOverPanel.addClass(this.rollPanelHiddenClass);
		};
		this.isRollOverPanelVisible = function(){
			return !$rollOverPanel.hasClass(this.rollPanelHiddenClass);
		};
		this.bringToFront = function(){
			$html.css("z-index", "200");
		};
		this.removeFromFront = function(){
			$html.css("z-index", "");
		};
		
		// Events
		this.onLoad = (function(){
			that.giveArrow();
		}());
		this.onHover = function(e){
			if (!that.isArrowShowing()) {
				that.showArrow();
				that.showHintText();
			}
		};
		this.onHoverOut = function(e){
			that.hideArrow();
			that.hideHintText();
			that.hideRollOverPanel();
			that.removeFromFront();
		};
		this.onBlur = function(e){
			that.hideArrow();
			that.hideHintText();
		};
		this.onClick = function(e){
			if (!that.isRollOverPanelVisible()) {
				that.bringToFront();
				that.showRollOverPanel(e);
			} else {
				that.hideRollOverPanel();
				that.removeFromFront();	
			}	
		};
		this.onEnterPress = function(e){
			// Takes action when space bar or enter key are pressed
			if (e.which === 13 || e.which === 32) {
				var featuredLink = $rollOverPanel.find('.viewFeatured:first');
				if (featuredLink.length === 1) {
					location.href = featuredLink[0].href;
				}
			} else {
				that.hideRollOverPanel();
				that.removeFromFront();	
			}
		};

		// Private methods
		$html.hover(this.onHover, this.onHoverOut);
		$html.focus(this.onHover);
		$html.click(this.onClick);
		$html.blur(this.onBlur);
		$html.keypress(this.onEnterPress);
			
		return true;
	},
	
	/**
	 * Sets up up the lens panel behaviours
	 */
	setupLensPanels: function() {
		var allPanels = $('.JS_lensPanel');
		
		// Setup to lens panels
		allPanels.each(function(i){
			this["lens" + i] = new BTT.Lens.LensPanel( $(this)[0].id );
		});
		
	},
	
	
	/**
	 * Initialises the lens page
	 */
	init: function(){
		this.setupLensPanels();
		this.giveSearchPanelFocus();
	},
	
	
	/**
	* IE6 - Only: Lens page 'JS_lensPanel:hover' state emulation
	* adds an addition class 'IE_lensPanelHover' for IE6 to emulate the :hover state
	* this function is called from IE6.JS, if the lensParent class exist on the target page
	*/	
	ieRollover: function () {
		$('.JS_lensPanel .contentAreaImagePanel ').each(function(i){
			var thisImgWidth = $(this).find('img').width(),
				thisAreaOverlay = $(this).find('div.contentAreaOverlay'),
				thisPadding = Number( $(thisAreaOverlay).css("padding-left").replace("px", "") ) + 
				Number( $(thisAreaOverlay).css("padding-right").replace("px", "") );
			
			$(thisAreaOverlay).width( thisImgWidth - thisPadding );
		});
	}
};

	
/* Initialise when the DOM is ready
-------------------------------- */
$(document).ready(function(){
	BTT.Lens.init();
});

