/* carousel.js */
var carousel = function(){
  return {
		
		pos:0,
		MODE_SPLASH: 1,
		MODE_CONTENT: 2,
		MODE_STATIC: 3,
		leadInterval: 11000,
		displayInterval: 11000,
		runCount: 0,
		anim: {
		  duration: 1.2,
			easing: "easeInStrong"
		},
		
		imageTpl:  new Ext.Template(
      '<table class="carousel {cls}"><tr><td><img class="carousel-image" src="{src}" /></td></tr></table>'
    ),
		
		storyBoardSlideTpl:  new Ext.Template(
      '<div class="storyboard-slide" style="left:{left}px;">',
        '{img}',
        '<div class="overimage" style="{}">',
          '<div class="bg-overimage"></div>',
          '<h2>{headline}</h2>',
          //'<div class="page-trailer">',
            //'{headline}',
          //'</div>',
					'<a class="carousel-jump internal" href="{url}">{strapline}</a>',
					'<div id="logo"></div>',
        '</div>',
      '</div>'
    ),
		
		setMode: function(mode){
		  this.mode = mode;
		},
		
		setImages: function(images){
		  this.count = images.length;
			this.images = images;
		},
		
		setContent: function(content){
		  this.content = content;
		},
		
		setData: function(data){
		  this.data = data;
		},
		
		lock: function(){
		  this.locked = true;
		},
		
		unlock: function(){
		  this.locked = false;
		},
		
    init: function(){
			if(null){
				this.initSlides();
			  this.start();
			} else if(this.mode==this.MODE_CONTENT || this.mode==this.MODE_SPLASH){
			  this.initStoryBoard();
			}
		},
		
		initStoryBoard: function(){
		  if(this.mode != this.MODE_STATIC){
				Ext.get('carousel-left').on('click', this.userPrev, this);
			  Ext.get('carousel-right').on('click', this.userNext, this);
			}
			this.currentSlide = Ext.select('.current-slide').item(0);
			//this.contentEl = Ext.get('section-pos-1');
			var nextPos = this.pos + 1;
			if(nextPos >= this.content.length) nextPos = 0;
			var nextContent = this.content[nextPos];
			
			var prevPos = this.pos - 1;
			if(prevPos < 0) prevPos = this.content.length - 1;
			var prevContent = this.content[prevPos];
			
			var img = "<img class='carousel-cms-image' src='"+nextContent.src+"' />";
			if(nextContent.image_link == '1'){
			  img = '<a href="'+nextContent.url+'">'+img+'</a>';
			}
			this.nextSlide = this.storyBoardSlideTpl.append('carousel', {left: 575,
																											             headline: nextContent.headline,
																																	 strapline: nextContent.strapline,
																																	 src: nextContent.src,
																																	 img: img,
																																	 url: nextContent.url
																																	 }, true);
			this.nextSlide.addClass('next-slide');
			
			var img = "<img class='carousel-cms-image' src='"+prevContent.src+"' />";
			if(prevContent.image_link == '1'){
			  img = '<a href="'+prevContent.url+'">'+img+'</a>';
			}
			this.prevSlide = this.storyBoardSlideTpl.append('carousel', {left: -575,
																											             headline: prevContent.headline,
																																	 strapline: prevContent.strapline,
																																	 src: prevContent.src,
																																	 img: img,
																																	 url: prevContent.url
																																	 }, true);
			this.prevSlide.addClass('prev-slide');
			//Cufon.refresh();
			
			
			this.task = {
			  run: carousel.next,
			  interval: this.data.step_delay || this.displayInterval,
			  scope: carousel
			};
			(function(){
				Ext.TaskMgr.start(carousel.task);
			}).defer(this.data.initial_delay || this.leadInterval);

		},
		
		setStoryboardPrevNext: function(){
		  
		},
		
		lock: function(){
		  this.locked = true;
			this.runCount = 0;
			Ext.get('carousel-nav').fadeOut({duration: .25});
		},
		
		unlock: function(){
		  this.locked = false;
			this.runCount = 0;
			Ext.get('carousel-nav').fadeIn({duration: .5});
			Ext.select('.carousel-button').removeClass('on').removeClass('off');
		},
		
		userPrev: function(){
			if(this.locked == true) return;
		  this.prev();
			
			Ext.TaskMgr.stop(this.task);
			(function(){Ext.TaskMgr.start(this.task);}).defer(this.data.initial_delay || this.leadInterval, this);
			
		},
		
		userNext: function(){
			if(this.locked == true) return;
		  this.next();
			
			Ext.TaskMgr.stop(this.task);
			(function(){Ext.TaskMgr.start(this.task);}).defer(this.data.initial_delay || this.leadInterval, this);
			
		},
		
		prev: function(){
			
			
			if(this.locked == true) return;
			this.lock();
			if(this.mode != this.MODE_STATIC){
			  Ext.get('carousel-left').addClass('on');
			  Ext.get('carousel-right').addClass('off');
			}
			this.pos--;
			if(this.pos < 0) this.pos = this.content.length - 1;
			
			var baseLeft = Ext.get('carousel').getLeft();
		  this.currentSlide.setX(baseLeft+575, this.anim);
			var anim = this.anim;
			anim.callback = function(){carousel.setFromPrev();};
			this.prevSlide.setX(baseLeft, anim);
			
		},
		
		setFromPrev: function(){
		  if(this.runCount>0) return;
			this.runCount++;
			
			if(this.nextSlide) this.nextSlide.remove();
			this.currentSlide.removeClass('current-slide').addClass('next-slide');
			this.prevSlide.removeClass('prev-slide').addClass('current-slide');
			
			this.nextSlide = this.currentSlide;
			this.currentSlide = this.prevSlide;
			this.prevSlide = null;
			
			var prevPos = this.pos - 1;
			if(prevPos < 0) prevPos = this.content.length - 1;
			var prevContent = this.content[prevPos];
			
			var img = "<img class='carousel-cms-image' src='"+prevContent.src+"' />";
			if(prevContent.image_link == '1'){
			  img = '<a href="'+prevContent.url+'">'+img+'</a>';
			}
			this.prevSlide = this.storyBoardSlideTpl.append('carousel', {left: -575,
																											             headline: prevContent.headline,
																																	 strapline: prevContent.strapline,
																																	 src: prevContent.src,
																																	 img: img,
																																	 url: prevContent.url
																																	 }, true);
			
			this.prevSlide.addClass('prev-slide');
			
			//Cufon.refresh();
			(function(){carousel.unlock();}).defer(100);
			
			//Ext.TaskMgr.stop(this.task);
			//this.task.interval = this.content[this.pos].delay;
			//Ext.TaskMgr.start(this.task);
		},
		
		next: function(){
			if(this.locked == true) return;
			this.lock();
			if(this.mode != this.MODE_STATIC){
				Ext.get('carousel-right').addClass('on');
			  Ext.get('carousel-left').addClass('off');
			}
			this.pos++;
			if(this.pos >= this.content.length) this.pos =  0;

			var baseLeft = Ext.get('carousel').getLeft();
		  this.currentSlide.setX(baseLeft-575, this.anim);
			var anim = this.anim;
			anim.callback = function(){carousel.setFromNext();};
			this.nextSlide.setX(baseLeft, anim);
		
		},
		
		setFromNext: function(){
			if(this.runCount>0) return;
			this.runCount++;
			
			if(this.prevSlide) this.prevSlide.remove();
			
			this.currentSlide.removeClass('current-slide').addClass('prev-slide');
			this.nextSlide.removeClass('next-slide').addClass('current-slide');
			
			this.prevSlide = this.currentSlide;
			this.currentSlide = this.nextSlide;
			this.nextSlide = null;
		  
			var nextPos = this.pos + 1;
			if(nextPos >= this.content.length) nextPos = 0;
			var nextContent = this.content[nextPos];
			
			
			var img = "<img class='carousel-cms-image' src='"+nextContent.src+"' />";
			if(nextContent.image_link == '1'){
			  img = '<a href="'+nextContent.url+'">'+img+'</a>';
			}
			this.nextSlide = this.storyBoardSlideTpl.append('carousel', {left: 575,
																											             headline: nextContent.headline,
																																	 strapline: nextContent.strapline,
																																	 src: nextContent.src,
																																	 img: img,
																																	 url: nextContent.url
																																	 }, true);
			
			this.nextSlide.addClass('next-slide');
			
			

			//Cufon.refresh();
			(function(){carousel.unlock();}).defer(100);
			
			//Ext.TaskMgr.stop(this.task);
			//this.task.interval = this.content[this.pos].delay;
			//Ext.TaskMgr.start(this.task);
		},
		
		
		
		initSlides: function(){
		  for(var i=0;i<this.count;i++){
			  this.imageTpl.append(Ext.getBody(), {cls:'hide', src: this.images[i].src});
			}
		},
		
		start: function(){
			this.task = {
			  run: this.nextImage,
				interval: this.data.step_delay || this.displayInterval
			};
		  /*(function(){
        Ext.TaskMgr.start(this.task);
			}).defer(this.this.data.initial_delay || this.leadInterval, this);*/
		},
		
		nextImage: function(){
      carousel.pos++;
			if(carousel.pos >= carousel.count) carousel.pos = 0;
			carousel.setImage(carousel.pos);
		},
		
		setImage: function(pos){
		  this.imageTpl.append('carousel', {cls:'back', src: this.images[pos].src});
			var anim = this.anim;
			anim.remove = true;
			anim.callback = function(){
			  Ext.select('.carousel').item(0).addClass('front').removeClass('back');
			};
			Ext.select('.carousel').item(0).fadeOut(anim);
			
		}
		
	}
}();

Ext.onReady(function(){ carousel.init(); });