/*
===============================================================
Unobtrusive Hovering Javascript
===============================================================
AUTHOR			: Christian Wach <needle@haystack.co.uk>
LAST MODIFIED	: 07/11/2007
DEPENDENCIES	: jquery.js
---------------------------------------------------------------
NOTES

We may wish to amend all of this...

---------------------------------------------------------------
*/



// hovering item clicked status
var clicked = false;

// init title
var title = '';



// utility to find window height
function get_window_height() {

	if (window.innerHeight) {
		window_height = window.innerHeight;
	}
	else if (document.documentElement && document.documentElement.scrollTop) {
		window_height = document.documentElement.clientHeight;
	}
	else if (document.body) {
		window_height = document.body.clientHeight;
	}
	return window_height;

}



// utility to find scroll position
function get_scroll_position() {

	if (window.innerHeight) {
		scroll_position = window.pageYOffset;
	}
	else if (document.documentElement && document.documentElement.scrollTop) {
		scroll_position = document.documentElement.scrollTop;
	}
	else if (document.body) {
		scroll_position = document.body.scrollTop;
	}
	return scroll_position;

}



// show hovering item
function show_hover( item ) {

	// set our calling div's border
	$(item).find('img').css( 'border', '1px solid #900574' );
	$(item).css( 'border', '1px solid #900574' );
	$(item).css( 'background-color', '#900574' );
	
	// get the title
	title = $(item).attr("title");
	
	// get our target div
	var target = "div#" + title;
	
	// remove the title attribute to prevent it showing
	$(item).attr("title", '');
	
	// prepend an iframe to cover selects
	$(target).prepend('<iframe id="hover_iframe"></iframe>');
	
	// get position of calling element
	var callingOffset = $(item).offset();
	
	// target the RHS of the calling element + twice the padding + twice the border
	var popupRight = callingOffset.left + $(item).width() + 8 + 2;
	
	// target the LHS of the calling element - popup width - twice the padding
	var popupLeft = callingOffset.left - $(target).width();
	
	// RHS of popup
	var rightOfPopup = popupRight + $(target).width();
	
	// Bottom of popup
	var bottomOfPopup = callingOffset.top + $(target).height();
	
	// does it fall off the bottom of the window?
	if ( bottomOfPopup > ( get_window_height() + get_scroll_position() ) ) {
		// shift it upwards by the difference plus the padding
		var bottomOffset = bottomOfPopup - ( get_window_height() + get_scroll_position() );
	} else {
		// no offset
		var bottomOffset = 0;
	}
	
	// set top of popup
	popupTop = callingOffset.top - bottomOffset;
	
	// set css attributes
	$(target).css( 'position', 'absolute' );
	$(target).css( 'z-index', '200' );
	
	// place item at top of the element
	$(target).css( 'top', popupTop + 'px' );
	
	// if we're beyond the right of the screen...
	if ( rightOfPopup > $(window).width() ) {
	
		// place item to the left of the element
		$(target).css( 'left', popupLeft + 'px' );

	} else {
	
		// place item to the right of the element
		$(target).css( 'left', popupRight + 'px' );
	
	}
	
	// show it
	$(target).show();

}



// hide hovering item
function hide_hover( item ) {

	// set our calling div's border
	$(item).find('img').css( 'border', '1px solid #ccc' );
	$(item).css( 'border', '1px solid #ccc' );
	$(item).css( 'background-color', '#efefef' );

	// restore the title attribute
	$(item).attr("title", title);
	
	// get out target div
	var target = "div#" + $(item).attr("title");

	// just hide it
	$(target).hide();

}



// only have this function when the document is loaded
$(function() {



	// define what happens when we hover over a thumbnail
	$("div.league_item_small").hover(
	
		// ------------------------------------------
		// mouse enter
		// ------------------------------------------
		function () {
		
			// only do this if nothing has been clicked
			if ( clicked == false ) {
		
				// show the hovering item
				show_hover( this );
			
			} else {
			
				// unlock if we rollover another same element
				if ( clicked != this ) {
					
					// hide the hovering item
					hide_hover( clicked );
				
					// show the hovering item
					show_hover( this );
					
					// reset clicked
					clicked = false;
				
				}
		
			}
			
		},
		
		// ------------------------------------------
		// mouse out
		// ------------------------------------------
		function () {

			// only do this if nothing has been clicked
			if ( clicked == false ) {
		
				// hide the hovering item
				hide_hover( this );
			
			}

		}
	
	);
	
	
	
	// ------------------------------------------
	// mouse up
	// ------------------------------------------
	// if we click an item, hold it visible until unclicked
	// or until another item is rolled over
	// ------------------------------------------
	$("div.league_item_small").click( function() {
	
		// toggle clicked status
		if ( clicked == false ) {
		
			// save our target div as flag
			clicked = this;

			// set our calling div's border
			$(this).find('img').css( 'border', '1px solid red' );
			$(this).css( 'border', '1px solid red' );
			$(this).css( 'background-color', 'red' );
			
		} else {
		
			// only unlock if we click the same element
			if ( clicked == this ) {
		
				// set our calling div's border
				$(this).find('img').css( 'border', '1px solid #ccc' );
				$(this).css( 'border', '1px solid #ccc' );
				$(this).css( 'background-color', '#efefef' );

				// unlock
				clicked = false;
				
			}

		}
		
	});


});