var carousel = function(){
  return {
		MODE_PORTFOLIO: 1,
		MODE_PROPERTY: 2,
		MODE_SLIDESHOW: 3,
		MODE_SEARCH: 4,
		locked: false,
		items: [],
		portfolioItem: new Ext.Template(
      '<div style="left:{left}px;top:{top}px" class="carousel">',
			  '<img src="{src}" />',
				'<div class="carousel-info"><div class="bg-carousel-info"></div><div class="carousel-info-text">{info}</div></div>',
				'<div class="carousel-block">',
					'<a href="/'+LANG+'/portfolio/browse/{url}/" class="jump">VIEW</a>',
			    '<div class="carousel-name">{name}</div>',
					'<div class="carousel-strapline">{strapline}</div>',
				'</div>',
			'</div>'
    ),
		propertyItem: new Ext.Template(
      '<div style="left:{left}px;top:{top}px" class="carousel property">',
			  '<table class="p-image"><tr><td>',
				'<div class="img-wrapper"><img src="{src}" /><div class="img-cover"><img src="/img/bg/bg-imgcover.png" /></div></div>',
				'</td></tr></table>',
				'<div class="services-section {services_section}"></div>',
				'<div class="carousel-info"><div class="bg-carousel-info"></div><div class="carousel-info-text">{info}</div></div>',
				'<div class="carousel-block" id="item-{num}">',
					'<a class="jump down">CLICK TO READ</a>',
			    '<div class="carousel-name">{name}</div>',
					//'<div class="carousel-strapline">{strapline}',
					  //'<div class="carousel-jump">CLICK TO READ</div>',
					'</div>',
					'<div class="carousel-text">{text}</div>',
				'</div>',
			'</div>'
    ),
		slideshowItem: new Ext.Template(
      '<div style="left:{left}px;top:{top}px" class="carousel slide">',
			  '<table class="slide-container"><tr><td>',
				'<div class="img-wrapper"><img src="{src}" /><div class="img-cover"><img src="/img/bg/bg-imgcover.png" /></div></div>',
				'</td></tr></table>',
				//'<div class="carousel-info"><div class="bg-carousel-info"></div><div class="carousel-info-text">{info}</div></div>',
				'{a_open}',
				'<div class="carousel-block">',
					'<div class="carousel-caption">{strapline}</div>',
				'</div>',
				'{a_close}',
			'</div>'
    ),
		portfolioPositions: {
			top: 0,
      left: 4,
			mid: 342,
			right: 680
	  },
		propertyPositions: {
			top: 35,
      left: -515,
			mid: 191,
			right: 900
	  },
		slideshowPositions: {
			top: 12,
      left: 0,
			mid: 0,
			right: 0
	  },
		
		setMode: function(mode){
		  this.mode = mode;
		},
		
		open: function(){
		  this.unlock.defer(600, this);
		  this.liveItems.fadeIn({duration: .5, easing: "easeOutStrong"});
			this.wrapper.setHeight(this.wrapper.child('.onready-guide').getHeight(), {duration: 1, easing: "easeOutStrong"});
		},
		
		close: function(){
			this.lock();
		  this.liveItems.fadeOut({duration: .5, easing: "easeOutStrong"});
			(function(){carousel.wrapper.setHeight(30, {duration: 1, easing: "easeOutStrong"})}).defer(300);
		},
		
		setItems: function(items){
		  this.items = items;
		},
		
		init: function(){
			this.wrapper = Ext.get('carousel');
			this.setNavHandler();
			switch(this.mode){
			  case this.MODE_PORTFOLIO:
				case this.MODE_SEARCH:
				  this.initPortfolioMode(); break;
				case this.MODE_PROPERTY:
				  this.initPropertyMode(); break;
				case this.MODE_SLIDESHOW:
				  this.initSlideshowMode(); break;
					
			}
		},
		
		setNavHandler: function(){
			this.coverEl = Ext.get('carousel-cover');
			this.coverEl.setVisibilityMode(Ext.Element.DISPLAY);
		  Ext.get('main-nav').hover(this.showCover, this.hideCover, this);
		},
		
		showCover: function(){
		  Ext.fly('carousel-cover').fadeIn({duration: .3, endOpacity: .65, stopFx: true});
		},
		
		hideCover: function(){
		  Ext.fly('carousel-cover').fadeOut({duration: .2, stopFx: true});
		},
		
		initPortfolioMode: function(){
			var length = (this.items.length > 2)? 3 : this.items.length;
			this.itemTemplate = this.portfolioItem;
			this.positions = this.portfolioPositions;
		  this.setup(this.items, length);
			this.launch.defer(1000, this);
		},
		
		initPropertyMode: function(){
			this.itemTemplate = this.propertyItem;
			this.positions = this.propertyPositions;
		  this.setup(this.items, 3);
			//(function(){Ext.get(document.documentElement || document.body).scrollTo('top', 88, {duration: 1, easing: 'easeOut'});}).defer(500);
			
			(function(){carousel.wrapper.setHeight(360, {duration: 1.2, easing: "easeOutStrong"});}).defer(1000);
			(function(){Ext.get('carousel-detail').fadeIn({duration: .5});}).defer(3000);
			//this.showPropertyOptions();
			this.launch.defer(2000, this);
		},
		
		initSlideshowMode: function(){
			this.lock(); // currently no user interaction
			this.itemTemplate = this.slideshowItem;
			this.positions = this.slideshowPositions;
		  this.setup(this.items, 1);
				
			(function(){carousel.wrapper.setHeight(360, {duration: 1.2, easing: "easeOutStrong"});}).defer(1000);
			//(function(){Ext.get('carousel-detail').fadeIn({duration: .5});}).defer(3000);
			//this.showPropertyOptions();
			//this.launch.defer(2000, this);
			Ext.TaskMgr.start({
        run: this.nextSlide,
				scope: this,
        interval: 6500
      });
		},
		
		nextSlide: function(){
		  this.pos++;
			if(this.pos >= this.items.length) this.pos = 0;
			var currentItem = this.items[this.pos];
		  this.liveItems.item(0).fadeOut({duration:1.5, remove: true});
			(function(){
				this.itemTemplate.append(this.wrapper, {
																  top: this.positions.top,
																	left: this.positions.left,
																  name: currentItem.name,
																	url: currentItem.url,
																	strapline: currentItem.strapline,
																	src: currentItem.src,
																	info: currentItem.info,
																	num: currentItem.num,
																	a_open:  currentItem.a_open,
																	a_close:  currentItem.a_close
																});
				this.setLiveItems();
			
			}).defer(1600, this);
			(function(){this.liveItems.fadeIn({duration: 1.5});}).defer(1800, this);
		},
		
		setup: function(items, length){
			this.length = length > items.length? items.length : length;
			if(length == 2 && this.mode != this.MODE_PROPERTY){
			  Ext.get('carousel-right').setRight(338);
			}
			
			this.pos = 0;
		  for(var i=0;i<length;i++){
			  var left; // = (338 * i) + 4;
				if(i==0) left = this.positions.left;
				else if(i==1) left = this.positions.mid;
				else if(i==2) left = this.positions.right;
				// will be using items[i] here
				this.itemTemplate.append(this.wrapper, {
																  top: this.positions.top,
																	left: left,
																  name: items[i].name,
																	url: items[i].url,
																	strapline: items[i].strapline,
																	src: items[i].src,
																	info: items[i].info,
																	num: items[i].num,
																	services_section: items[i].services_section,
																	a_open:  items[i].a_open,
																	a_close:  items[i].a_close
																});
			}
			this.setLiveItems();
		},
		
		launch: function(){
		  this.liveItems.fadeIn({duration: .5});
			if(this.mode != this.MODE_SLIDESHOW && ((this.items.length > 3) || (this.mode == this.MODE_PROPERTY))){
				this.launchNav.defer(500, this);
			}
		},
		
		launchNav: function(){
		  this.navLeft = Ext.get('carousel-left');
			this.navRight = Ext.get('carousel-right');
			this.navButtons = this.wrapper.select('.carousel-button');
			if(this.mode == this.MODE_PROPERTY){
			  this.navButtons.setTop(150);
			}
			this.navButtons.fadeIn({duration:.5});
			this.navRight.on('click', this.next, this);
			this.navLeft.on('click', this.prev, this);
		},
		
		showPropertyOptions: function(){
		  
		},
		
		lock: function(){
		  this.locked = true;
			if(this.navButtons){
				this.navButtons.setOpacity(.2, false); // addClass('locked');
			}
		},
		
		unlock: function(){
		  this.locked = false;
			this.navButtons.setOpacity(1, {duration: .3}); // removeClass('locked');
		},
		
		next: function(){
			if(this.locked == true) return;
			this.lock();
			this.unlock.defer(650, this);
			
			this.pos++;
			if(this.pos >= this.items.length) this.pos = 0;
			var itemPos = this.pos + 2;
			if(itemPos > this.items.length -1) itemPos -= this.items.length;
			
			var offsetLeft = this.wrapper.getLeft();
			var left = this.positions.left + offsetLeft;
			var mid = this.positions.mid + offsetLeft;
			var right = this.positions.right + offsetLeft;
		  this.liveItems.item(0).remove(); //fadeOut({duration:0, remove: true});
			this.liveItems.item(1).setX(left, {duration: 1.4, easing: "easeOut"});
			
			var newPos = this.positions.mid;
			if(this.length == 3){
				this.liveItems.item(2).setX(mid, {duration: 1.4, easing: "easeOut"});
				newPos = this.positions.right;
			}
			this.itemTemplate.append(this.wrapper, {
															    top: this.positions.top,
																  left: newPos,
																  name: this.items[itemPos].name,
																	url: this.items[itemPos].url,
																	strapline: this.items[itemPos].strapline,
																	src: this.items[itemPos].src,
																	info: this.items[itemPos].info,
																	services_section: this.items[itemPos].services_section,
																	num : this.items[itemPos].num,
																	a_open:  this.items[itemPos].a_open,
																	a_close:  this.items[itemPos].a_close
																});
			this.liveItems = null;
			this.setLiveItems.defer(150, this);
			this.fadeInAt.defer(500, this, [this.length-1]);
		},
		
		prev: function(){
			if(this.locked == true) return;
			this.lock();
			this.unlock.defer(650, this);
			
			this.pos--;
			if(this.pos < 0) this.pos = this.items.length -1;
			
			var offsetLeft = this.wrapper.getLeft();
			var left = this.positions.left + offsetLeft;
			var mid = this.positions.mid + offsetLeft;
			var right = this.positions.right + offsetLeft;
			
			if(this.length == 3){
		    this.liveItems.item(2).remove(); //fadeOut({duration:0, remove: true});
			  this.liveItems.item(1).setX(right, {duration: 1, easing: "easeOutStrong"});
			} else {
				this.liveItems.item(1).remove(); //fadeOut({duration:0, remove: true});
			}
			
			this.liveItems.item(0).setX(mid, {duration: 1, easing: "easeOutStrong"});
			this.itemTemplate.insertFirst(this.wrapper, {
																		   top: this.positions.top,
																		   left: this.positions.left,
																		   name: this.items[this.pos].name,
																			 url: this.items[this.pos].url,
																			 strapline: this.items[this.pos].strapline,
																	     src: this.items[this.pos].src,
																			 info: this.items[this.pos].info,
																			 services_section: this.items[this.pos].services_section,
																	     num : this.items[this.pos].num,
																			 a_open:  this.items[this.pos].a_open,
																			 a_close:  this.items[this.pos].a_close
																		 });
			this.liveItems = null;
			this.setLiveItems.defer(150, this);
			this.fadeInAt.defer(350, this, [0]);
			
		},
		
		setLiveItems: function(){
 			this.liveItems = this.wrapper.select('.carousel');
			var els = this.wrapper.select('.carousel-block');
			els.hover(this.showInfo, this.hideInfo, this);
			els.on('click', this.scrollToItem, this);
		},
		
		scrollToItem: function(e, t){
			if(this.highlight == true) return;
			this.highlight = true;
		  scrollToElement(Ext.get('property-'+e.getTarget('.carousel-block').id), 1.2);
			(function(){Ext.get('property-'+e.getTarget('.carousel-block').id).highlight();}).defer(1300);
			(function(){carousel.highlight = false;}).defer(1400);
		},
		
		showInfo: function(e, t){
		  this.currentHover = e.getTarget('.carousel', null, true).child('.carousel-info');
			if(!this.currentHover) return;
			this.currentHover.fadeIn({duration: .4, easing: 'easeOutStrong', stopFx: true});
		},
		
		hideInfo: function(){
			if(!this.currentHover) return;
		  this.currentHover.fadeOut({duration: .25, easing: 'easeOutStrong', stopFx: true});
			this.currentHover = null;
		},
		
		fadeInAt: function(pos){
		  this.liveItems.item(pos).fadeIn({duration:.3});
		}
		
	}
}();

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