/////////////////////////////////////////////////////////////////
//JQUERY CODE - Created by Dominic Laurence September 2009///////
/////////////////////////////////////////////////////////////////
//Copyright Netcel Ltd 2009

$(document).ready(function() {
	if($('#actionPledgeArea').length>0) {
		homePageSlide();
	}
	if($('#wall').length>0) {
		mediaWall();
	}
    if ($('#openBtn').length>0) {
        $('#openBtn').removeAttr('href');
    }
});
///////////////////////////
//FLASH ARROW CODE START
///////////////////////////
function flashArrow() {
	var speed = "medium";
	$("#flashArrow").fadeIn(speed)
		.fadeOut(speed)
		.fadeIn(speed)
		.fadeOut(speed)
		.fadeIn(speed)
		.fadeOut(speed)
		.fadeIn(speed)
		.fadeOut(speed)
}
//HOMEPAGE SLIDE END
//------------------

///////////////////////////
//LOADING CODE START
///////////////////////////
var load = false;
function loading() {
	var loadingImg = $('#loader');
	if(load) {
		$(loadingImg).hide();
	} else {
		$(loadingImg).show();
	}
	load=!load;
}
//LOADING END
//------------------





///////////////////////////
//HOMEPAGE SLIDE CODE START
///////////////////////////
var itsOpen = false;
var x;
function homePageSlide() {
	//show the open button (default is set to hidden for if javascript is turned off)
	$('#openBtn').show('slow');
        
	 $('#openBtn').click(function() {
	     toggleSlide(x);
	 });
	 
}
function toggleSlide(thisVar) {
		itsOpen = thisVar;
	     if(itsOpen){
		     //close
		     $('#actionPledgeArea').animate({height: "38px"}, 1500, "easeOutQuint");
		     $('#openBtn').css('background-image', 'url(/images/getSerious/openBtn.gif)');
	     } else {
		     //open
		     $('#actionPledgeArea').animate({height: "416px"}, 1500, "easeOutQuint");
		     $('#openBtn').css('background-image', 'url(/images/getSerious/closeBtn.gif)');
	     }
	     x=!thisVar;
}
//HOMEPAGE SLIDE END
//------------------

///////////////////////////
//MEDIA WALL CODE START
///////////////////////////
function mediaWall() {
	//cache main selectors
	var thisImg = $('#wall li img');
	var largeImagesArea= $('#largeImagesArea');
	var thisLargeImageDiv;
	var currentIndex;
	var largeImg;	
	var thisEl;	
	$(thisImg).mouseover(function() {
		//set the necessary variables	
		thisEl = $(this);
		currentIndex = $(thisEl).parent().prevAll().length;
		thisLargeImageDiv = $('#largeImagesArea div:eq('+currentIndex+')');
		largeImg = $('#largeImagesArea div:eq('+currentIndex+') img');
		//get the absolute position of this THUMBNAIL image (top and left values both stored in this object)
		var thumbPos = $(thisEl).offset();
		//get the width of the THUMBNAIL image
		var thumbWidth = $(thisEl).outerWidth();
		//add the thumnail width to the left position of the thumnail (to position large image to the right of thumnail)
		thumbPos.left+=thumbWidth;
		//use the above value to position the large image
		thisLargeImageDiv.css(thumbPos);
		thisLargeImageDiv.css(thumbPos);
		//show the large image - this needs to be done before we can determine the large image width (next line)
		thisLargeImageDiv.show();
		//get the width of the large image
		var largeImgWidth = largeImg.outerWidth();
		//get the height of the large image
		var largeImgHeight = largeImg.outerHeight();
		//float the image to the left of its container
		largeImg.css('float', 'left');
		//get the remaining window WIDTH space (to be used to see if the large Image should be displayed to the left or right of thumbnail)
		var widthRemaining = $(window).width()-parseInt(thisLargeImageDiv.css('left'));
		//check to see if the large image's width exceeds the remaining window space, if so, position the large image to the left of the thumbnail
		if(widthRemaining<largeImgWidth) {
			//reset the thumbnail left position (take off the "thumbWidth" added earlier
			var finalXPos = (thumbPos.left-thumbWidth);
			//set the coordinates of the large image to the left of the thumbnail
			finalXPos-=thisLargeImageDiv.outerWidth();
			//use the above value to position the left coordinates of the large image
			thisLargeImageDiv.css('left', finalXPos);
			//float the image to the right of its container
			largeImg.css('float', 'right');
		}
		//get the remaining window HEIGHT space (to be used to see if the large Image should be displayed at the bottom of the window area)
		//use scrollTop in the calculation to determine the number of pixels the window has been scrolled
		var heightRemaining = $(window).height()-(thumbPos.top-$(window).scrollTop());
		//check to see if the large image's height exceeds the remaining window space, if so, keep it in view
		if(heightRemaining<largeImgHeight) {
			//calculate the new position
			var finalYPos = ($(window).height()+$(window).scrollTop())-largeImgHeight;
			//use the above value to position the top coordinates of the large image
			thisLargeImageDiv.css('top', finalYPos);
		}
		//check to see if the large image's height exceeds the remaining window space, if so, keep it in view
		if(thumbPos.top<$(window).scrollTop()) {
			thisLargeImageDiv.css('top', $(window).scrollTop());
		}
	});
	$(thisImg).mouseout(function() {
		 thisLargeImageDiv.hide();
	});
}
//MEDIA WALL END
//------------------