// 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 > 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', 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').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-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\\press\\';
    
  var struntitled1 = strpathtoimages + 'b.jpg';
  preloadimage(struntitled1);
  
  
  
  
  
  // 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);
	 
	 // Show the image
	 $('#imgpicture').attr ('src', '');
	 
	 // Also need to fadeout the background div
	 $('#divshowpicturebackground').fadeOut('slow');
		 
  });
  
   
  
   
   $('#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.

   $('#divgallery').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(struntitled1, 2152, 1196, '????', '????', '?????', '?????', '');
	 //alert ("Hello");
	 
   });



   $('#divgallery').hover(
      function(){ 
	     $('body').css('cursor','pointer');
        
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $('body').css('cursor','default') } 
    ); 
	
	
  
  //  alert("4");
	
   
});