// 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');  
	 }	 
	 */
	 
	 // The maximum width of the image is to be 450
	 // The maximum height of the image is to be 250
	 // 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 > 300 )
	    {
	       // Set the img height to its maximum allowed.
	       imgheight = 300;
		
		   // Now scale the width accordingly
		   imgwidth = (300 / tmpimgheight ) * tmpimgwidth;
		   
	    }
	 
	    // Check the width
	    if (imgwidth > 550) 
	    {
	       // Set the img width to its maximum allowed 
		   imgwidth = 550;
		
		   // Now scale the height accordingly
	       imgheight = (550 / 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', 7);
	 
	 // 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', 7);
	 }
	 
	  // 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').centerhorizontal2();
	 
	 //$('#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-34);
	 
	 


	 //$('#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\\';
    
  var struntitled1 = strpathtoimages + 'impermanence.jpg';
  preloadimage(struntitled1);
  
  var struntitled2 = strpathtoimages + 'innergreen.jpg';
  preloadimage(struntitled2);
  
  var struntitled3 = strpathtoimages + 'composition.jpg';
  preloadimage(struntitled3);
  
  var struntitled4 = strpathtoimages + 'artprojectspaystribute.jpg';
  preloadimage(struntitled4);
  
  var struntitled5 = strpathtoimages + 'saya.jpg';
  preloadimage(struntitled5);
  
  //var strbreathing = strpathtoimages + '$breathing.jpg';
  var struntitled6 = strpathtoimages + 'strokes.gif';
  preloadimage(struntitled6);
  
  var struntitled7 = strpathtoimages + 'midautumn.gif';
  preloadimage(struntitled7);
  
  var struntitled8 = strpathtoimages + 'heart.gif';
  preloadimage(struntitled8);
  
  var struntitled9 = strpathtoimages + 'my-strokes.gif';
  preloadimage(struntitled9);
  
  var struntitled10 = strpathtoimages + 'tigerwoods.jpg';
  preloadimage(struntitled10);
  
  var struntitled11 = strpathtoimages + 'we-all-different.gif';
  preloadimage(struntitled11);
  
  
  
  
  //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);
	 
	 // Change the z order to bring the picture on top
	 $('#divshowpicture').css('z-index', 500);	 
	 
	 // Make sure the background is still displayed
	 $('#imgbackground').css('z-index', 400);
	 
	 // Also need to fadeout the background div
	 $('#divshowpicture').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);
	 
	 // Change the z order to bring the picture on top
	 $('#divshowpicture').css('z-index', 500);	 
	 
	 // Make sure the background is still displayed
	 $('#imgbackground').css('z-index', 400);
	 
	 // Also need to fadeout the background div
	 $('#divshowpicture').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); 
	
   });
   
   // Note only the image path, height and width are relevant in these calls, the rest are not used.

   $('#divimpermanence').bind('click', function() {     
     // Show the picture madonna
   	 displaygalleryimage(struntitled1, 719, 483, '????', '????', '?????', '?????', '');
	 	 
   });
   
   // Modified 01/07/2010 by JR
   // Hoeyyn requested to add that these items pop up on mouse over 
   // Use the hover event for this
  
   	   	 
   


   $('#divinnergreen').bind('click', function() {     

	 displaygalleryimage(struntitled2, 416, 415, '?????', '????', '????', '??????', '');
	 
   });

   $('#divcomposition').bind('click', function() {     

	 displaygalleryimage(struntitled3, 832, 1068, '?????', '????', '????', '?????', '');
	 
   });

   $('#divartproject').bind('click', function() {     

	 displaygalleryimage(struntitled4, 802, 518, '?????', '????', '????', '?????', '');
	 
   });


   $('#divsaya').bind('click', function() {     
	 displaygalleryimage(struntitled5, 424, 450, '?????', '????', '????', '?????', '');	 
   });

   $('#divstrokes').bind('click', function() {     
	 displaygalleryimage(struntitled6, 305, 500, '?????', '????', '????', '?????', '');	 
   });


   $('#divmidautumn').bind('click', function() {     
	 displaygalleryimage(struntitled7, 470, 596, '?????', '????', '????', '?????', '');	 
   });

   $('#divheart').bind('click', function() {     
	 displaygalleryimage(struntitled8, 961, 727, '?????', '????', '????', '?????', '');	 
   });

   $('#divmystrokes').bind('click', function() {     
	 displaygalleryimage(struntitled9, 489, 375, '?????', '????', '????', '?????', '');	 
   });

   $('#divtigerwoods').bind('click', function() {     
	 displaygalleryimage(struntitled10, 807, 1320, '?????', '????', '????', '?????', '');	 
   });
   
   $('#divalldifferent').bind('click', function() {     
	 displaygalleryimage(struntitled11, 581, 582, '?????', '????', '????', '?????', '');	 
   });


   $('#divimpermanence').hover(
      function(){ 
	     $('body').css('cursor','pointer');
        
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		 displaygalleryimage(struntitled1, 719, 483, '????', '????', '?????', '?????', '');
		  },
      function(){ 
	     $('body').css('cursor','default');
		 
		 // 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');
	
	  } 
    ); 
	
	$('#divinnergreen').hover(
      function(){ 
	     $('body').css('cursor','pointer');
        
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		 displaygalleryimage(struntitled2, 416, 415, '?????', '????', '????', '??????', '');
		  },
      function(){ $('body').css('cursor','default') } 
    ); 
	
	
	
	$('#divcomposition').hover(
      function(){ 
	     $('body').css('cursor','pointer');
    
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		 displaygalleryimage(struntitled3, 832, 1068, '?????', '????', '????', '?????', '');
		  },
      function(){ $('body').css('cursor','default') } 
    ); 
	
	$('#divartproject').hover(
      function(){ 
	     $('body').css('cursor','pointer');
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		 displaygalleryimage(struntitled4, 802, 518, '?????', '????', '????', '?????', '');
		  },
      function(){ $('body').css('cursor','default') } 
    ); 
	
	 $('#divsaya').hover(
      function(){ 
	     $('body').css('cursor','pointer');
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		 displaygalleryimage(struntitled5, 424, 450, '?????', '????', '????', '?????', '');
		  },
      function(){  $('body').css('cursor','default') } 
    ); 
	
	
   $('#divstrokes').hover(
      function(){ 
	     $('body').css('cursor','pointer');
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		 displaygalleryimage(struntitled6, 305, 500, '?????', '????', '????', '?????', '');
		  },
      function(){  $('body').css('cursor','default') } 
    ); 
   
   $('#divmidautumn').hover(
      function(){ 
	     $('body').css('cursor','pointer');
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		 displaygalleryimage(struntitled7, 470, 596, '?????', '????', '????', '?????', '');
		  },
      function(){ $('body').css('cursor','default') } 
    ); 
  
    $('#divheart').hover(
      function(){ 
	     $('body').css('cursor','pointer');
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		 displaygalleryimage(struntitled8, 961, 727, '?????', '????', '????', '?????', '');
		  },
      function(){  $('body').css('cursor','default') } 
    ); 
  
  $('#divmystrokes').hover(
      function(){ 
	     $('body').css('cursor','pointer');
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		 displaygalleryimage(struntitled9, 489, 375, '?????', '????', '????', '?????', '');
		  },
      function(){  $('body').css('cursor','default') } 
    ); 
  
  $('#divtigerwoods').hover(
      function(){ 
	    $('body').css('cursor','pointer');
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		 displaygalleryimage(struntitled10, 807, 1320, '?????', '????', '????', '?????', '');	 
		  },
      function(){  $('body').css('cursor','default')} 
    ); 
	
	$('#divalldifferent').hover(
      function(){ 
	     $('body').css('cursor','pointer');
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		 displaygalleryimage(struntitled11, 581, 582, '?????', '????', '????', '?????', '');	 
		  },
      function(){ $('body').css('cursor','default') } 
    ); 
  
  
  //  alert("4");
	
   
});