/*copyright Fiona Coulter 2010. All rights reserved.*/


var ImageSlideShow = new Class({
							      
    getOptions: function(){
        return { 
		showCaptions:false,
		loader : [],
		milliseconds: 10000,
		transition: true,
		autoStart:true, 
		thumbnails:true, 
		scrollerType:'click',
		orientation: 'horizontal'};
    },	
    initialize: function(el,options){
        this.setOptions(this.getOptions(), options);
		this.container = $(el);
		this.container.addClass('imgContainer-'+this.options.orientation);
		
		this.version = '1.1';
		var containerSize = this.container.getSize();
		if(!containerSize.size)
		{
		  this.version = '1.2';	
		}
		
		this.currURL = '';
		
		this.imgUrls = new Array();
		this.options.loader.each(function(lel){ this.imgUrls.push(lel.src)}.bind(this));
		this.loadCaptions();
		
		this.loadSlides();
		this.createSlideHolder();
		this.slideIndex = 0;
		
		this.fader = null;
		if(this.options.transition)
		{
			if(this.version == '1.1')
			{
			   this.fader = new Fx.Style(this.slideImage,'opacity', {duration:1000});
			}
			else
			{
			   this.fader = new Fx.Tween(this.slideImage,'opacity', {duration:1000});
			}

		}
		
		// styles
		
		if(this.options.showCaptions)
		{
			this.createCaptionHolder();
		}
		
		
		this.createController();
		
	    if ( this.slides[0] )
		{
		  this.showSlide(0);
		}
		
		
    },
	createSlideHolder: function(){
		this.slideHolder = new Element('div', { 'class':'slideHolder' });
		this.slideImage = new Element('img', { 'class':'slideImage-'+this.options.orientation });
		this.container.appendChild( this.slideHolder );
		this.slideHolder.appendChild( this.slideImage );
        this.slideImage.addEvent('click',function(e){e = new Event(e); if(e.relatedTarget != this.controller){ window.location.href= this.currURL;}}.bind(this));		
	},
	loadSlides: function(){	
		this.slides = new Asset.images(this.imgUrls, {
			onComplete: function(){
			this._thumbnails();
				
			if(this.options.autoStart)
			{
			  this.startShow();
			}

			}.bind(this),
			onProgress:function(i){
			}
			
		});
	},
	showSlide: function(slideNum){
			
			this.slideImage.src = this.slides[ slideNum ].src;	
			this.slideIndex = slideNum;	
			this.currURL = this.options.loader[ slideNum ].url;
			if(this.captionText)
			{
			   this.captionText.innerHTML = this.captions[slideNum];
			}
			if(this.options.transition)
			{
				if(this.version == '1.1')
				{
				  this.fader.start(0,1);
				}
				else
				{
				  //this.fader.start('opacity','1');	
				  this.slideImage.fade('hide');
				  this.slideImage.fade('in');
				}
			}
 	},
	nextSlide: function(){
		if ( this.slideIndex < this.slides.length-1 ){
			this.slideIndex++;
		}		 
		else
		{
		    this.slideIndex = 0;	
		}
		this.showSlide( this.slideIndex );
	},
	prevSlide: function(){
		if ( this.slideIndex > 0 ){
			this.slideIndex--;
		}		 
		else
		{
		    this.slideIndex = this.slides.length-1 ;	
		}
		this.showSlide( this.slideIndex );
	},
	lastSlide: function(){
		this.slideIndex = this.slides.length-1 ;			
		this.showSlide( this.slideIndex );
	},
	firstSlide: function(){
		this.slideIndex = 0;			
		this.showSlide( this.slideIndex );
	},	
	startShow: function(){	
	  this.intervalID = this.nextSlide.periodical( this.options.milliseconds, this );
	},
	stopShow: function(){
		this.intervalID = $clear( this.intervalID );
	},
	togglePlay: function(){
		if(this.intervalID || this.playButton.hasClass('playButtonPlaying')){
			this.stopShow();
			this.playButton.removeClass('playButtonPlaying');			
			this.playButton.addClass('playButtonPaused');
			
		}
		else
		{
		  this.startShow();	
		  this.playButton.removeClass('playButtonPaused');		  
		  this.playButton.addClass('playButtonPlaying');
		}
	},
	_thumbnails: function(){
		this.thumbWidthTotal = 0;
		this.thumbHeightTotal = 0;
 		if (this.options.thumbnails === true) 
 	    {
		     this.thumbnailHolder = new Element('div', { 'class':'thumbnailHolder-' + this.options.orientation});
		     this.container.appendChild( this.thumbnailHolder );
		     this.thumbnailHolderInner = new Element('div', { 'class':'thumbnailHolderInner-' + this.options.orientation});
		     this.thumbnailHolder.appendChild( this.thumbnailHolderInner );

		   	 this.thumbnails = new Array();
			 
			for(var i=0; i<this.imgUrls.length; i++)
			{
				var newImg = new Element('img', { 'class':'thumbnail-'+ this.options.orientation, 'title': this.options.loader[i].heading.replace(/</g, '&lt;').replace(/>/g, '&gt;'), 'alt': this.options.loader[i].heading.replace(/</g, '&lt;').replace(/>/g, '&gt;'), 'src': this.slides[i].src });
				this.thumbnails.push(newImg);
				this.thumbnailHolderInner.appendChild(this.thumbnails[i]);
			    this.thumbnails[i].addEvent('click', this.showSlide.bind(this,i));
				var thumbsize = this.thumbnails[i].getSize();
				if(!thumbsize.size)
				{
					thumbsize={size:this.thumbnails[i].getSize()};
				}
				//alert(thumbsize.size.y);
                this.thumbWidthTotal += thumbsize.size.x;
		        this.thumbHeightTotal += thumbsize.size.y;	
				var margin = 2 * this.thumbnails[i].getStyle('margin').toInt();
                this.thumbWidthTotal += margin;
		        this.thumbHeightTotal + margin;	
				
			}
			
			var length = 0;
			if(this.options.orientation == 'horizontal')
			{
			  length = this.thumbWidthTotal;	
			}
			else
			{
			  length = this.thumbHeightTotal;	
			}
						
		   if( this.options.scrollerType == 'mouseover')
		   {
		     this.scroller = new ThumbnailScroller(this.thumbnailHolder, {area: 80, velocity: 0.3});
			 this.thumbnailHolder.addEvent('mouseover', this.scroller.start.bind(this.scroller));
			 this.thumbnailHolder.addEvent('mouseout', this.scroller.stop.bind(this.scroller));	
             this.thumbnailHolder.setStyle('cursor', 'pointer');		   
		   }
		   else if(this.options.scrollerType == 'click')
		   {
		      this.scroller = new ThumbnailClickScroller(this.thumbnailHolder, length, {'orientation':this.options.orientation});
              this.thumbnailHolder.setStyle('cursor', 'pointer');		   
			   
			  
		   }


	
		}

	},
	loadCaptions:function(){
			
			this.captions = new Array();
			for(var i=0; i<this.options.loader.length; i++)
			{
				this.captions[i] = '';
				if(this.options.loader[i].caption)
				{
				  this.captions[i] = this.options.loader[i].caption;	
				  
				}
			}

	},
	createCaptionHolder:function(){
				this.captionHolder = new Element('div', { 'class':'captionHolder' });
		        this.container.appendChild( this.captionHolder );
				this.captionText = new Element('div', {'class':'captionText'});
				this.captionHolder.appendChild( this.captionText );
	},
	createController:function(){
				this.controller = new Element('div', { 'class':'controller' });
				if(this.version == '1.1')
				{
				   this.controllerFader = new Fx.Style(this.controller,'opacity', {duration:500});
				   this.controllerFader.set(0);
                   this.slideImage.addEvent('mouseover',function(e){e = new Event(e); if(e.relatedTarget != this.controller){this.controllerFader.start(0,1)}}.bind(this));
				   this.slideImage.addEvent('mouseout',function(e){e = new Event(e); if(e.relatedTarget != this.controller){this.controllerFader.start(1,0);}}.bind(this));
				   this.controller.addEvent('mouseover',function(){this.controllerFader.set(1)}.bind(this));				   
				}
				else
				{
					this.controller.fade('hide');
                   this.slideImage.addEvent('mouseover',function(e){e = new Event(e); if(e.relatedTarget != this.controller){this.controller.fade(0.7)}}.bind(this));
				   this.slideImage.addEvent('mouseout',function(e){e = new Event(e); if(e.relatedTarget != this.controller){this.controller.fade('out');}}.bind(this));
				   this.controller.addEvent('mouseover',function(){this.controller.fade('in')}.bind(this));				   
					
				   //this.controllerFader = new Fx.Tween(this.controller,'opacity', {duration:500});
				}
				
		        this.container.appendChild( this.controller );
				
	            this.firstButton = new Element('div', {});
				this.firstButton.addClass('firstButton');
			    this.firstButton.addEvent('click', this.firstSlide.bind(this));
				
				this.controller.appendChild(this.firstButton);
				
	            this.prevButton = new Element('div', {});
				this.prevButton.addClass('prevButton');
			    this.prevButton.addEvent('click', this.prevSlide.bind(this));
				
				this.controller.appendChild(this.prevButton);				
				
	            this.playButton = new Element('div', {});
				if(this.options.autoStart){ this.playButton.addClass('playButtonPlaying');} else { this.playButton.addClass('playButtonPaused');}
			    this.playButton.addEvent('click', this.togglePlay.bind(this));				
				this.controller.appendChild(this.playButton);
				
	            this.nextButton = new Element('div', {});
				this.nextButton.addClass('nextButton');
			    this.nextButton.addEvent('click', this.nextSlide.bind(this));
				
				this.controller.appendChild(this.nextButton);
				
	            this.lastButton = new Element('div', {});
				this.lastButton.addClass('lastButton');
			    this.lastButton.addEvent('click', this.lastSlide.bind(this));
				
				this.controller.appendChild(this.lastButton);
				
				
				
	}
	

							   
});
							   
