// -----------------------------------------------------------------------------------
// 
// This page coded by Scott Upton
// http://www.uptonic.com | http://www.couloir.org
//
// This work is licensed under a Creative Commons License
// Attribution-ShareAlike 2.0
// http://creativecommons.org/licenses/by-sa/2.0/
//
// Associated APIs copyright their respective owners
//
// -----------------------------------------------------------------------------------
// --- version date: 11/28/05 --------------------------------------------------------


// get current photo id from URL
var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;
if(photoId==-1) photoId = 0;

var flipflop = false;

var tonext = true;
var startwidth_inner = 500;
var startwidth_outer = 500;
var zoomwidth = startwidth_inner;
var zoomEff = null;
var  switching = false;

var time4slide = 8;

// if no photoId supplied then set default
var photoId = (!photoId)? 0 : photoId;

// CSS border size x 2
var borderSize = 10;

// Photo directory for this gallery
var photoDir = "";
var photoNum;
var photoArray;
// Define each photo's name, height, width, and caption
/*var photoArray = new Array(

	// Source, Width, Height, Caption
	new Array("IMG_0470.jpg", startwidth_inner, "300", "<p>Dave has recently been playing about with a little slideshow.js that we found on <a href='http://www.tomdoyletalk.com/2008/10/28/simple-image-gallery-slideshow-with-scriptaculous-and-prototype/'>Tom Doyle's blog</a>.</p><p>It's a great little script (thanks Tom) but I thought it could do with a litte upgrade to encapsulate it in an object so that it doesn't get interfered with.</p><p>Here's our version of much the same code: <a href='/static/downloads/slideshow.zip'>slideshow.js</a></p>"),
	new Array("IMG_2441.jpg", startwidth_inner, "300", "Mt. Toll as seen from the slopes of Mt. Audubon"),
	new Array("IMG_2449.jpg", startwidth_inner, "300", "Taking flight from the summit of Paiute"),
	new Array("IMG_0677.jpg", startwidth_inner, "300", "Plodding up Queen's Way Couloir on Apache"),
	new Array("P3220073.jpg", startwidth_inner, "300", "A storm brews in the distance (Red Rocks, NV)")
	);

// Number of photos in this gallery
var photoNum = photoArray.length;
*/
/*--------------------------------------------------------------------------*/

// 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 = '';
		var newelem = document.createElement("span");
        newelem.innerHTML = content;
        element.appendChild(newelem);

	}
});

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

var Slideshow = Class.create();

