/*globals $, $$, $clear, $defined, Class, Element, Events, Options*/

var SimpleSlideshow = new Class({
	options: {
	    showControls: true,	    
	    controlsContainer: undefined,
	    showDuration: 6000,
	    showTOC: true,
	    showDots: true,
	    tocWidth: 20,
	    tocClass: 'slide-show-control',
	    tocActiveClass: 'active'
	},
	Implements: [Options, Events],
	initialize: function(container, elements, /*blurbs,*/ options) {
		this.setOptions(options);
	    //settings
	    this.container = $(container);
	    
	    this.elements = $$(elements);
		//this.blurbs = $$(blurbs);
	    
	    ///this.controlsContainer = $(options.controlsContainer);
	    
	    this.currentIndex = 0;
	    
	    this.interval = '';
	    
	    if (this.options.showTOC) {
			this.toc = [];
	    }
		
		// slide show circles at the bottom	
		this.circles = [];
		
	    //assign
		this.elements.each(function (el, i) {
			this.circles.push(new Element('li#slideshow-circle-' + i).wraps(new Element('img', {
				'src': '/k/kids_website/images/nav-dot-off.png',
				'class': this.options.tocClass + (i === 0 ? ' ' + this.options.tocActiveClass : '') + ' home-slide-nav-dots'
			//}).inject('slideshow-circles')));
			}).inject(this.options.controlsContainer)));
			
			
			el.addEvents({
				mouseenter: function(e, slide) {
					if(e) {
						e.stop();
					}
					
					this.stop();
					this.show(i);
	            }.bind(this),		            
				mouseleave: function() { 	
					this.start(i); 
				}.bind(this)
			});
			
			if (this.options.showTOC) {
				this.toc.push(new Element('a', {
					//text: i+1,
					'href': '#',
					'class': this.options.tocClass + (i === 0 ? ' ' + this.options.tocActiveClass : ''),
					'events': {
						mouseenter: function(e) {
							if(e) {
								e.stop();
							}
							
							this.stop();
							this.show(i);
			            }.bind(this),		            
						mouseleave: function() { 
							this.start(i); 
						}.bind(this)
					}//,
	          //styles: {
	          //  left: ((i + 1) * (this.options.tocWidth + 10))
	          //}
				}).wraps('home-options-' + i));
			//}).inject('homeOptionsList'));
			}
		  
			if (i > 0) {
				var j = i;
				
				j++;
				//$$('div#blurb' + j++).set('opacity',0); // hide blurbs at initializiation
				
				el.setStyles({
					'opacity': 0//,
					//'visibility': 'visiblie'
				});
			} else {
				$$('li#home-options-0').addClass('active'); // initialize first mouseover on slide controls
			}
		}, this);
	    
	    //next,previous links
	    if(this.options.showControls) {
			this.createControls();
	    }
		
	    //events
		this.container.addEvents({
			mouseenter: function() { this.stop(); }.bind(this),
			mouseleave: function() { this.start(); }.bind(this)
	    });
	  },
	  
	  show: function(to) {
		var counter = this.currentIndex;
		this.elements[counter].fade('out');
		
		//this.blurbs[counter].fade('out');
		this.circles[counter].getChildren('img').setProperty('src', '/k/kids_website/images/nav-dot-off.png');
		
	    if(this.options.showTOC) {
			this.toc[this.currentIndex].getChildren().removeClass(this.options.tocActiveClass);
		}
		
		this.circles[this.currentIndex = ($defined(to) ? to : (counter < this.elements.length - 1 ? counter+1 : 0))].getChildren('img').setProperty('src', 'k/kids_website/images/nav-dot-on.png');
		
		this.elements[this.currentIndex =($defined(to) ? to : (counter < this.elements.length - 1 ? counter+1 : 0))].fade('in');
		
		//this.blurbs[this.currentIndex = ($defined(to) ? to : (counter < this.blurbs.length - 1 ? counter+1 : 0))].fade('in');
		if(this.options.showTOC) {
			this.toc[this.currentIndex].getChildren().addClass(this.options.tocActiveClass);
		}
  },
  start: function() {
    this.interval = this.show.bind(this).periodical(this.options.showDuration);
  },
  stop: function() {
	$clear(this.interval);
  },
  //"private"
  createControls: function() {
    var next = new Element('li',{
		'id': 'next',
		'class': 'slideshow-right',
		'text': '>>',
		'events': {
		    click: function(e) {
				if(e) {
					e.stop();
				}
				
				this.stop(); 
				
				this.show();
			}.bind(this)
		}
    }).inject(this.options.controlsContainer, 'bottom');
    
    var previous = new Element('li', {
      'id': 'previous',
      'class': 'slideshow-left',
      'text': '<<',
      'events': {
        click: function(e) {
			if(e) {
				e.stop();
			}
			
			this.stop();
			 
			this.show(this.currentIndex !== 0 ? this.currentIndex -1 : this.elements.length-1);
        }.bind(this)
      }
    }).inject(this.options.controlsContainer, 'top');
  }
});