/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *  
 * NOTE: Edited heavily by mikee. No need to put anchors in there because it didn't make sense to link to one of the two images
 * I've switched it around slightly so it checks them all for longdesc at the start, does the logic, then adds the events
 * Check subverion for changes 
 *  
 */

var xOffset = 10;
var yOffset = 30;
function imagePreview(){	

	$("div.colour img,div.colour span").each(function (){
	   if ($(this).attr("longdesc") != ""){
	   
	       var urlString = $(this).attr("longdesc");
	       // split the longdesc
	       var images = urlString.split(";");
	       // if there's images found..
	       if (images.length > 0){

                // build up the html. there's no point building this every time we hover.
                // we'll still have scope to access this html variable
                var html = "<p id='preview'>";
                for (i=0; i<images.length; i++){
                   html += "<img src='"+ images[i] +"' alt='Image preview' />";
                }
                html += "</p>";

	       	    // add a omouseenter event
                 $(this)
                 .mouseenter(function(e){
                		$("body").append(html);								 
                		rePosition($("#preview"),e);
                								
                 })
                 .mouseleave(function (){   
	                  	$("#preview").remove();
                 })
                 .mousemove(function (e){
            		     rePosition($("#preview"),e);
                 });
	       }
       }
    });	
}

function rePosition(preview,e){
    preview.css("position", "absolute")
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px");
}


// starting the script on page load
$(document).ready(function(){
	imagePreview();
       $('a.email-when-available-link').overlay({
            top: 272, 
		    expose: { 	 
		        // you might also consider a "transparent" color for the mask 
		        color: '#000', 
		        // load mask a little faster 
		        loadSpeed: 200, 
		        // highly transparent 
		        opacity: 0.5 
		    } ,
		    closeOnClick: true, 
		    onBeforeLoad: function() {
		    }
       });
       
});