// JavaScript Document

// requires jquery-latest.min.js

// version 1.0 written by Suzie Blackman 7 March 2008
// version 2.0 written by Alex Pilcher July 2009

// RELATED FILES
/* 
The following files are modified version of this script. Please transfer fixes and enhancements to these files when updating the current script:
 /javascripts/jquery.tatelightbox.js
 /javascripts/jquery.tatepopwin.js
 /shop/js/jquery.prod_images.js

*/

// USAGE 

/* 
Displaying larger versions of images with credit lines.
*/

// DEPLOYMENT

/*

* example /stives/exhibitions/maeckelberghe/default.shtm

* requires jquery-latest.min.js

* Add the script to the document:
<script src="/javascripts/jquery.tateenlargeimg.js" type="text/javascript"></script>

* Add HTML in the form:
<div class="tate_enlarge_img">
<a href="[URL of large image]">
<img alt="[ALT text here]" height="158" src="/images/cms/xib/13261w_margomaeckelberghecoastalreflections.jpg" width="272" />
<span class="credit">[Full credit line]</span>
<span class="tee_enlarge_link">enlarge</span></a></div>

*/

 
// CUSTOM CSS
// ~~~~~~~~~~

// All the necessary CSS is in master_scalable.css but it can be customised.

// For the 'pop-up'
// .tee_loading - the div that displays the loading graphic
// .tee_enlarged - the div that displays the resized image and credit
// .tee_enlarged .credit - the credit line for the enlarged image
// .tee_enlarged .tee_close div that holds the close link
// .tee_enlarged .tee_close a - link to close the enlarged image
// Note: All the components within .tee_enlarged (the large image, credit and 'close' link) are absolutely positioned. The .tee_enlarged div is explicitly sized before it is displayed to accomodate the contents).

// For the static pgae:
// .tee_enlarge_link - link below the small image
// .tate_enlarge_img - wrapper for enlargable images
// .tate_enlarge_img .credit - credit line for enlargable images


// COMPATIBILITY

/*

* IE5.5 and below, not functional

*/

// GLOBAL VARIABLES
// ~~~~~~~~~~~~~~~~

// template width (can be overridden locally)
var tate_enlarge_content_width = 749;
// any left-hand padding (can be overridden locally)
var tate_enlarge_content_width_offset = 0;
// don't cover the header bar etc (can be overridden locally)
var tate_enlarge_content_height_offset = 0;
// maximum allowed dimensions for displaying enlarged image (can be overridden locally)
// smaller images will be displayed at their natural size
// set to -1 when you don't wish to impose an upper limit
var max_img_h = 512;
var max_img_w = 512;

// apply action to 'close' button (also to the image itself)
function close_button(){
	$(".tee_enlarged .tee_close a, #shadebox").click(function () { 
      	$(".tee_enlarged").remove();
		// Show problematic elements
		$('embed, object, select').css({ 'visibility' : 'visible' });
		$('#shadebox, .tee_enlarged').fadeTo(400,0,function(){
			$('#shadebox').css('display','none');
		});											
		return false;
    });	
} // close_button ends


//initialisation funciton 
function init_tate_enlarge_img(){

	// add the div which will overlay the page contents when the enlarge box opens
	$('body').append('<div id="shadebox"></div>');

	// look for class tate_enlarge_img and bind events to the <a>
	$(".tate_enlarge_img").each(function(index){			
		// bind action to 'enlarge image' links
		$(this).children("a").click(function(){
			create_overlay(index);
			// disable the link
			return false;
		});
	});
} // init_tate_enlarge_img ends


