/**
 * @fileoverview Create functionality for 'our clients' section of Northstar site
 * 
 * @author PG
 * 
 */
var ourClients = function(){
	
	/*
	 * collection of all client icon list elements
	 * obj
	 */
	var $clientList = {},
	
	/*
	 * collection of all client icon list elements
	 * obj
	 */
	$clients = {},
	
	/*
	 * collection of all popups
	 * obj
	 */
	$popups = {},
	
	/*
	 * index of popup currently being displayed
	 * int
	 */
	currentPopup = null,
	
	
	/**
	 * Initialise
	 * @return void
	 * @public
	 */
	init = function() {

		// save global variables (for later use)
		$clientList = $("ul#client-list"); 
		$clients = $clientList.find("li");
		$popups = $clientList.find('div.pop-up');

		// add listener for clicks on all client icons
		// loop to find the selected logo index (for positioning)
		$clients.each(function(counter){
			$(this).find('a.logo').bind('click', function(e){
				e.preventDefault();
				displayPopup(this, counter);
			});
		});
		
		// add a close button to all pop-ups
		var $close = $('<a />')
			.attr('href', '#')
			.attr('class', 'close')
			.appendTo($popups)
			.bind('click', function(e){
				e.preventDefault();
				closePopup(this);
			});
	},
	
	
	/*
	 * show the selected popup
	 */
	displayPopup = function(el, counter) {

		// condition : only show popup if no pop-up is currently displayed
		if (currentPopup != counter && !$clientList.hasClass('selected')) {
		
			// set current popup
			currentPopup = counter;
		
			// hide any old popups
			$clients.removeClass('selected');

			// display popup
			$(el).parent().addClass('selected');

			// ensure popup doesn't disappear when you roll out
			$clientList.addClass('selected');
		
			// position the popup
			positionPopup();
		}
	},
	
	
	/*
	 * hide all popups
	 */
	closePopup = function(el) {
		$clients.removeClass('selected');
		$clientList.removeClass('selected');
		currentPopup = null;
	},
	
	
	/*
	 * position the popup
	 */
	positionPopup = function() {
	
		var logoPosition = $($clients[currentPopup]).position(),
			logoOffsetLeft = logoPosition.left,
			logoOffsetTop = logoPosition.top,
			logoWidth = $clients[currentPopup].offsetWidth,
			logoHeight = $clients[currentPopup].offsetHeight,
			popupWidth = $popups[currentPopup].offsetWidth,
			popupHeight = $popups[currentPopup].offsetHeight,
			clientListWidth = $clientList.width(),
			clientListHeight = $clientList.height();
		
		// condition : position popup to the left or right of logo?
		if (logoOffsetLeft + logoWidth <= clientListWidth - popupWidth) {
			// right of logo
			$popups[currentPopup].style.left = logoOffsetLeft + logoWidth + "px";
		} else {
			// left of logo
			$popups[currentPopup].style.left = logoOffsetLeft - popupWidth + "px";
		}
		
		// condition : position popup above or below the logo?
		if (logoOffsetTop <= clientListHeight - popupHeight) {
			// top
		} else {
			// bottom
			$popups[currentPopup].style.top = "auto";
			$popups[currentPopup].style.bottom = 0;
		}
	};
	
	
	
	
	/**
	 * Return value, expose certain methods above
	 */
	return {
		init: init
	};
}();


/*
 * Example call:

 $(document).ready(function(){
	ourClients.init();
 });

*/