// Function to display pictures 
function displaygalleryimage(image, imgwidth, imgheight, strtitle, stryear, strsize, strmedia, strprice)
{
    // Preload the image
    $('<img />')
    .attr('src', image)
    .load(function(){
        $('.profile').append( $(this) );
        // Your other custom code
    });
	
	// Show the image
	$('#imgpicture').attr ('src', '');
	 
	  // When the image is loaded, hide the image loading icon
	 $('#imgpicture').load(function(){
	    // Custom code here
		$('#divimageloading').fadeOut('slow');
	 });
	 
     // Show the image
	 $('#imgpicture').attr ('src', image);
	 
	 // Check the complete attribute for the image
	 // If it is already loaded then hide the imageloading div
	 if ($('#imgpicture').attr( "complete" ) == true)
	 {
	    // Custom code here
		$('#divimageloading').fadeOut('slow');  
	 }	 
	 //else
	 //}
	 //var i
	 //i = $('#imgpicture').attr( "complete" );
	//	alert('Complete attribute is: ' + i);
		
	// if (i==true)
	// {
	//    alert('numerical true'); 
//	 }
	 
	// if (i=='true')
//	 {
//	    alert('string true');
	// }
		
	 //}
	 
	 
	 
	 // Show the back button
	 //$('#imgbackbutton').attr('src', '../images/backbutton.jpg');
	 
	 
	 // The maximum width of the image is to be 765
	 // The maximum height of the image is to be 483
	 // Check the values that have been supplied in imgwidth and imgheight
	 // If they are too large then reduce them.  If one is reduced, then the other
	 // has to be reduced proportionally to keep the ascpect ratio

	 // Record the values that have been supplied
	 var tmpimgheight = imgheight;
	 var tmpimgwidth = imgwidth;
	 
	 //alert('Original height : ' + imgheight);
	 //alert('Original width : ' + imgwidth);
	 
	 
	// Only do this bit if the height and width have been set
	if (imgwidth > 0 && imgheight > 0)
	{
	    //alert('Checking');
		
	    // First check the height
	    if (imgheight > 483 )
	    {
	       // Set the img height to its maximum allowed.
	       imgheight = 483;
		
		   // Now scale the width accordingly
		   imgwidth = (483 / tmpimgheight ) * tmpimgwidth;
		   
	    }
	 
	    // Check the width
	    if (imgwidth > 765) 
	    {
	       // Set the img width to its maximum allowed 
		   imgwidth = 765;
		
		   // Now scale the height accordingly
	       imgheight = (765 / tmpimgwidth ) * tmpimgheight;
	    }
	 
	 
	    // Now set the width and the height of the image
	    $('#imgpicture').attr ('width', imgwidth);
	    $('#imgpicture').attr ('height', imgheight);
	 }
	 
	 //alert('New height : ' + imgheight);
	 //alert('New width : ' + imgwidth);
	 
	 
	 // This should be set to whatever the current screen resolution is
	 $('#imgbackgroundpicture').attr ('width', 1024);
	 $('#imgbackgroundpicture').attr('height', 768);
	 
	 
	 // Show the div which will display the background image
	 $('#divshowpicturebackground').css('z-index', 199);
	 $('#divshowpicturebackground').css("position","absolute");
	 	 
	 // Now show the div which displays the picture
	 $('#divshowpicture').css('z-index', 200);	 
     $('#divshowpicture').css("position","absolute"); 
	 // Show the div which displays the close icon
	 $('#divcloseicon').css('z-index', 202);	 
     $('#divcloseicon').css("position","absolute");
	 
	 // Show the div which displays the image loading icon
	 $('#divimageloading').css('z-index', 202);	 
     $('#divimageloading').css("position","absolute");
	 
	 // Depending on the width of the picture, change the top position
	 

	 $('#divshowpicture').css("top", 26 ); 
	 $('#divcloseicon').css('top', 5);
	 
	 // If the width of the picture is twice the height of it, then display it slightly lower down the 
	 // screen
	 if (imgwidth > (2 * imgheight))
	 {
	  
	    $('#divshowpicture').css("top", 52 );  
		$('#divcloseicon').css('top', 5);
	 }
	 
	  // Display the image loading icon
	 //$('#divimageloading').width(128);
	
	 
	 // $('#divshowpicture').attr ('height' , imgheight); 
	 $('#divshowpicturebackground').fadeIn('slow');
	 $('#divshowpicture').fadeIn('slow');
	 $('#divcloseicon').fadeIn('slow');
	 $('#divimageloading').fadeIn('slow');
	 
	 
	 // First make the size of the div, the same as the size of the picture
	 var imgsize = $('#imgpicture').width();
	 var imgheight = $('#imgpicture').height();
	 
	 $('#divshowpicture').width(imgsize);	 	 
	 $('#divshowpicture').centerhorizontal();
	 
	 $('#divimageloading').css('top', 200);
	 
	 

 
	 // Make the div which shows the image description the same width
	 $('#divshowpicturetext').width(imgsize);
	 
	 // Set the location of the close icon
	 
       $('#divcloseicon').css('left', imgsize-28);
	 
	 


	 //$('#divshowpicturetext').top(imgheight + 100);
     if (imgwidth > (2 * imgheight))
	 {
	    $('#divshowpicturetext').css("top", imgheight+76 ); 
	 }
	 else
	 {	    
		$('#divshowpicturetext').css("top", imgheight+50 ); 
	 }
	 
	 $('#lbltitle').text(strtitle);
	 $('#lblyear').text(stryear);
	 $('#lblsize').text(strsize);
	 $('#lblmedia').text(strmedia);
	 $('#lblprice').text(strprice);
	 
	
	 
	 $('#divshowpicturetext').centerhorizontal();
	 $('#divimageloading').centerhorizontal();
	 
	 // Check the complete attribute for the image
	 // If it is already loaded then hide the imageloading div
	 if ($('#imgpicture').attr( "complete" ) == true)
	 {
	    // Custom code here
		$('#divimageloading').fadeOut('slow');  
	 }	 
	 
	 
	 
	 // alert ("Image Width: " + imgsize + ", Image Height : " + imgheight + ", Screen Width: " + $(window).width());
     
}