Slideshow.prototype = {
	initialize: function(photoId) {
        var idsuffix = flipflop?'1':'';
		this.photoId = photoId;
		this.photo = 'Photo'+idsuffix;
		this.photoBox = 'Container'+idsuffix;
		this.prevLink = 'PrevLink'+idsuffix;
		this.nextLink = 'NextLink'+idsuffix;
		this.captionBox = 'CaptionContainer'+idsuffix;
		this.caption = 'Caption'+idsuffix;
		this.counter = 'Counter'+idsuffix;
		this.loader = 'Loading'+idsuffix;
	},
	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
		Element.setHref(this.prevLink, document.location.href.split("#")[0]+"#" + (photoId+1));
		Element.setHref(this.nextLink, document.location.href.split("#")[0]+"#" + (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() {
	       return;
		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(){
	   startTimeout();
	   if(switching) return;
		new Effect.Fade(this.loader, {delay: 0.5, duration: 0.3});
		// Workaround for problems calling object method "afterFinish"
	      Element.show(this.photo);
          Element.show(this.captionBox);Element.show(this.prevLink);Element.show(this.nextLink);
          
           var reset_l = startwidth_outer+'px';
           var move_l = startwidth_outer*-1;
          if(!tonext){
            reset_l = '-'+startwidth_outer+'px';
            move_l = startwidth_outer;
          }
          if(zoomEff) zoomEff.cancel();
          if(!flipflop){
            $('Container').style.left=reset_l;
            $('Photo').style.width = startwidth_inner;
          }else{    
            $('Container1').style.left=reset_l;  
            $('Photo1').style.width = startwidth_inner;
          }
          switching = true;
          new Effect.Parallel([
              new Effect.Move('Container1', { x: move_l, y:0, mode: 'relative' }),
              new Effect.Move('Container', { x: move_l, y:0, mode: 'relative' })
              ],{afterFinish:this.startzoom });
          
              
	      flipflop = !flipflop;
		
	},
	startzoom: function(){
	       switching = false;
	function zoomin(){
            zoomwidth = zoomwidth+0.2;
            if(flipflop){
              $('Photo').style.width = zoomwidth+'px';
            }else{
              $('Photo1').style.width = zoomwidth+'px';
            }
	   }
	
       zoomwidth = startwidth_inner;
      $('Photo1').style.width = zoomwidth+'px';
      $('Photo').style.width = zoomwidth+'px';
      
	       return; //ZOOM DEAKTIVIERT
      if(!flipflop){
        zoomEff = new Effect.Move('Photo', {x: -0.1, y: -0.1, duration: time4slide, afterUpdate: zoomin});
      }else{    
        zoomEff = new Effect.Move('Photo1', {x: -0.1, y: -0.1, duration: time4slide, afterUpdate: zoomin});
      }
	},
	nextPhoto: function(){
	    tonext=true;
		// Figure out which photo is next
		(photoId == (photoArray.length - 1)) ? photoId = 0 : photoId++;
		this.initSwap();
	},
	prevPhoto: function(){
	    tonext=false;
		// Figure out which photo is previous
		(photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
		this.initSwap();
	},
	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();
	},
	openMoreLink: function(){
    	window.location.href= photoArray[photoId][4];
    },
	
	get_tt_news_data: function(){
        var Xarr = new Array();
            
        var i =0;
        
        
        $$('#unseen4slideshow .news_container_list').each(function(n){
            var img = n.down('.image_list img').src;
            var text = n.down('.news_container_text').innerHTML;
            var morelink = n.down('.morelink a').href
           Xarr[i] = new Array(img, startwidth_inner, "300",text,morelink);
           i++;
        
        });
        return Xarr;
    
    }
    	
	
	
}

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

// 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');
		}
	},
	'#NextLink' : function(element){
		element.onmouseover = function(){
			//soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.nextPhoto();
			//soundManager.play('select');
		}
	},
	'#ImageopenLink' : function(element){ //openfirstlink
		element.onmouseover = function(){
			//soundManager.play('beep');
		}
		element.onclick = function(elem){
			var myPhoto = new Slideshow(photoId);
			myPhoto.openMoreLink();
		}
	},
	'#Photo1' : function(element){
		element.onload = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.showPhoto();
		}
	},
	'#PrevLink1' : function(element){
		element.onmouseover = function(){
			//soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.prevPhoto();
			//soundManager.play('select');
		}
	},
	'#NextLink1' : function(element){
		element.onmouseover = function(){
			//soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.nextPhoto();
			//soundManager.play('select');
		}
	},
	a : function(element){
		element.onfocus = function(){
			this.blur();
		}
	},
	'#NewsslideOuterContainer' : function(element){
        element.onmousemove = function(){
            startTimeout();
        }
    },
};
var timeout;
function startTimeout(){
	if(timeout) window.clearTimeout(timeout);
	timeout = window.setTimeout(function(){new Slideshow(photoId).nextPhoto();},(time4slide*1000));
}


// Add window.onload event to initialize
Behaviour.addLoadEvent(init);
Behaviour.apply();
function init() {
    
	var myPhoto = new Slideshow(photoId);
    photoArray = myPhoto.get_tt_news_data();
    photoNum = photoArray.length;
    
	var myPhoto = new Slideshow(photoId);
    
	myPhoto.initSwap();
	//soundManagerInit();
    startTimeout();
}