ImageSlideShow.implement(new Events);
ImageSlideShow.implement(new Options);



/*
The class for the mouseover scroller
Note:
	The Scroller requires an XHTML doctype.

*/

var ThumbnailScroller = new Class({

	options: {
		area: 20,
		velocity: 1,
		onChange: function(x, y){
			this.element.scrollTo(x, y);
		},
		button:null
	},

	initialize: function(element, options){
		this.setOptions(options);
		this.element = $(element);
		if(this.options.button)
		{
			this.mousemover = this.options.button;
		}
		else
		{
		    this.mousemover = ([window, document].contains(element)) ? $(document.body) : this.element;
		}
	},

	/*
	Property: start
		The scroller starts listening to mouse movements.
	*/

	start: function(){
		this.coord = this.getCoords.bindWithEvent(this);
		this.mousemover.addListener('mouseover', this.coord);
	},

	/*
	Property: stop
		The scroller stops listening to mouse movements.
	*/

	stop: function(){
		this.mousemover.removeListener('mouseout', this.coord);
		this.timer = $clear(this.timer);
	},

	getCoords: function(event){
		this.page = (this.element == window) ? event.client : event.page;
		if (!this.timer) this.timer = this.scroll.periodical(50, this);
	},

	scroll: function(){
		var el = this.element.getSize();
		if(!el.size)
		{
			el={size:this.element.getSize(), scroll:this.element.getScroll(), scrollSize:this.element.getScrollSize()};
		}
		var pos = this.element.getPosition();

		var change = {'x': 0, 'y': 0};
		for (var z in this.page){
			if (this.page[z] < (this.options.area + pos[z]) && el.scroll[z] != 0)
				change[z] = (this.page[z] - this.options.area - pos[z]) * this.options.velocity;
			else if (this.page[z] + this.options.area > (el.size[z] + pos[z]) && el.scroll[z] + el.size[z] != el.scrollSize[z])
				change[z] = (this.page[z] - el.size[z] + this.options.area - pos[z]) * this.options.velocity;
		}
		if (change.y || change.x) this.fireEvent('onChange', [el.scroll.x + change.x, el.scroll.y + change.y]);
	}

});