// Used to preload an image
function preloadimage(strsrc)
{
  // First pre-load the images so that there is no delay when a user
  // tries to view them
  // Insert preloaded image after it finishes loading
  $('<img />')
    .attr('src', strsrc)
    .load(function(){
        $('.profile').append( $(this) );
        // Your other custom code
    });
}


$(document).ready(function() {


   // Hide the div which displays the pictures
   $('#divshowpicture').hide();  
   
   // Hide the div which shows the image loading icon
   $('#divimageloading').hide();
   
  // Images
  var strpathtoimages = '..\\images\\exhibitions\\impermanence\\';
    
  var strtigercubs = strpathtoimages + '$tigercubs.jpg';
  preloadimage(strtigercubs);
  
  var strdaynight = strpathtoimages + '$day&night.jpg';
  preloadimage(strdaynight);
  
  var strmadonna = strpathtoimages + '$madonna.jpg';
  preloadimage(strmadonna);
  
  var strmoving = strpathtoimages + '$moving.jpg';
  preloadimage(strmoving);
  
  var strflowing = strpathtoimages + '$flowing.jpg';
  preloadimage(strflowing);
  
  //var strbreathing = strpathtoimages + '$breathing.jpg';
  var strbreathing = strpathtoimages + 'breathing_hoeyyn07.jpg';
  preloadimage(strbreathing);
  
  var strimpermanence1 = strpathtoimages + '$impermanence1.jpg';
  preloadimage(strimpermanence1);
  
  //var strimpermanence2 = strpathtoimages + '$impermanence2.jpg';
  var strimpermanence2 = strpathtoimages + 'impermanence2.jpg';
  preloadimage(strimpermanence2);
  
  var strimpermanence3 = strpathtoimages + '$impermanence3.jpg';
  preloadimage(strimpermanence3);
  
  var strimpermanence4 = strpathtoimages + '$impermanence4.jpg';
  preloadimage(strimpermanence4);
  
  var strimpermanence5 = strpathtoimages + '$impermanence5.jpg';
  preloadimage(strimpermanence5);
  // var strlessandmore = strpathtoimages + '$lessandmore.jpg';
  var strlessandmore = strpathtoimages + 'lessandmore.jpg';
  preloadimage(strlessandmore);
  //var strletitgo = strpathtoimages + '$letitgo-imp.jpg';
  var strletitgo = strpathtoimages + 'letitgo.jpg';
  preloadimage(strletitgo);
  
  var strlotus = strpathtoimages + '$lotus.jpg';
  preloadimage(strlotus);
  
  var strinnerlotus = strpathtoimages + '$innerlotus_imp.jpg';
  preloadimage(strinnerlotus);
  
  var strdayandnight = strpathtoimages + '$dayandnight.jpg';
  preloadimage(strdayandnight);
  
  
  //alert("1");
  
  
  // Detect the scroll event for the gallery
  //$('#divgallery').scroll(
  //   function () {
        // If we have scrolled down too far then stop this
	    // Fudge to stop repeated images being displayed
  //      var intscrollTop;
//	    intscrollTop = $('#divgallery').scrollTop();
	 
//	    if (intscrollTop > 160) 
//	    {
//	       intscrollTop = 160;
//		   $('#divgallery').scrollTop(intscrollTop);
		   //alert('Set scrolltop to: ' + intscrollTop);
//	    }
//    }
//   )
  
  // Add a hover event to highlight the gallery scroll up menu item
  $('#imggalleryscrollup').hover(
      function(){ 
	     $('body').css('cursor','pointer'); 
		  },
      function(){ $('body').css('cursor','default') } 
    ); 
	
	// Add a hover event to highlight the gallery scroll down menu item
  $('#imggdown').hover(
      function(){ 
	     $('body').css('cursor','pointer'); 
		  },
      function(){ $('body').css('cursor','default') } 
    ); 
	
	
	// Add a hover event to highlight the back label 
	$('#imgbackbutton').hover(
	  function(){ 
	     $('body').css('cursor','pointer'); 
		  },
      function(){ $('body').css('cursor','default') } 
    ); 
	
	// Add a hover event to highlight the close icon button 
	$('#imgcloseicon').hover(
	  function(){ 
	     $('body').css('cursor','pointer'); 
		  },
      function(){ $('body').css('cursor','default') } 
    ); 

// Add a hover event to highlight that the picture can be closed 
	$('#imgpicture').hover(
	  function(){ 
	     $('body').css('cursor','pointer'); 
		  },
      function(){ $('body').css('cursor','default') } 
    ); 
  
  // When the user clicks on the picture displayed in the gallery ... close it
  $('#imgpicture').bind('click', function() {     
	 
	 // This should be set to whatever the current screen resolution is
	 $('#imgbackgroundpicture').attr ('width', 2);
	 $('#imgbackgroundpicture').attr('height', 2);
	 
	 // Also need to fadeout the background div
	 $('#divshowpicturebackground').fadeOut('slow');
		 
   });
   
  // When the user clicks on the back label displayed in the gallery ... close it
  $('#imgbackbutton').bind('click', function() {     
	 
	 // This should be set to whatever the current screen resolution is
	 $('#imgbackgroundpicture').attr ('width', 2);
	 $('#imgbackgroundpicture').attr('height', 2);
	 
	 // Show the image
	 $('#imgpicture').attr ('src', '');
	 
	 // Also need to fadeout the background div
	 $('#divshowpicturebackground').fadeOut('slow');
		 
  });
  
  // When the user clicks on the back label displayed in the gallery ... close it
  $('#imgcloseicon').bind('click', function() {     
	 
	 // This should be set to whatever the current screen resolution is
	 $('#imgbackgroundpicture').attr ('width', 2);
	 $('#imgbackgroundpicture').attr('height', 2);
	 
	 // Show the image
	 $('#imgpicture').attr ('src', '');
	 
	 // Also need to fadeout the background div
	 $('#divshowpicturebackground').fadeOut('slow');
		 
  });
  
   
  
  // Add an event for the gallery scroll down button  
  //$('#imghands').bind('click', function() {     
	 // This works
	 //$('#imgmenugallery1').attr ('src', 'images\\gallery2.jpg');
	 
	 
//	 alert ("Button clicked");
 //  });
   
   // alert("2");
   
   $('#imggalleryscrollup').bind('click', function() {
     var scrlltop = parseFloat($('#divcoords').html());
	 scrlltop = scrlltop - 5;
	 
	 if (scrlltop < 0)
	 {
	    scrlltop = 0;
	 }
	 
	 $('#divcoords').html(scrlltop);
	 
	 // Set the scroll top for the div ... top scroll down
	 $('#divgallery').scrollTop(scrlltop);
   
   });
   
   // Mouse down 
   $('#imggalleryscrollup').bind('mousedown', function() {
     var scrlltop = parseFloat($('#divcoords').html());
	 scrlltop = scrlltop - 5;
	 
	 if (scrlltop < 0)
	 {
	    scrlltop = 0;
	 }
	 
	 $('#divcoords').html(scrlltop);
	 
	 // Set the scroll top for the div ... top scroll down
	 $('#divgallery').scrollTop(scrlltop); 
	
   });
   
   // Mouse down 
   $('#imggalleryscrollup').bind('mouseover', function() {
     var scrlltop = parseFloat($('#divcoords').html());
	 scrlltop = scrlltop - 5;
	 
	 if (scrlltop < 0)
	 {
	    scrlltop = 0;
	 }
	 
	 $('#divcoords').html(scrlltop);
	 
	 // Set the scroll top for the div ... top scroll down
	 $('#divgallery').scrollTop(scrlltop); 
	
   });
   
   $('#imggdown').bind('click', function() {     
	 // This works
	 //$('#imgmenugallery1').attr ('src', 'images\\gallery2.jpg');
	 //$('#divgallery').hide();
	 //$('#divgallery2').fadeIn('slow');
	 
	 //var scrlltop = $('divgallery').scrollTop() + 50;
	 //$('#divgallery').scrollTop(scrlltop);
	 
	 var scrlltop = parseFloat($('#divcoords').html());
	 scrlltop = scrlltop + 5;
	 
	 if (scrlltop > 160)
	 {
	    scrlltop = 160;
	 }
	 
	 $('#divcoords').html(scrlltop);
	 
	 // Set the scroll top for the div ... top scroll down
	 $('#divgallery').scrollTop(scrlltop);
	 
	 //var numeric = parseFloat(string)+5.00;
	 //alert('Clicked' + scrlltop);
	 
	
	 
   });
   
   // Mouse down 
   $('#imggdown').bind('mousedown', function() {
     var scrlltop = parseFloat($('#divcoords').html());
	 scrlltop = scrlltop + 5;
	 
	 if (scrlltop > 160)
	 {
	    scrlltop = 160;
	 }
	 
	 $('#divcoords').html(scrlltop);
	 
	 // Set the scroll top for the div ... top scroll down
	 $('#divgallery').scrollTop(scrlltop); 
	
   });
   
   // Mouse down 
   $('#imggdown').bind('mouseover', function() {
     var scrlltop = parseFloat($('#divcoords').html());
	 scrlltop = scrlltop + 5;
	 $('#divcoords').html(scrlltop);
	 
	 // Set the scroll top for the div ... top scroll down
	 $('#divgallery').scrollTop(scrlltop); 
	
   });
   
    
   
   $('#divmadonna').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strmadonna, 426, 483, 'Madonna', '2007', '35" X 30"', 'Mixed Media on Canvas', 'Sold by Auction to Save Chinas Tigers Charity Campaign');
	 //alert ("Hello");
	 
   });
   
   $('#divdayandnight').bind('click', function() {     
	 // Show the picture day and night
	 displaygalleryimage(strdayandnight, 765, 383, 'Day and Night', '2007', '12" X 12"', 'Mixed Media on Canvas', '\u00A3800');

	 
   });
   
   
    $('#divinnerlotus').bind('click', function() {     
	 // Show the picture inner lotus
	 displaygalleryimage(strinnerlotus, 376, 484, 'Inner Lotus', '2007', '28" X 40"', 'Mixed Media On Canvas', '\u00A35000');
	 
   });
   
   
   $('#divlotus').bind('click', function() {     
	 // Show the picture lotus
	 displaygalleryimage(strlotus, 765, 221, 'Lotus', '2007', '60" X 16"', 'Mixed Media on Canvas', 'Sold');
	 
   });
   
   $('#divletitgo').bind('click', function() {     
	 // Show the picture let it go
	 displaygalleryimage(strletitgo, 481, 483, 'Let It Go', '2007', '23.5" X 23.5"', 'Mixed Media on Canvas', '\u00A31500');
	 
   });

	
   $('#divtigercubs').bind('click', function() {     
	 // This works
      displaygalleryimage(strtigercubs, 477, 483, 'Tiger Cubs', '2007', '20" X 20"', 'Mixed Media on Canvas', 'Sold by Auction to Save Chinas Tigers Charity Campaign');

   });
   
   $('#divmoving').bind('click', function() {     
	 // This works
	 displaygalleryimage(strmoving, 719, 483, 'Moving', '2007', '24" X 36"', 'Mixed Media on Canvas', '\u00A31800');
   });
   
   $('#divflowing').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strflowing, 765, 283, 'Flowing', '2007', '32.5" X 12"', 'Mixed Media on Canvas', '\u00A3800');
   });
   
   $('#divbreathing').bind('click', function() {     
	 // This works
	 
	 displaygalleryimage(strbreathing, 765, 283, 'Breathing', '2007', '12" X 32.5"', 'Mixed Media on Canvas', '\u00A3800');
   });
   
   $('#divimpermanence1').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strimpermanence1, 482, 483, 'Impermanence I', '2007', '12" X 12"', 'Mixed Media on Canvas', 'Sold');
   });
   
    $('#divimpermanence3').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strimpermanence3, 482, 483, 'Impermanence III', '2007', '12" X 12"', 'Mixed Media on Canvas', 'Sold');
   });
   
   
   $('#divlessandmore').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strlessandmore, 652, 483, 'Less and More', '2007', '18" X 14"', 'Mixed Media on Canvas', '\u00A3900');
   });
   
   $('#divimpermanence2').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strimpermanence2, 482, 483, 'Impermanence II', '2007', '12" X 12"', 'Mixed Media on Canvas', 'Sold');
   });
   
   $('#divimpermanence4').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strimpermanence4, 482, 483, 'Impermanence IV', '2007', '12" X 12"', 'Mixed Media on Canvas', 'Sold');
   });
   
   $('#divimpermanence5').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strimpermanence5, 482, 483, 'Impermanence V', '2007', '12" X 12"', 'Mixed Media on Canvas', 'Sold');
   });
   // Add a hover event to highlight the madonna item in the gallery when the user puts the mouse over it
   $('#divmadonna').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strmadonna);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	$('#divdayandnight').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strdayandnight);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	
	
	$('#divinnerlotus').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strinnerlotus);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	$('#divlotus').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strlotus);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	 $('#divletitgo').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strletitgo);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	
   $('#divlessandmore').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strlessandmore);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
   
   $('#divimpermanence2').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strimpermanence2);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
  
  
  //  alert("4");
	
   // Add a hover event to highlight the tiger cubs item in the gallery when the user puts the mouse over it
   $('#divtigercubs').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strtigercubs);
		 // Now show the div which displays the picture
	     //$('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0px') } 
   ); 

   // Add a hover event to highlight the moving item in the gallery when the user puts the mouse over it
   $('#divmoving').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strmoving);
		 // Now show the div which displays the picture
	     //$('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
   ); 
   
    // Add a hover event to highlight the flowing item in the gallery when the user puts the mouse over it
   $('#divflowing').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strflowing);
		 // Now show the div which displays the picture
	     //$('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
   ); 
   
    // Add a hover event to highlight the divbreathing item in the gallery when the user puts the mouse over it
   $('#divbreathing').hover(
      
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strbreathing);
		 // Now show the div which displays the picture
	     //$('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
	 
   ); 

   // Add a hover event to highlight the divimpermanence1 item in the gallery when the user puts the mouse over it
   $('#divimpermanence1').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strimpermanence1);
		 // Now show the div which displays the picture
	     //$('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
   ); 
   
   // Add a hover event to highlight the divimpermanence3 item in the gallery when the user puts the mouse over it
   $('#divimpermanence3').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strimpermanence3);
		 // Now show the div which displays the picture
	     //$('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
   ); 
   
    // Add a hover event to highlight the divimpermanence4 item in the gallery when the user puts the mouse over it
   $('#divimpermanence4').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strimpermanence4);
		 // Now show the div which displays the picture
	     //$('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
   );
   
    // Add a hover event to highlight the divimpermanence5 item in the gallery when the user puts the mouse over it
   $('#divimpermanence5').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strimpermanence5);
		 // Now show the div which displays the picture
	     //$('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
   );
   
       //alert("Finish"); 
});