// 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\\exhibitions\\innergreen\\';
    
  var strbelieve1 = strpathtoimages + 'believe1.jpg';
  preloadimage(strbelieve1);
  
  var strbelieve2 = strpathtoimages + 'believe2.jpg';
  preloadimage(strbelieve2);
  
  var strbelieve3 = strpathtoimages + 'believe3.jpg';
  preloadimage(strbelieve3);
  
  var strbelieve4 = strpathtoimages + 'believe4.jpg';
  preloadimage(strbelieve4);
  
  var strinnerpeace = strpathtoimages + 'innerpeace.jpg';
  preloadimage(strinnerpeace);
  
  //var strbreathing = strpathtoimages + '$breathing.jpg';
  var strlastdeath = strpathtoimages + 'away.jpg';
  preloadimage(strlastdeath);
  
  var strbacktoinnocence = strpathtoimages + 'backtoinnocence.jpg';
  preloadimage(strbacktoinnocence);
  
  //var strimpermanence2 = strpathtoimages + '$impermanence2.jpg';
  var struniversal = strpathtoimages + 'universal.jpg';
  preloadimage(struniversal);
  
  var strdream = strpathtoimages + 'dream.jpg';
  preloadimage(strdream);
  
  var strblessingoflife = strpathtoimages + 'blessingoflife.jpg';
  preloadimage(strblessingoflife);
  
  var strgreentara = strpathtoimages + 'greentara.jpg';
  preloadimage(strgreentara);
  // var strlessandmore = strpathtoimages + '$lessandmore.jpg';
  var strthanks = strpathtoimages + 'thanks.jpg';
  preloadimage(strthanks);
  //var strletitgo = strpathtoimages + '$letitgo-imp.jpg';
  var strthemoment = strpathtoimages + 'themoment.jpg';
  preloadimage(strthemoment);
  
  var strthink = strpathtoimages + 'think.jpg';
  preloadimage(strthink);
  
  var strmeaningoflife = strpathtoimages + 'meaningoflife.jpg';
  preloadimage(strmeaningoflife);
  
  var strtruth = strpathtoimages + 'truth.jpg';
  preloadimage(strtruth);
  
  var strbuddha = strpathtoimages + 'buddha.jpg';
  preloadimage(strbuddha);
  
  var strpeacefulsides = strpathtoimages + 'peacefulsides.jpg';
  preloadimage(strpeacefulsides);
  
  var strfiveelements = strpathtoimages + 'fiveelements.jpg';
  preloadimage(strfiveelements);
  
  var strlotus = strpathtoimages + 'lotus.jpg';
  preloadimage(strlotus);

  var strgoldensoul = strpathtoimages + 'goldensoul.jpg';
  preloadimage(strgoldensoul);
  
  var strexpand1 = strpathtoimages + 'expandi.jpg';
  preloadimage(strexpand1);
  
  var strexpand2 = strpathtoimages + 'expandii.jpg';
  preloadimage(strexpand2);
  
  var strhiddenpower = strpathtoimages + 'hiddenpower.jpg';
  preloadimage(strhiddenpower);
  
  var strwarrior = strpathtoimages + 'warrior.jpg';
  preloadimage(strwarrior);
  
  var strsevenchakras = strpathtoimages + 'sevenchakras.jpg';
  preloadimage(strsevenchakras);
  
  
  
  
  
  
  
  //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); 
	
   });

   $('#divsevenchakras').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strsevenchakras, 1600, 400, 'Seven Chakras', '2006', '35" X 5" (5" X 5" each)', 'Acrylic on Canvas', 'Sold');
	 //alert ("Hello");
	 
   });


   $('#divwarrior').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strwarrior, 1094, 830, 'The Warrior', '2006', '18" X 14"', 'Acrylic on Canvas', '\u00A3400');
	 //alert ("Hello");
	 
   });



   $('#divhiddenpower').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strhiddenpower, 1318, 1000, 'Hidden Power', '2006', '18" X 14"', 'Acrylic on Canvas', '\u00A3350');
	 //alert ("Hello");
	 
   });


   $('#divexpand2').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strexpand2, 802, 1000, 'Expand II', '2006', '24" X 32"', 'Acrylic on Canvas', '\u00A3500');
	 //alert ("Hello");
	 
   });



   $('#divexpand1').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strexpand1, 802, 1000, 'Expand I', '2006', '24" X 32"', 'Acrylic on Canvas', '\u00A3500');
	 //alert ("Hello");
	 
   });


   $('#divgoldensoul').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strgoldensoul, 1246, 1536, 'Golden Soul', '2006', '16" X 20"', 'Mixed Media on Canvas', '\u00A3700');
	 //alert ("Hello");
	 
   });


   $('#divlotus').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strlotus, 1400, 504, 'Just for today; do not worry', '2006', '60" X 48" / 20" X 16" (each)', 'Acrylic on Canvas', '\u00A31000');
	 //alert ("Hello");
	 
   });



   $('#divfiveelements').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strfiveelements, 1962, 550, 'Five Elements', '2006', '16" X 12" (each)', 'Mixed Media on Canvas', 'Sold');
	 //alert ("Hello");
	 
   });


   $('#divpeacefulsides').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strpeacefulsides, 1430, 630, 'Peaceful Sides', '2006', '15" X 18" / 5" X 6" (each)', 'Acrylic on Mosaic', '\u00A3250 (set of three)');
	 //alert ("Hello");
	 
   });

   
   $('#divbuddha').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strbuddha, 1400, 1166, 'Buddha', '2006', '12" X 10"', 'Mixed Media on Board', '\u00A3300');
	 //alert ("Hello");
	 
   });
   
   
   $('#divtruth').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strtruth, 830, 814, 'Truth', '2006', '16" X 16"', 'Mixed Media on Canvas', '\u00A3400');
	 //alert ("Hello");
	 
   }); 
   
   $('#divbelieve').bind('click', function() {     
	 // Show the picture madonna
	 displaygalleryimage(strbelieve1, 624, 830, 'Believe I', '2006', '', 'Water Colour on Texture Paper', 'Sold');
	 //alert ("Hello");
	 
   });
   
   $('#divmeaningoflife').bind('click', function() {     
	 // Show the picture day and night
	 displaygalleryimage(strmeaningoflife, 830, 826, 'Meaning of Life', '2006', '16" X 16"', 'Mixed Media on Canvas', '\u00A3400');

	 
   });
   
   
    $('#divthemoment').bind('click', function() {     
	 // Show the picture the moment
	 displaygalleryimage(strthemoment, 830, 820, 'The Moment', '2006', '16" X 16"', 'Mixed Media On Canvas', 'Sold');
	 
   });
   
   
   $('#divthink').bind('click', function() {     
	 // Show the picture think
	 displaygalleryimage(strthink, 850, 830, 'Think', '2006', '16" X 16"', 'Mixed Media on Canvas', '\u00A3400');
	 
   });
   
   $('#divthanks').bind('click', function() {     
	 // Show the picture let it go
	 displaygalleryimage(strthanks, 674, 830, 'Thanks', '2006', '20" X 16"', 'Acrylic on Canvas', '\u00A31000');
	 
   });

	
   $('#divbelieve2').bind('click', function() {     
	 // This works
      displaygalleryimage(strbelieve2, 630, 830, 'Believe II', '2006', '12" X 16"', 'Watercolour on Texture Paper', 'Collected by The One Academy, Malaysia');

   });
   
   $('#divbelieve3').bind('click', function() {     
	 // This works
	 displaygalleryimage(strbelieve3, 624, 830, 'Believe III', '2006', '12" X 16"', 'Watercolour on Texture Paper', 'Sold');
   });
   
   $('#divinnerpeace').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strinnerpeace, 1086, 830, 'Inner Peace', '2006', '18" X 14"', 'Mixed Media On Canvas', '\u00A3400');
   });
   
   $('#divlastdeath').bind('click', function() {     
	 // This works
	 
	 displaygalleryimage(strlastdeath, 1106, 830, 'The Last Death; The First Birth', '2006', '18" X 14"', 'Acrylic on Canvas', '\u00A3700');
   });
   
   $('#divinnocence').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strbacktoinnocence, 1088, 830, 'Back To Innocence', '2006', '18" X 14"', 'Coffee and Charcoal on Canvas', 'N.F.S.');
   });
   
    $('#divdream').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strdream, 1320, 1038, 'Dream', '2006', '17" X 13"', 'Acrylic on Canvas', '\u00A3500');
   });
   
   
   $('#divbelieve4').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strbelieve4, 630, 830, 'Believe IV', '2006', '12" X 16"', 'Watercolour on Texture Paper', 'Sold');
   });
   
   $('#divtheuniverse').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(struniversal, 1124, 830, 'The Universe', '2006', '18" X 14"', 'Acrylic on Canvas', '\u00A3400');
   });
   
   $('#divblessingoflife').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strblessingoflife, 556, 830, 'Blessing of Life', '2006', '24" X 35"', 'Mixed Media on Canvas', 'Sold');
   });
   
   $('#divgreentara').bind('click', function() {     
	 // This works
	  
	 displaygalleryimage(strgreentara, 832, 830, 'Green Tara', '2006', '35" X 35"', 'Acrylic on Canvas', '\u00A35000');
   });
   // Add a hover event to highlight the madonna item in the gallery when the user puts the mouse over it
   $('#divbelieve').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strbelieve1);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	$('#divmeaningoflife').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strmeaningoflife);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	
	
	$('#divthink').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strthink);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	$('#divthemoment').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strthemoment);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	 $('#divthanks').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strthanks);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
	
	
   $('#divbelieve4').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strbelieve4);
		 // Now show the div which displays the picture
	     $('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
    ); 
   
   $('#divtheuniverse').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', struniversal);
		 // 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
   $('#divbelieve2').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strbelieve2);
		 // 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 believe3 item in the gallery when the user puts the mouse over it
   $('#divbelieve3').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strbelieve3);
		 // 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 innerpeace item in the gallery when the user puts the mouse over it
   $('#divinnerpeace').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strinnerpeace);
		 // 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 divlastdeath item in the gallery when the user puts the mouse over it
   $('#divlastdeath').hover(
      
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strlastdeath);
		 // 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 divinnocence item in the gallery when the user puts the mouse over it
   $('#divinnocence').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strbacktoinnocence);
		 // 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 divdream item in the gallery when the user puts the mouse over it
   $('#divdream').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strdream);
		 // 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 divblessingoflife item in the gallery when the user puts the mouse over it
   $('#divblessingoflife').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strblessingoflife);
		 // 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 divgreentara item in the gallery when the user puts the mouse over it
   $('#divgreentara').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strgreentara);
		 // 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 divtruth item in the gallery when the user puts the mouse over it
   $('#divtruth').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strtruth);
		 // 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 divbuddha item in the gallery when the user puts the mouse over it
   $('#divbuddha').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strbuddha);
		 // Now show the div which displays the picture
	     //$('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
   );

       //alert("Finish"); 
   // Add a hover event to highlight the divpeacefulsides item in the gallery when the user puts the mouse over it
   $('#divpeacefulsides').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strpeacefulsides);
		 // 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 divpeacefulsides item in the gallery when the user puts the mouse over it
   $('#divfiveelements').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strfiveelements);
		 // 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 divlotus item in the gallery when the user puts the mouse over it
   $('#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') } 
   );


   // Add a hover event to highlight the divgoldensoul item in the gallery when the user puts the mouse over it
   $('#divgoldensoul').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strgoldensoul);
		 // 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 divexpand1 item in the gallery when the user puts the mouse over it
   $('#divexpand1').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strexpand1);
		 // 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 divexpand2 item in the gallery when the user puts the mouse over it
   $('#divexpand2').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strexpand2);
		 // 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 divexpand2 item in the gallery when the user puts the mouse over it
   $('#divhiddenpower').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strhiddenpower);
		 // 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 divwarrior item in the gallery when the user puts the mouse over it
   $('#divwarrior').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strwarrior);
		 // 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 divsevenchakras item in the gallery when the user puts the mouse over it
   $('#divsevenchakras').hover(
      function(){ 
	     $(this).css('border','2px solid black');
         $('#imgpicture').attr ('src', strsevenchakras);
		 // Now show the div which displays the picture
	     //$('#divshowpicture').css('z-index', -1);	 
		  },
      function(){ $(this).css('border','0') } 
   );

});