// 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', 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\\people\\';
    
  var struntitled1 = strpathtoimages + '1988.jpg';
  preloadimage(struntitled1);
  
  var struntitled2 = strpathtoimages + 'tibetweb.gif';
  preloadimage(struntitled2);
  
  var struntitled3 = strpathtoimages + 'studyweb.gif';
  preloadimage(struntitled3);
  
  var struntitled4 = strpathtoimages + 'man&cowweb.gif';
  preloadimage(struntitled4);
  
  var struntitled5 = strpathtoimages + 'wewereyoung&freeweb.gif';
  preloadimage(struntitled5);
  
  //var strbreathing = strpathtoimages + '$breathing.jpg';
  var struntitled6 = strpathtoimages + 'oldmanshopeweb.gif';
  preloadimage(struntitled6);
  
  var struntitled7 = strpathtoimages + 'oldmanweb.gif';
  preloadimage(struntitled7);
  
  var struntitled8 = strpathtoimages + 'stevenchowweb.gif';
  preloadimage(struntitled8);
  
  var struntitled9 = strpathtoimages + 'girlweb.gif';
  preloadimage(struntitled9);
  
  var struntitled10 = strpathtoimages + 'prayingweb.gif';
  preloadimage(struntitled10);
  
  var struntitled11 = strpathtoimages + 'mrbeanweb.gif';
  preloadimage(struntitled11);
  
  var struntitled12 = strpathtoimages + 'maninportklangweb.gif';
  preloadimage(struntitled12);
  
  var struntitled13 = strpathtoimages + 'zzyweb.gif';
  preloadimage(struntitled13);
  
  var struntitled14 = strpathtoimages + 'jakiechanweb.jpg';
  preloadimage(struntitled14);
  
  var struntitled15 = strpathtoimages + 'kidsweb.gif';
  preloadimage(struntitled15);
  
  var struntitled16 = strpathtoimages + 'szuqiweb.gif';
  preloadimage(struntitled16);
  
  var struntitled17 = strpathtoimages + 'akidweb.gif';
  preloadimage(struntitled17);
  
  var struntitled18 = strpathtoimages + 'happinessweb.gif';
  preloadimage(struntitled18);
  
  var struntitled19 = strpathtoimages + 'indiangirlweb.gif';
  preloadimage(struntitled19);
  
  var struntitled20 = strpathtoimages + 'leoweb.gif';
  preloadimage(struntitled20);
  //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); 
	
   });

   $('#divuntitled1').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(struntitled1, 802, 518, 'Dr Mahathir Contributions 1986', '2003', '48" X 30"', 'Acrylic on Canvas', 'Art Project Pays Tribute to Retiring Malaysian Prime Minister Tun Dr Mahathir Mohamad');
	 //alert ("Hello");
	 
   });


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

	 displaygalleryimage(struntitled2, 961, 727, 'Tibet', '1999', '25" X 17"', 'Acrylic on Illustration Board', 'Not Available');
	 
   });

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

	 displaygalleryimage(struntitled3, 824, 628, 'Study', '1999', '30" X 20.5"', 'Designer Gouache on Illustration Board', 'Not Available');
	 
   });

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

	 displaygalleryimage(struntitled4, 1106, 753, 'Life', '1999', '27" X 19"', 'Acrylic on Illustration Board', 'Not Available');
	 
   });


   $('#divuntitled5').bind('click', function() {     
	 displaygalleryimage(struntitled5, 940, 698, 'We Were Young', '1999', '30" X 20.5"', 'Acrylic on Canvas', 'Not Available');	 
   });

   $('#divuntitled6').bind('click', function() {     
	 displaygalleryimage(struntitled6, 1278, 942, 'Old Man\'s Hope', '1997', '30" X 20.5"', 'Water Colour on Water Colour Paper', 'Not Available');	 
   });


   $('#divuntitled7').bind('click', function() {     
	 displaygalleryimage(struntitled7, 683, 882, 'Keep Learning', '2002', '14.8" X 19.8"', 'Ink on Sugar Paper', 'Not Available');	 
   });

   $('#divuntitled8').bind('click', function() {     
	 displaygalleryimage(struntitled8, 844, 1192, 'Steven Chow - Kung Fu Hustle', '2004', '17" X 25"', 'Water Colour on Water Colour Paper', 'For The Premier Release of the Film \'Kung Fu Hustle\' in Malaysia, 2004');	 
   });

   $('#divuntitled9').bind('click', function() {     
	 displaygalleryimage(struntitled9, 561, 700, 'Summer', '2004', '15" X 11"', 'Water Colour on Water Colour Paper', 'Not Available');	 
   });

   $('#divuntitled10').bind('click', function() {     
	 displaygalleryimage(struntitled10, 650, 895, 'A Tibetan Man', '2002', '17" X 13"', 'Water Colour on Drawing Pad', 'Not Available');	 
   });

   $('#divuntitled11').bind('click', function() {     
	 displaygalleryimage(struntitled11, 934, 1178, 'Mr Bean', '2003', '17" X 14"', 'Water Colour on Box Board', 'Not Available');	 
   });

   $('#divuntitled12').bind('click', function() {     
	 displaygalleryimage(struntitled12, 912, 1232, 'Life Painting - Man in Port Klang', '2000', '16" X 24"', 'Water Colour on Sugar Paper', 'Not Available');	 
   });

   $('#divuntitled13').bind('click', function() {     
	 displaygalleryimage(struntitled13, 673, 839, 'Zhang ZiYi', '2002', '14.8" X 21.8"', 'Colour Pencil on Drawing Pad', 'Not Available');	 
   });

   $('#divuntitled14').bind('click', function() {     
	 displaygalleryimage(struntitled14, 659, 967, 'Jacky Chan - Shanghai Knights', '2003', '16" X 24"', 'Charcoal on Sugar Paper', 'For the Premier Release of the Film \'Shanghai Knights\' in Malaysia, 2003');	 
   });

   $('#divuntitled15').bind('click', function() {     
	 displaygalleryimage(struntitled15, 561, 700, 'Kids', '2002', '14.8" X 21.8"', 'Ink on Rice Paper', 'Not Available');	 
   });

   $('#divuntitled16').bind('click', function() {     
	 displaygalleryimage(struntitled16, 1052, 754, 'Shu Qi - So Close', '2002', '23" X 15.5"', 'Charcoal on Illustration Board', 'For The Premier Release of The Film \'So Close\' in Malaysia, 2002');	 
   });

   $('#divuntitled17').bind('click', function() {     
	 displaygalleryimage(struntitled17, 585, 816, 'Kampung Kid', '2002', '16" X 24"', 'Water Colour on Drawing Pad', 'Not Available');	 
   });
   
   $('#divuntitled18').bind('click', function() {     
	 displaygalleryimage(struntitled18, 808, 1204, 'Happiness', '1999', '9" X 12"', 'Pastel on Illustration Board', 'Not Available');	 
   });
   
   $('#divuntitled19').bind('click', function() {     
	 displaygalleryimage(struntitled19, 916, 1250, 'Indian Girl', '2002', '18" X 26"', 'Ink on Rice Paper', 'Not Available');	 
   });
   
   $('#divuntitled20').bind('click', function() {     
	 displaygalleryimage(struntitled20, 1008, 1306, 'Life Drawing - Leo', '2001', '16" X 24"', 'Ink on Drawing Pad', 'Not Available');	 
   });

   $('#divuntitled1').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled1);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	$('#divuntitled2').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled2);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	
	
	$('#divuntitled3').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled3);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	$('#divuntitled4').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled4);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	 $('#divuntitled5').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled5);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	
   $('#divuntitled6').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled6);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
   
   $('#divuntitled7').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled7);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
  
    $('#divuntitled8').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled8);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
  
  $('#divuntitled9').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled9);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
  
  $('#divuntitled10').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled10);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
  
  $('#divuntitled11').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled11);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    );
	$('#divuntitled12').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled12);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    );
	
	$('#divuntitled13').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled13);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    );
	
	$('#divuntitled14').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled14);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    );
	
	$('#divuntitled15').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled15);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    );
	
	$('#divuntitled16').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled16);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    );
	
	$('#divuntitled17').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled17);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    );
	
	$('#divuntitled18').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled18);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    );
	
	$('#divuntitled19').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled19);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    );
	
	$('#divuntitled20').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struntitled20);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    );
  
  //  alert("4");
	
   
});