var galleryModel, heroView, arrowView;

var data = json.results;

// Arrow View
ArrowView = Backbone.View.extend({
	initialize: function () {
		_.bindAll(this, 'onNext', 'onPrev', 'enable', 'disable', 'checkState');
		
		this.prev = $('#media-wrap .btn-prev');
		this.next = $('#media-wrap .btn-next');
		
		this.model.bind('enable', this.enable);
		this.model.bind('disable', this.disable);
		this.model.bind('checkState', this.checkState);
		
		this.checkState();
	},
	
	enable: function() {
		this.next.bind("click", this.onNext);
		this.prev.bind("click", this.onPrev);
	},
	
	disable: function() {
		this.next.unbind("click");
		this.prev.unbind("click");
	},
	
	onNext: function(e) {
		var arr = this.model.getCurrentFilteredArray();
		if(this.model.get('currentItemNum') < arr.length - 1) {
			var num = this.model.get('currentItemNum') + 1;
			
			this.model.setCurrentItem(arr[num]);
		}
		
		this.checkState();
		
		e.preventDefault();
	},
	
	onPrev: function(e) {
		var arr = this.model.getCurrentFilteredArray();
		if(this.model.get('currentItemNum') > 0) {
			var num = this.model.get('currentItemNum') - 1;
			this.model.setCurrentItem(arr[num]);
		}
		
		this.checkState();
		e.preventDefault();
	},
	
	checkState: function() {
		var arr = this.model.getCurrentFilteredArray();
		if(arr.length == 1 ){
			this.prev.addClass('btn-prev-disabled');
			this.next.addClass('btn-next-disabled');
		} else if(this.model.get('currentItemNum') == 0) {
			this.prev.addClass('btn-prev-disabled');
			this.next.removeClass('btn-next-disabled');
		} else if(this.model.get('currentItemNum') == arr.length - 1) {
			this.prev.removeClass('btn-prev-disabled');
			this.next.addClass('btn-next-disabled');
		} else {
			this.prev.removeClass('btn-prev-disabled');
			this.next.removeClass('btn-next-disabled');
		}
	}
});

// Hero View
HeroView = Backbone.View.extend({
	
	initialize: function () {
		_.bindAll(this, 'render','addContent', 'animateIn');
		
		this.heroCounter = 0;
		this.position = 0;
		
		this.scrollerDiv = $("#slide-scroller");
		this.model.bind('update', this.addContent);
	},
	
	addContent: function() {
		var self = this;
		
		this.model.trigger('disable');
		
		var direction = this.model.get('currentItemNum') <= this.model.get('lastItemNum') ? 'left' : 'right';
		
		var moveVal = '';
		if(direction == 'left') {
			this.position -= 600;
			moveVal = '+=600px';
		} else if(direction == 'right') {
			this.position += 600;
			moveVal = '-=600px';
		}
		
		if(this.heroCounter == 0){
			this.position = 0;
		}
		
		var num = this.model.get('currentItemNum');
		
		this.heroCounter++;
		
		var heroVO = this.model.get('currentItem');
		
		var mediaDiv;
		if(heroVO.asset.indexOf('jpg') > -1){
			var imageId = 'img' + this.heroCounter; 
			mediaDiv = '<img alt="" />';
		}
		
		var id = 'heroItem' + self.heroCounter;
		var slideElement = '<div id="' + id + '" style="left:' + String(self.position) + 'px; width:600px; height:800px; float:left; position:absolute; ">' +
								'<div id="media-holder'+ this.heroCounter +'">' +
									mediaDiv +
								'</div>' +
								'<div class="info">' +
									'<p>' + heroVO.desc + '</p>' +
								'</div>' +
							'</div>';
							
		this.scrollerDiv.append(slideElement);
		
		if(this.heroCounter > 1 && heroVO.asset.indexOf('vimeo') > -1) {
			this.animateIn(moveVal);
		} else if(heroVO.asset.indexOf('jpg') > -1) {
			$('img', $('#slide-scroller #media-holder'+ this.heroCounter)).load(function(){
				if(self.heroCounter > 1){
					self.animateIn(moveVal);
				} else {
					self.model.trigger('enable');
				}
			}).attr('src', heroVO.asset);
			
			
		} else {
			self.model.trigger('enable');
		}
		
		this.model.trigger('checkState');
	},
	
	animateIn: function(moveVal){
		var self = this;
		this.scrollerDiv.delay(250).animate(
		{
			'left': moveVal
		}, 
		{
			duration:500, 
			specialEasing: {
			  'left': 'easeInOutExpo'
			},
			complete:function() {
				$('#' + 'heroItem' + (self.heroCounter - 1)).remove();
				self.model.trigger('enable');
			},
		});
	}
});