ThumbnailScroller.implement(new Events);
ThumbnailScroller.implement(new Options);

/*
scrollers behaviour - thumbnail click scroller


*/

var ThumbnailClickScroller = new Class({

    getOptions: function(){
        return {
			orientation:'horizontal'
        };
    },
    initialize: function(dlist, length, options){
        this.setOptions(this.getOptions(), options);
        this.dlist = $(dlist);
			
		    this.inner = dlist.getFirst('div');
			
			this.version = '1.1';
			this.outerSize = dlist.getSize();
			
            if(!this.outerSize.size)
			{
		        this.outerSize = {size:dlist.getSize()};
				this.version = '1.2';
			}
			
		    this.currLeft = 0;
		    this.currTop = 0;
			this.margin = 0;
			this.direction = this.options.orientation;
			this.length = length;
						
            this.forwardButton = new Element('div', {'html':'&nbsp;'}).injectAfter(this.dlist);
			this.forwardButton.setStyle('cursor', 'pointer');
			
			if ( this.direction == 'horizontal')
			{			
			   this.forwardButton.addEvent('click', this.scrollForward.bind(this));
               this.forwardButton.addClass('rightArrow');
			   
			}
			else
			{
			   this.forwardButton.addEvent('click', this.scrollDown.bind(this));
               this.forwardButton.addClass('downArrow');			   
			}
			
            this.backButton = new Element('div',  {'html':'&nbsp;'}).injectAfter(this.dlist);
			this.backButton.setStyle('cursor', 'pointer');			
			if ( this.direction == 'horizontal')
			{
			    this.backButton.addEvent('click', this.scrollBack.bind(this));
                this.backButton.addClass('leftArrow');
				
			}
			else
			{
			    this.backButton.addEvent('click', this.scrollUp.bind(this));
                this.backButton.addClass('upArrow');
				
			}
            this.scroller = new Fx.Scroll(this.dlist, {offset: { 'x': 0, 'y': 0 }});			
		
	},
	scrollForward : function(){
		
		
		if ( (this.currLeft + this.outerSize.size.x ) < this.length )
		{
			this.currLeft = this.currLeft + this.outerSize.size.x-this.margin;
		}
		
		if(this.version == '1.1')
		{
		    this.scroller.scrollTo( this.currLeft, this.currTop );
		}
		else
		{
		   this.scroller.start( this.currLeft, this.currTop );
		}
				
		
	},
	scrollBack : function(){
		
		if ( (this.currLeft - this.outerSize.size.x ) > 0 )
		{
			this.currLeft = this.currLeft - this.outerSize.size.x+this.margin;
		}
		else
		{
		  this.currLeft = 0;	
		}
		
		if(this.version == '1.1')
		{
		    this.scroller.scrollTo( this.currLeft, this.currTop );
		}
		else
		{
		   this.scroller.start( this.currLeft, this.currTop );
		}
		
		
	},
	scrollDown : function(){
		
		
		if ( (this.currTop + this.outerSize.size.y) < this.length )
		{
			this.currTop = this.currTop + this.outerSize.size.y;
		}

		if(this.version == '1.1')
		{
		    this.scroller.scrollTo( this.currLeft, this.currTop );
		}
		else
		{
		   this.scroller.start( this.currLeft, this.currTop );
		}
		
		
	},
	scrollUp : function(){
		
		if ( (this.currTop - this.outerSize.size.y) > 0 )
		{
			this.currTop = this.currTop - this.outerSize.size.y;
		}
		else
		{
			this.currTop = 0;
		}
		
		if(this.version == '1.1')
		{
		    this.scroller.scrollTo( this.currLeft, this.currTop );
		}
		else
		{
		   this.scroller.start( this.currLeft, this.currTop );
		}
		
		
	}


});

ThumbnailClickScroller.implement(new Events);
ThumbnailClickScroller.implement(new Options);