﻿  window.onload = function()
  {
	 
	 //no.1
	 
	 var divId1 = "photodiv";
	 var imgId1="photoimg";
	 var imgArray1= new Array(
	           "top/images/ps/opening.gif",
	           "top/images/ps/1006view.jpg",
               "top/images/ps/chinatown.jpg",
               "top/images/ps/fujimotosan2.jpg",
               "top/images/ps/frontflower2.png",
			   "top/images/ps/vingtd.png",
               "top/images/ps/vingtgaikan2.jpg",
               "top/images/ps/tia2.png",
               "top/images/ps/tianew.png",
               "top/images/ps/frontre2.jpg",
               "top/images/ps/twin.jpg",
               "top/images/ps/preopening.gif"
		);
	 
	  var object1 = new shuffler(divId1,imgId1,imgArray1,2);
	  object1.photoShufflerLaunch();
	 
	 var divId3 = "photodiv3";
	 var imgId3="photoimg3";
	 var imgArray3= new Array(
	            "top/images/psg/02.png",
			   "top/images/psg/04.png",
               "top/images/psg/10.png",
               "top/images/psg/14.png"
		);
	 
	  var object3 = new shuffler(divId3,imgId3,imgArray3,3);
	  object3.photoShufflerLaunch();
	  
	  var divId4 = "photodiv4";
	  var imgId4 ="photoimg4";
	  var imgArray4= new Array(
		         "top/images/psg/03.png",
                "top/images/psg/06.png",
                "top/images/psg/07.png",
                "top/images/psg/08.png"
		
		);
	 
	  var object4 = new shuffler(divId4,imgId4,imgArray4,4);
	  object4.photoShufflerLaunch();
	  
	  var divId5 = "photodiv5";
	 var imgId5="photoimg5";
	 var imgArray5= new Array(
	            "top/images/psg/01.png",
			   "top/images/psg/33.png",
               "top/images/psg/21.png",
               "top/images/psg/09.png"
		);
	 
	  var object5 = new shuffler(divId5,imgId5,imgArray5,3.5);
	  object5.photoShufflerLaunch();
	  
	  var divId6 = "photodiv6";
	  var imgId6 ="photoimg6";
	  var imgArray6= new Array(
		         "top/images/psg/15.png",
				"top/images/psg/11.png",
                "top/images/psg/16.png",
                "top/images/psg/12.png"
		
		);
	 
	  var object6 = new shuffler(divId6,imgId6,imgArray6,4.5);
	  object6.photoShufflerLaunch();
	  
	   var divId7 = "photodiv7";
	 var imgId7="photoimg7";
	 var imgArray7= new Array(
	            "top/images/psg/18.png",
			   "top/images/psg/20.png",
               "top/images/psg/19.png",
               "top/images/psg/17.png"
		);
	 
	  var object7 = new shuffler(divId7,imgId7,imgArray7,3.5);
	  object7.photoShufflerLaunch();
	  
	  var divId8 = "photodiv8";
	  var imgId8 ="photoimg8";
	  var imgArray8= new Array(
		         "top/images/psg/24.png",
				"top/images/psg/23.png",
                "top/images/psg/31.png",
                "top/images/psg/22.png"
		
		);
	 
	  var object8 = new shuffler(divId8,imgId8,imgArray8,4.5);
	  object8.photoShufflerLaunch();
	  
	     var divId9 = "photodiv9";
	 var imgId9="photoimg9";
	 var imgArray9= new Array(
	            
			   "top/images/psg/29.png",
               "top/images/psg/25.png",
               "top/images/psg/26.png"
		);
	 
	  var object9 = new shuffler(divId9,imgId9,imgArray9,3);
	  object9.photoShufflerLaunch();
	  
	  var divId10 = "photodiv10";
	  var imgId10 ="photoimg10";
	  var imgArray10= new Array(
		         
				 "top/images/psg/27.png",
				"top/images/psg/28.png",
                "top/images/psg/30.png"
		
		);
	 
	  var object10 = new shuffler(divId10,imgId10,imgArray10,4);
	  object10.photoShufflerLaunch();
	  
	    
	  
	  //YOU CAN DO AS MANY OBJECTS AS YOU WANT
	  
  }
  var shuffler = function(divId,imgId, imgArray, interval)
  {

   this.gblPhotoShufflerDivId = divId;
   this.gblPhotoShufflerImgId = imgId; 
   this.gblImg = imgArray;
   this.gblPauseSeconds = interval;
   this.gblFadeSeconds = .85;
   this.gblRotations = 999;

  // End Customization section
  
   this.gblDeckSize = this.gblImg.length;
   this.gblOpacity = 100;
   this.gblOnDeck = 0;
   this.gblStartImg;
   this.gblImageRotations = this.gblDeckSize * (this.gblRotations+1);
  
  
  this.photoShufflerLaunch = function()
  {
  	var theimg = document.getElementById(this.gblPhotoShufflerImgId);
        this.gblStartImg = theimg.src; // save away to show as final image

	document.getElementById(this.gblPhotoShufflerDivId).style.backgroundImage='url(' + this.gblImg[this.gblOnDeck] + ')';
	setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),this.gblPauseSeconds*1000);
  }

  this.photoShufflerFade = function()
  {
  	var theimg = document.getElementById(this.gblPhotoShufflerImgId);
	
  	// determine delta based on number of fade seconds
	// the slower the fade the more increments needed
        var fadeDelta = 100 / (30 * this.gblFadeSeconds);

	// fade top out to reveal bottom image
	if (this.gblOpacity < 2*fadeDelta ) 
	{
	  this.gblOpacity = 100;
	  // stop the rotation if we're done
	  if (this.gblImageRotations < 1) return;
	  this.photoShufflerShuffle();
	  // pause before next fade
          setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),this.gblPauseSeconds*1000);
	}
	else
	{
	  this.gblOpacity -= fadeDelta;
	  this.setOpacity(theimg,this.gblOpacity);
	  setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),30);  // 1/30th of a second
	}
  }

  this.photoShufflerShuffle = function()
  {
	var thediv = document.getElementById(this.gblPhotoShufflerDivId);
	var theimg = document.getElementById(this.gblPhotoShufflerImgId);
	
	// copy div background-image to img.src
	theimg.src = this.gblImg[this.gblOnDeck];
	// set img opacity to 100
	this.setOpacity(theimg,100);

        // shuffle the deck
	this.gblOnDeck = ++this.gblOnDeck % this.gblDeckSize;
	// decrement rotation counter
	if (--this.gblImageRotations < 1)
	{
	  // insert start/final image if we're done
	  this.gblImg[this.gblOnDeck] = this.gblStartImg;
	}

	// slide next image underneath
	thediv.style.backgroundImage='url(' + this.gblImg[this.gblOnDeck] + ')';
  }

  this.setOpacity = function (obj, opacity) 
  {
    opacity = (opacity == 100)?99.999:opacity;
    
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;

    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;

    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
  }
}
