var maxThumbnails=12; //how many thumbnails to show in the navigator
    var fromThumb=0;  //first showing thumbnail
    var lastPhotoId=-1000; //just to know witch thumbnail to turn off the background
    var menuViz = false;
	var albumDir = "albums/2009/";
	var albumName = "Bentley";

    // get current photo id from URL
    var thisURL = document.location.href;
    var splitURL = thisURL.split("#");
    var photoId = splitURL[1] - 1;
    
    // if no photoId supplied then set default
    var photoId = (!photoId)? 0 : photoId;
    
    // CSS border size x 2
    var borderSize = 6;
    
    // Photo directory for this album
    var section_gallery = "Bentley/";
    var section = section_gallery[0];
    var gallery = section_gallery[1];
    var photoDir = "albums/2009/Bentley/";
    var albumName= "Photo Gallery : Bentley";
    
    /*--------------------------------------------------------------------------*/
    // Define each photo's name, height, width, and caption

	
var photoArray = new Array(
	// Source, Width, Height, Caption
	new Array("SAG_1142_big.jpg", "850", "567", "Bentley Continental Flying Spur (Midnight Emerald)"),
	new Array("SAG_1185_big.jpg", "825", "550", "Bentley Continental Flying Spur (Midnight Emerald)"),
	new Array("SAG_0953_big.jpg", "700", "466", "Bentley Continental Flying Spur (Midnight Emerald)"),
	new Array("SAG_0888_big.jpg", "700", "466", "Bentley Continental Flying Spur (Midnight Emerald)"),
	new Array("SAG_0896_big.jpg", "700", "466", "Bentley Continental Flying Spur (Midnight Emerald)"),
	new Array("SAG_0981_big2.jpg", "920", "306", "Bentley Continental Flying Spur (Midnight Emerald)"),
	new Array("SAG_0918_big2.jpg", "920", "408", "Bentley Continental Flying Spur (Midnight Emerald)")
	);
    
    // Number of photos in this gallery
    var photoNum = photoArray.length;
    
    var Slideshow = Class.create();
    
    Slideshow.prototype = {
        initialize: function(photoId) {
            this.photoId = photoId;
            this.photo = 'Photo';
            this.photoBox = 'Container';
            this.prevLink = 'PrevLink';
            this.nextLink = 'NextLink';
            this.captionBox = 'CaptionContainer';
            this.caption = 'Caption';
            this.counter = 'Counter';
            this.loader = 'Loading';
            this.menuToggle		= 'toggleMenu';
            this.controller 	= 'menu_list.php';
            this.sectionList		= 'sectionList';
            this.galleryList	= 'galleryList';
        },
        getCurrentSize: function() {
            // Get current height and width, subtracting CSS border size
            this.wCur = Element.getWidth(this.photoBox) - borderSize;
            this.hCur = Element.getHeight(this.photoBox) - borderSize;
        },
        getNewSize: function() {
            // Get current height and width
            this.wNew = photoArray[photoId][1];
            this.hNew = photoArray[photoId][2];
        },
        getScaleFactor: function() {
            this.getCurrentSize();
            this.getNewSize();
            // Scalars based on change from old to new
            this.xScale = (this.wNew / this.wCur) * 100;
            this.yScale = (this.hNew / this.hCur) * 100;
        },
        setNewPhotoParams: function() {
            // Set source of new image
            Element.setSrc(this.photo,photoDir + photoArray[photoId][0]);
            // Set anchor for bookmarking. changes by Rafa
            Element.setHref(this.prevLink, "?album=Bentley#" + (photoId+1));
            Element.setHref(this.nextLink, "?album=Bentley#" + (photoId+1));
        },
        setPhotoCaption: function() {
            // Add caption from gallery array
            Element.setInnerHTML(this.caption,(photoArray[photoId][3]));
            Element.setInnerHTML(this.counter,((photoId+1)+'/'+photoNum));
        },
        resizePhotoBox: function() {
            this.getScaleFactor();
            new Effect.Scale(this.photoBox, this.yScale, {scaleX: false, duration: 0.3, queue: 'front'});
            new Effect.Scale(this.photoBox, this.xScale, {scaleY: false, delay: 0.5, duration: 0.3});
            // Dynamically resize caption box as well
            // Element.setWidth(this.captionBox,this.wNew-(-borderSize));
        },
        showPhoto: function(){
            new Effect.Fade(this.loader, {delay: 0.5, duration: 0.3});
            // Workaround for problems calling object method "afterFinish"
            new Effect.Appear(this.photo, {duration: 0.5, queue: 'end', afterFinish: function(){Element.show('CaptionContainer');Element.show('PrevLink');Element.show('NextLink');}});
        },
        nextPhoto: function(){
            // Figure out which photo is next
            (photoId == (photoArray.length - 1)) ? photoId = 0 : photoId++;
            this.initSwap();
        },
        prevPhoto: function(){
            // Figure out which photo is previous
            (photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
            this.initSwap();
        },
    
    
        ajaxGalleries: function(reqSection) {
            // Request galleries in selected section
            var pars = 'action=galleries&curSection='+section+'&reqSection='+reqSection;
        },
        initSwap: function() {
            // Begin by hiding main elements
            Element.show(this.loader);
            Element.hide(this.photo);
            Element.hide(this.captionBox);
            Element.hide(this.prevLink);
            Element.hide(this.nextLink);
            // Set new dimensions and source, then resize
            this.setNewPhotoParams();
            this.resizePhotoBox();
            this.setPhotoCaption();
        }
    }
    /*--------------------------------------------------------------------------*/
    function setFullLinkContainerHight(){
      //keep nice show/hide but leave 100% at last (so that it scales between photos)
      document.getElementById('LinkContainer').style.height='100%';
    }
    // NAVIGATOR
    function refreshPhoto(){
      myPhoto = new Slideshow(photoId);
      myPhoto.initSwap();
      soundManager.play('select');
      updateNavigator();
    
      //hide index if shown...
        if(menuViz == true){
            myMenu.custom(0,myPhoto.hNew);
            menuViz = false;
        self.setTimeout('setFullLinkContainerHight()',700);
      }
    }
    
    function createThumbnailElement(id){
        temp=photoDir+photoArray[id][0];
        result="";
        result += "<li id=\"list_"+id+"\" style=\"\">\n";
        result += "<a onclick=\"photoId="+id+"; refreshPhoto();\" onmouseover=\"soundManager.play('beep');\" href=\"?album=Bentley#"+(id+1)+"\" id=\"aimg_"+id+"\">\n";
        result += "<img src=\"thumb.display.php?img="+temp+"\" id=\"img_"+id+"\">\n";
        result += "</a></li>\n";
        return result;
    }
    
    function paintNavigator(fromId) {
      document.getElementById('nav_prev').href="?album=Bentley#" + (photoId+1);
      document.getElementById('nav_next').href="?album=Bentley#" + (photoId+1);
      document.getElementById('thumbs_cont').innerHTML = '&nbsp; loading images...';
      result="";
    
      //determin index of last thumbnail to show
      toId=(fromId+maxThumbnails<photoArray.length)?(fromId+maxThumbnails-1):(photoArray.length-1);
    
      //show prev button (if necessary)
      if (fromId>0) document.getElementById('nav_prev').style.display = 'inline';
        else document.getElementById('nav_prev').style.display = 'none';
      
      //create thumbnails and select the one that is active
      result +="<ul id=\"thumbs_ul\">\n";
      for (i=fromId; i<=toId; i++) result +=createThumbnailElement(i);
      result +="</ul>\n";
    
      //show next button (if necessary)
      if (fromId+maxThumbnails<photoArray.length) document.getElementById('nav_next').style.display = 'inline';
        else document.getElementById('nav_next').style.display = 'none';
    
      document.getElementById('thumbs_cont').innerHTML=result;
    }
    
    function updateActiveThumb(){
      var lastThumb=document.getElementById('list_'+lastPhotoId);
      if (lastThumb) lastThumb.style.background="transparent";
      var currentThumb=document.getElementById('list_'+photoId);
      if (currentThumb) currentThumb.style.border="1px solid #bf0028";
    }
    
    function updateNavigator(){
      paintNavigator(fromThumb);
      updateActiveThumb();
      lastPhotoId=photoId;
    }

/*--------------------------------------------------------------------------*/
// Additional methods for Element added by SU, Couloir
Object.extend(Element, {
	getWidth: function(element) {
   	element = $(element);
   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   	element = $(element);
    	element.style.height = h +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

/*--------------------------------------------------------------------------*/

// Establish CSS-driven events via Behaviour script
var myrules = {
	'#Photo' : function(element){
		element.onload = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.showPhoto();
		}
	},
	'#PrevLink' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.prevPhoto();
			soundManager.play('select');
			fromThumb=maxThumbnails*Math.floor(photoId/maxThumbnails);
      updateNavigator();
		}
	},
	'#NextLink' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.nextPhoto();
			soundManager.play('select');
			fromThumb=maxThumbnails*Math.floor(photoId/maxThumbnails);
      updateNavigator();
		}
	},
	'#nav_next' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			soundManager.play('select');
      fromThumb+=maxThumbnails;
      updateNavigator();
		}
	},
	'#nav_prev' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			soundManager.play('select');
      fromThumb-=maxThumbnails;
      updateNavigator();
		}
	},
	'#toggleMenu' : function(element){
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.toggleMenu();
		}
	},
	a : function(element){
		element.onfocus = function(){
			this.blur();
		}
	}
};

// Add window.onload event to initialize
Behaviour.addLoadEvent(init);
Behaviour.apply();

function init() {
	var myPhoto = new Slideshow(photoId);
	myPhoto.initSwap();
	myMenu = new fx.Height('LinkContainer',{duration: 600});
	soundManagerInit();
	fromThumb=maxThumbnails*Math.floor(photoId/maxThumbnails);
	updateNavigator();
	document.title=albumName;
	
  //have to load menu in the beginnig. if not (if load on open) in IE it flickers...
	myPhoto.ajaxGalleries(section);
}