// GalleryModel
var GalleryModel = Backbone.Model.extend({
	defaults: {
		"currentItemNum" 		:	0,
		"lastItemNum" 			:	1000,
		"currentItem"    		:	'',
		"currentFilteredArray"	:	data,
	},
	
	initialize: function() {
		this.setCurrentItem(data[0]);
	},
	
	setCurrentItem: function(obj) {
		this.set({currentItem: obj});
		
		var itemNum = 2000;
		
		var currentPage = this.getCurrentFilteredArray();
		for(var i = 0; i < currentPage.length; i++) {
			if(obj.id === currentPage[i].id) {
				itemNum = i;
				break;
			}
		}
		
		if(itemNum != 2000) {
			this.set({lastItemNum: this.get('currentItemNum')});
			this.set({currentItemNum: itemNum});
			this.trigger('update');
		} else {
		}
	},
	
	setFilter: function(position, value){
		this.attributes.currentFilter[position] = value;
	},
	
	setCurrentFilteredArray: function(arr) {
		this.set({currentFilteredArray: arr});
	},
	
	getCurrentFilteredArray: function() {
		return this.get('currentFilteredArray');
	},
	
	setLastItemNum: function(num) {
		this.set({lastItemNum: num});
	}
});

function initGallery() {
	var self = this;
	grayOut(true, {'zindex':'1', 'bgcolor':'#000000', 'opacity':'70'});
	
	$('#media-gallery-section').addClass('on');
	
	if(!galleryModel) {
		galleryModel = new GalleryModel();	
		
		heroView = new HeroView({
			model: galleryModel,
		});
		
		arrowView = new ArrowView({
			model: galleryModel,
		});
		
		galleryModel.trigger('update');
	} else {
		$('#media-gallery-section').css({'display': 'block'});
	}
	
	resize();
	
	$('#media-gallery-section .closeBtn').on('click', function() {
		self.destroy();
	});
}

function resize() {
	var pageWidth = $(window).width();
	var pageHeight = $(window).height();
	var centerX = Math.round(pageWidth * .5 - (656 * .5));
	var centerY = Math.round(pageHeight * .5 - (424 * .5)) + $(window).scrollTop() + 20;
	$('#media-gallery-section').css({'left' : centerX + 'px', 'top' : '200px'});
	
	var screen = $('#darkenScreenObject');
	screen.css({ 'width':pageWidth, 'height':$(document).height() });
};

// gray out screen
function grayOut(vis, options) {
	  var options = options || {}; 
	  var zindex = options.zindex || 50;
	  var opacity = options.opacity || 70;
	  var opaque = (opacity / 100);
	  var bgcolor = options.bgcolor || '#000000';
	  var dark = document.getElementById('darkenScreenObject');
	  if (!dark) {
		var tbody = $('#grayOutDiv');
		var tnode = document.createElement('div');        
			tnode.style.position='absolute';               
			tnode.style.top='0px';                
			tnode.style.left='0px';                     
			tnode.style.overflow='hidden';                        
			tnode.style.display='none';                   
			tnode.id='darkenScreenObject';                  
		tbody.append(tnode);               
		dark=document.getElementById('darkenScreenObject');
	  }
	  if (vis) {
		if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
			var pageWidth = document.body.scrollWidth+'px';
			var pageHeight = document.body.scrollHeight+'px';
		} else if( document.body.offsetWidth ) {
		  var pageWidth = document.body.offsetWidth+'px';
		  var pageHeight = document.body.offsetHeight+'px';
		} else {
			var pageWidth='100%';
			var pageHeight='100%';
		}
		

		dark.style.opacity=opaque;                      
		dark.style.MozOpacity=opaque;                   
		dark.style.filter='alpha(opacity='+opacity+')'; 
		dark.style.zIndex=zindex;        
		dark.style.backgroundColor=bgcolor;  
		dark.style.width= pageWidth;
		dark.style.height= pageHeight;
		dark.style.display='block';                          
	  } else {
		 dark.style.display='none';
	  }
	  
	  var screen = $('#darkenScreenObject');
	  screen.bind('click', function(){
			screen.unbind('click');
			self.destroy();
	});
};

function destroy() {
	$('#media-gallery-section').removeClass('on').css({'display': 'none'});
	this.grayOut(false);
};