/*
 * 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
 *
 * Edits by Jon Hinson (http://jonathanhinson.com) to customize the tooltip
 */

this.imagePreview = function(){
	/* CONFIG */
		
		xOffset = 0;
		yOffset = 0;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */	
	$("a.preview").hover(function(){
    var hoverImg = $(this).find('img');
    var hoverImgOffset = hoverImg.offset({border:true,padding:true});
    
    //alert($('#thumboverlay'));                      
    $('#thumboverlay').remove();
 //   alert("Offset Left : "+hoverImgOffset.left);
   
   	if (window.ActiveXObject){
   		//For IE
   		 $('body').append("<div id='thumboverlay'><div>Click to Enlarge</div></div>"); 
		 $('#thumboverlay').css({top:hoverImgOffset.top,
                          left:hoverImgOffset.left, // Had to add the 139 to make up for padding in client css
                          height:hoverImg.height(),
                          width:hoverImg.width()})
                    .find('div').css({'padding-top':(hoverImg.height()/2)-10+'px'});
	}else if (window.XMLHttpRequest){
		var version=navigator.userAgent.split("/"); 		 
		// if Mozilla, Safari etc    	 	
	    //$('div.photo').append("<div id='thumboverlay'><div>Click to Enlarge</div></div>");
	    $('body').append("<div id='thumboverlay'><div>Click to Enlarge</div></div>"); 
	    if(version[version.length-1]>= '3.0' || version[version.length-1]=='3.0.1'){ //Mozilla Firefox 3.0
 		   $('#thumboverlay').css({top:hoverImgOffset.top,
           left:hoverImgOffset.left, // Had to add the 139 to make up for padding in client css
           height:hoverImg.height(),
           width:hoverImg.width()})
           .find('div').css({'padding-top':(hoverImg.height()/2)-10+'px'});
	   }else{ //Other than Mozilla Firefox 3.0
		var scrOffset = (document.width-964)/2;
			$('#thumboverlay').css({top:hoverImgOffset.top,
            left:hoverImgOffset.left+scrOffset-4, // Had to add the 139 to make up for padding in client css
            height:hoverImg.height(),
            width:hoverImg.width()})
	       .find('div').css({'padding-top':(hoverImg.height()/2)-10+'px'});
	   }
    }
	
  
    
    $('#thumboverlay').show();
    },
	function(){
    var hoverImg = $(this);
    var hoverImgOffset = hoverImg.find('img').offset({scroll:false});
    var hoverOverlay = false;
    var photoid = this.id.substr(6);

	//START for Category and Subcategory fetch
    var imageId = this.name;
    //alert("categoryAndSubCategory:"+categoryAndSubCategory);
   // var catSubcatIndex = categoryAndSubCategory.indexOf("#");
    //var catValue = categoryAndSubCategory.substring(0,catSubcatIndex);
    //var subCatValue = categoryAndSubCategory.substring(catSubcatIndex+1,categoryAndSubCategory.length);
    //alert("categoryAndSubCategory Index:"+catSubcatIndex);
	//alert("categoryAndSubCategory CATEGORY:"+catValue);    
	//alert("categoryAndSubCategory SUB-CATEGORY:"+subCatValue);        
	//alert("Image Id:"+imageId);
	//END

    $('#thumboverlay').hover(function() {
      hoverOverlay = true;
      $(this).css({opacity:.5});
      $.getJSON('getphotos.do?id='+imageId, function(data) {
  			$("#preview").remove();
        
        
        var desc = "<div id='tooltipdesc-box'><div id='tooltipdesc-container'><div id='tooltipdesc'>"+data.data.description.substr(0,105)+"...</div></div></div>";
        // Right side of tooltip
  			var spec = '<div id="tooltiptxt"><dl>';
        if(data.data.location != "") {
          spec += '<dt>Location:</dt><dd class="norm">' + data.data.location + '</dd>';
        }
        if(data.data.systemsize != "") {
          spec += '<dt>System Size:</dt><dd class="norm">' + data.data.systemsize + ' kW</dd>';
        }
        if(data.data.kwh != "") {
          spec += '<dt>Annual kWh Production:</dt><dd class="norm">' + data.data.kwh + ' kWh</dd>';
        }
        if(data.data.co2 != "") {
          spec += '<dt>CO2 Emissions Avoided:</dt><dd class="norm">' + data.data.co2 + ' pounds</dd>';
        }
        if(data.data.description != "") {
          spec += '</dl>'+desc+'</div>';
        }
        
        // attach the entire tooltip to the html
        $("body").append("<div id='preview'><div id='toptooltip'><div><img id='toolphoto' src='images/gallery/lightbox-ico-loading.gif' /></div>"+ spec +"</div></div>");
        
				
				// Check to see if the preview would be cut off by the top of the screen. If so, display it below the thumbnail
				var prevTop = hoverImgOffset.top;
				if((prevTop-$(document).scrollTop()) < $("#preview").height()) {
					prevTop = hoverImgOffset.top + hoverImg.find('img').height() + 15;
				} else {
					prevTop = (hoverImgOffset.top - $("#preview").height() - 15);
				}

				var prevLeft = hoverImgOffset.left;
				
				if(($(document).width()-prevLeft) < $("#preview").width()+25) {
					prevLeft = hoverImgOffset.left - $("#preview").width() + 30;
				} else {
					prevLeft = hoverImgOffset.left + 30;
				} 
        // position the tooltip above the thumbnail being hovered
        $("#preview")
          .css("top",prevTop + "px")
          .css("left",prevLeft  + "px")
          .show();
					
          
        // wait until the image is actually loaded to show it
        var objImagePreloader = new Image();
        objImagePreloader.onload = function() {
          $("#toolphoto").hide()
          $("#toolphoto").attr('src',objImagePreloader.src );
          $("#toolphoto").fadeIn();
          objImagePreloader.onload=function(){};
        }
        objImagePreloader.src = data.data.photot;
      });	
      $("#thumboverlay").click(function() {
        hoverImg.click();
      });
    },
    function() {
      hoverOverlay = false;
      $("#thumboverlay").remove();
  		$("#preview").remove();		
    });
  });	
};

$(document).ready(function(){
	imagePreview();

	$('.arrowOpen').hover(function() {
		this.src = 'images/gallery/thumbOpenRoll.jpg';
	},function() {
		this.src = 'images/gallery/thumbOpen.jpg';	
	});
	
	$('.arrowClose').hover(function() {
		this.src = 'images/gallery/thumbCloseRoll.jpg';
	},function() {
		this.src = 'images/gallery/thumbClose.jpg';	
	});

	// apply the lightbox effect to all preview images
	$(".category").each(function(i) {
		$(this).find('.photo_'+i).lightBox();
	});
});