// bind actions to links to create overlay 
function create_overlay(index){

	// holds dimensions of the enalarged image
	var lg_img_h = 0;
	var lg_img_w = 0;
	// holds natural dimensions of the enlarged image (to be tested against desired dimensions)
	var actual_h = 0;
	var actual_w = 0;
	// holds dimensions of overlay box when displaying large image
	var img_box_h = 0;
	var img_box_w = 0;
	// holds dimensions of caption when displaying large image
	var img_cap_h = 0;
	var img_cap_w = 0;

	// get image attributes
	var img_url = $(".tate_enlarge_img:eq("+index+") a").attr("href");
	var credit = $(".tate_enlarge_img:eq("+index+") .credit").html();
	var alt = $(".tate_enlarge_img:eq("+index+") img").attr("alt");
					
	//destroy all previous instances
	$(".tee_loading").remove();
	$(".tee_enlarged").remove();
		
	// Hide problematic elements
	$('embed, object, select').css({ 'visibility' : 'hidden' });
	if ($.browser.safari) {
		// Safari for Mac seems to handle 'position: fixed' differently! 
		$('#shadebox').css({'position':'absolute','min-height':'100%','min-width':'100%','height':$(document).height()+'px','width':$(document).width()+'px'});
	}
	if (( $.browser.msie ) && (parseInt($.browser.version,10) == 6)) { 
		// IE6 can't handle 'position: fixed' or 'min-height' 
		$('#shadebox').css({'position':'absolute','height':$(document).height()+'px','width':$('body').width()+'px'});
		$(window).resize(function(){
			$('#shadebox').css({'position':'absolute','height':$(document).height()+'px','width':$('body').width()+'px'});
		});
	}
	$('#shadebox').fadeTo(200,0.7,function(){
		$('#shadebox').css('display','block');
		
		// create the loading image
		$("body").append("<div class='tee_loading'><span>Loading</span></div>");	
		// position it
		$(".tee_loading").tee_centre(0);
		//reveal it
		$(".tee_loading").show();
							
		// preload the image
		large_image = new Image();
		large_image.onload = function(){
			
			//display the image and remove the loading div
			$("body").append("<div class='tee_enlarged'></div>");
					
			// add a close button and bind the close event
			$(".tee_enlarged").append("<div class='tee_close text'><a href='#'><span></span>close</a></div>");

			// add the image and set the image properties
			$(".tee_enlarged").append("<div class='tee_img'><img /></div>");
			$(".tee_enlarged img").attr("alt", alt);
			$(".tee_enlarged img").attr("src", img_url);
			
			// get the dimensions of the large image
			actual_w = $(".tee_enlarged img").width();
			actual_h = $(".tee_enlarged img").height();
			
			// expand the dimension limits when we have a larger window.
			var window_height = $(window).height();
			var window_width = $(window).width();
			var this_max_h = max_img_h; var this_max_w = max_img_w;
			if ((max_img_h > 0) && (max_img_h <= (window_height - 160))) { this_max_h = (window_height - 160); }
			if ((max_img_w > 0) && (max_img_w <= (window_width - 70))) { this_max_w = (window_width - 70); }

			if ((actual_h > 0) && (actual_w > 0)) { // we have got some dimensions from the large image file
				lg_img_w = actual_w; lg_img_h = actual_h; // use actual dimensions as a default
				if (this_max_w > 0) { lg_img_w = Math.min(actual_w, this_max_w); } // check we haven't exceeded max width
				if (this_max_h > 0) { lg_img_h = Math.min(actual_h, this_max_h); } // check we haven't exceeded max height
				// correct discrepencies in the scaling (from imposing a limit on one dimension)
				if ((actual_h/actual_w) > (lg_img_h/lg_img_w)) { lg_img_w = lg_img_h*(actual_w/actual_h); }
				else if ((actual_h/actual_w) < (lg_img_h/lg_img_w)) { lg_img_h = lg_img_w*(actual_h/actual_w); }
			} else {
				// Use dimensions of the thumbnail image to work out height:width ratio of teh large image
				// (A precaution only. In practice, this backup option doesn't seem necessary.)
			 	var img_w = $(".tate_enlarge_img:eq("+index+") img").width();
			 	var img_h = $(".tate_enlarge_img:eq("+index+") img").height();
				// we need to use *some* target size, so override the 'no upper limit' option
				if (this_max_h < 1) { this_max_h = 512; }
				if (this_max_w < 1) { this_max_w = 512; }
				lg_img_h = this_max_h;
				lg_img_w = this_max_h/img_h * img_w;
			 	if (lg_img_w > this_max_w) {
					lg_img_w = max_img_w;
					lg_img_h = this_max_w/img_w * img_h;
			 	}
			}
			// set the dimensions of the large image
			lg_img_w = Math.round(lg_img_w); lg_img_h = Math.round(lg_img_h); 
			$(".tee_enlarged img").css({'height':lg_img_h,'width':lg_img_w});
			// dimensions of container box
			img_box_w = lg_img_w + 30;
			// dimensions of caption
			img_cap_w = lg_img_w;
		
			// adds the credit
			$(".tee_enlarged").append("<div class='tee_credit text' />");
			$(".tee_credit").append(credit);

			// determine the height of the caption (and thus the necessary height of container)
			$("body").append('<div class="img_cap text testdiv" style="position:absolute;top:-1000px;padding:0;width:'+img_cap_w+'px">'+credit+"</div>");
			img_cap_h = $(".img_cap").height();
			img_box_h = (lg_img_h + 55 + img_cap_h);
			$('.testdiv').remove();
				
			// remove the loading div and display the enlarged image div
			$(".tee_loading").remove();
			
			// set the initial size of the conatiner and then centre it
			// create container for large image
			$(".tee_enlarged").height(img_box_h);
			$(".tee_enlarged").width(img_box_w);
			close_button();
			$(".tee_credit").css({'display':'block','width':img_cap_w+'px','top':(lg_img_h+40)+'px'});
			$(".tee_enlarged").tee_centre(0);

		} // end load image
			
		large_image.src = img_url;
	
	}); // end of callback from fadeIn of #shadebox
										
} // create_overlay ends

jQuery.fn.extend({
	tee_centre: function(speed) {
		var top_position = Math.max($(window).scrollTop() + (($(window).height() - $(this).outerHeight())/ 2), tate_enlarge_content_height_offset);
		// don't go over the left margin and don't overlap the header
		var available_width = Math.min(tate_enlarge_content_width, $(window).width())
		var left_position = tate_enlarge_content_width_offset;
		if ($(this).outerWidth() < available_width) { left_position = $(window).scrollLeft() + ((available_width - $(this).outerWidth()) / 2); }
		left_position = Math.max(left_position, tate_enlarge_content_width_offset);
		// Animate if 'speed' is set to a value > 0. Otherwise, just jump to new position.
		if (speed > 0) { $(this).animate({"position":"absolute","top":Math.round(top_position) + "px","left":Math.round(left_position) + "px"},speed,'swing'); }
		else { $(this).css({"position":"absolute","top":Math.round(top_position) + "px","left":Math.round(left_position) + "px"}); }
		return;
	}
});


// run initialisation function when doc loads
$(document).ready( function(){
  	init_tate_enlarge_img();				
} ); // end document onload