// =================================================== 
// ! spotlight :: used to control the spotlight animations   
// =================================================== 
var spotlight = {
	
	docWidth: 0
	
	,initWidth: function(spotCntrs){
		
		var firstEl = spotCntrs[0];
		this.docWidth = firstEl.offsetWidth;
		var docWidth = firstEl.offsetWidth;
		
		//get document width
		//old version used for dynamic resizing
//		this.docWidth = document.documentElement.clientWidth;
//		var docWidth = this.docWidth-20 + 'px';
//		
//		//loop through spotlight containers
//		for(a = 0; a < spotCntrs.length; a++){
//			
//			//get specific spotlight container el
//			var spotCntr = spotCntrs[a];
//			spotCntr.style.width = docWidth;
//			
//			//get first child -- ul
//			spotUL = Dom.getFirstChild(spotCntr);
//			if(Dom.hasClassName(spotUL, 'slideshowPhotos') || Dom.hasClassName(spotUL, 'spotlightPhotos')){
//				
//				//get li elements in the ul -- loop through and assign width
//				var lis = spotUL.getElementsByTagName('li');
//				for(b = 0; b < lis.length; b++){
//					var li = lis[b];
//					li.style.width = docWidth;	
//				}
//						
//			}
//		}
		
	}
	
	,initGesture: function(spotCntrs){
		
		
		var self = this;
			
		//holds coords for gestures
		var gesture = {
			start: 0
			,move: 0
			,stop: 0
		}
		
		//loop through spotlight containers
		for(a = 0; a < spotCntrs.length; a++){
			
			var spotCntr = spotCntrs[a];
			var ul = Dom.getFirstChild(spotCntr);
			//get specific spotlight container and child uls
			
			ul.addEventListener("touchstart", touchstart, false);
			ul.addEventListener("touchmove", touchmove, false);
			ul.addEventListener("touchend", touchend, false);
			//event listeners for gesture
			
		}
		
		function touchstart(e){
			
			var coord = getCoord(e, true);
			//gets coord for touch point : params(event, start)
			
			gesture.start = 0;
			if(coord){
				gesture.start = coord
				//add start coord to gesture object
			}
			
		}
		
		function touchmove(e){
			
			//gets coord for touch point : params(event, start)
			var coord = getCoord(e, false);
			
			if(coord){
				// The originating X-coord (point where finger first touched the screen)
				gesture.move = coord;
			}
		}
		
		function touchend(e){
			
			spotCntr = e.currentTarget.parentNode;
			
			distance = gesture.start - gesture.move;
			
			if(Math.abs(distance) > (.3 * self.docWidth)){
				if(distance < 0){
					var prevBtn = Dom.getElementsByClass('btnPrev', spotCntr, 'a')[0];
					if(!isEmpty(prevBtn.style.visibility) && prevBtn.style.visibility != 'hidden'){
						prevBtn.onclick();
					}				
				}else{
					var nextBtn = Dom.getElementsByClass('btnNext', spotCntr, 'a')[0];
					if(nextBtn.style.visibility != 'hidden'){
						nextBtn.onclick();
					}	
				}
			}
		}
		
		function getCoord(e, start){
			
			var event = start ? 'touchstart' : 'touchmove';
			
			// If the user has started a touch event
			if (e.type == event) {
				
				touching = true;
				
				// If there's only one finger touching
				if (e.touches.length == 1) {
					
					var touch = e.touches[0];
					
					// If they user tries clicking on a link
					if(touch.target.onclick) {
						touch.target.onclick();
					}
					
					return touch.pageX;
				}
			}
			
			return false; 
		}
		
	}
	
	,move: function(el, dir){
		
		var atEnd = this.moveDotGetIndex(el, dir);
		var spotCntr = this.getSpotCntr(el);
		var ul = this.getUl(spotCntr);
		
		var currentLeft = this.getCurrentLeft(ul);
		
		var direction = dir ? -1 : 1;
		
		var newLeft = (currentLeft + ( direction * (this.docWidth))) + 'px';
		
		ul.style.left = newLeft;
		
		if(atEnd){
			if(dir){
				this.nextOff(spotCntr);
			}else{
				this.previousOff(spotCntr);
			}
		}else{
			this.navOn(spotCntr);
		} 
	}
	
	,getCurrentLeft: function(ul){
		var currentLeft = ul.style.left ? ul.style.left : 0;
		currentLeft = currentLeft + '';
		
		if(currentLeft.indexOf('px') > -1){
			currentLeft = currentLeft.replace('px','');
			currentLeft = Number(currentLeft);
		}
		
		return Number(currentLeft);
	}
	
	,moveDotGetIndex: function(el, dir){
		
		var spotCntr = this.getSpotCntr(el);
		
		var li = Dom.getElementsByClass('active',spotCntr,'li')[0];
		var nextLi = dir ? Dom.getNextSibling(li): Dom.getPreviousSibling(li);
		
		Dom.removeClassName(li,'active');
		Dom.addClassName(nextLi,'active');
		
		if(Dom.hasClassName(spotCntr, 'slideshow')){
			var amount = dir ? 1 : -1;
			this.updateSlideNumber(spotCntr, amount);
		}
		
		var end = false;
		if(Dom.hasClassName(nextLi,'first')){
			end = true;
		}else if(Dom.hasClassName(nextLi,'last')){
			end = true;
		}
		
		return end;
	}
	
	,updateSlideNumber: function(spotCntr, amount){
		
		var span = Dom.getElementsByClass('slideNumber', spotCntr)[0];
		span.innerHTML = Number(span.innerHTML) + amount; 
	}
	
	,getSpotCntr: function(el){
		return el.parentNode.parentNode;
	}
	
	,getUl: function(el){
		return Dom.getFirstChild(el);
	}
	
	,nextOff: function(el){
		Dom.getElementsByClass('btnNext', el, 'a')[0].style.visibility = 'hidden';
	}
	
	,previousOff: function(el){
		Dom.getElementsByClass('btnPrev', el, 'a')[0].style.visibility = 'hidden';
	}
	
	,navOn: function(el){
		Dom.getElementsByClass('btnNext', el, 'a')[0].style.visibility = 'visible';
		Dom.getElementsByClass('btnPrev', el, 'a')[0].style.visibility = 'visible';
	}
	
	 //used to update spotlight or slideshow containers and all of their children li
	,updateSpotSlideWidth:function(els, width){
		
		this.docWidth = width;
		
		var self = this;
		var a;
		var b;
		
		for(a = 0; a < els.length; a++){
			
			//get individual spotlight container and set width
			var el = els[a];
			el.style.width = (width - 20) + 'px';
			
			//get photo container ul
			var cntr = Dom.getFirstChild(el);
			
			//all children of the ul container...
			var childLis = cntr.getElementsByTagName('li');
			for(b = 0; b < childLis.length; b++){
				var liEl = childLis[b];
				liEl.style.width = (width - 20) + 'px';
			}
			
			self.updateActiveLeft(el, width);
			 
		}
	}
	
	,updateActiveLeft: function(cntr, width){
		
		var active = Dom.getElementsByClass('active', cntr, 'li')[0];
		var index = Number(active.innerHTML);
		var newLeft = ((index - 1) * (width - 20)) * -1;
		
		var photosCntr = Dom.getElementsByClass(cntr.className + 'Photos', cntr, 'ul')[0];
		photosCntr.style.left = newLeft + 'px';
		
	}
}
	
// ============================================== 
// ! navigation :: holds all functions relating to navigation
// ============================================== 
var navigation = {
	
	//called from navigation + header dom elements and directs them to the propper animation
	delegate: function(el, controller) {
		
//		if (Dom.hasClassName(el, 'toggleHeader')) {
//			var rowId = el.id + 'row';
//			var row = document.getElementById(rowId);
//			this.toggleDrawer(el, row);
//			return false;	
//		} else
		if (Dom.hasClassName(el, 'ajax')) {
			this.loadMore(el, controller);
			return false;
		} else if (Dom.hasClassName(el, 'ajaxCard')) {
			this.loadCard(el, controller);
			return false;
		} else if (Dom.hasClassName(el, 'ajaxSelectMovies')) {
			this.loadNewMovies(el, controller);
			return false;
		} else if (Dom.hasClassName(el, 'ajaxSelect')) {
			this.loadNew(el, controller);
			return false;
		} else if (Dom.hasClassName(el, 'ajaxTypeSelect')) {
			this.loadFilter(el, controller);
			return false;
		} else if (Dom.hasClassName(el, 'ajaxAccessory')) {
			this.loadAccessory(el, controller);
			return false;
		} else if (Dom.hasClassName(el, 'tab')) {
			this.loadTab(el, controller);
			return false;
		}
//		else if (Dom.hasClassName(el.parentNode.parentNode,'navigation')) {
//			this.loaderOn(el);
//			return true;
//		}
	}

	,loadTab: function(el, controller) {
		var self = this;
		var content = Dom.getNextSibling(el.parentNode.parentNode);
		var hero = Dom.getPreviousSibling(el.parentNode.parentNode);
		
		var ajaxLoad = new AJAXConnection('ajaxConnectionAlert');
		
		var callback = function(data) {
			var json = eval('(' + data + ')');
			if ( json.heroContent ) {
				hero.innerHTML = json.heroContent;
			}
			content.innerHTML = json.tabContent;
			el.parentNode.parentNode.innerHTML = json.tabs;
		}
		
		ajaxLoad.xmlhttpPost(controller, callback);
	}
	,loadAccessory: function(el, controller) {
		var self = this;
		
		var cntr = Dom.getNextSibling(el.parentNode);
		var moreContainer = Dom.getNextSibling(cntr);
		
		//create a new ajax connection
		var ajaxLoad = new AJAXConnection('ajaxConnectionAlert');
		
		// get the accessoryTypeId
		accessoryTypeId = el.options[el.selectedIndex].value;
		controller += '/accessoryTypeId/';
		controller += accessoryTypeId;
		
		//callback to called on ajax return
		var callback = function(data) {
			//get json encoded data
			var json = eval('(' + data + ')');
			
			var contentArr = json.content;
			while ( cntr.childNodes.length >= 1 ) {
				cntr.removeChild(cntr.firstChild);
			}
			
			//loop through each object and create new nav element
			for(a = 0; a < contentArr.length; a++){
				
				elData = contentArr[a];
		
				//create element
				var newEl = document.createElement('span');
				newEl.innerHTML = elData.listitem;
				
				//assign to DOM
				Dom.add(newEl, cntr);
			}
			moreContainer.innerHTML = json.more;
		}
		
		//actual ajax call
		ajaxLoad.xmlhttpPost(controller, callback);
	}
	,loadCard: function(el, controller) {
		var self = this;
		var content = el.parentNode;
		
		var ajaxLoad = new AJAXConnection('ajaxConnectionAlert');
		
		// get the value for the gamercard
		controller += '/gamertag/';
		controller += document.getElementById('gamercard').value;
		var callback = function(data) {
			var json = eval('(' + data + ')');
			content.innerHTML = json.content;
		}
		
		ajaxLoad.xmlhttpPost(controller, callback);
	}
	,loadNewMovies: function(el, controller) {
		var self = this;
		
		//get the container holding all the nav elements
		var cntr = Dom.getNextSibling(el.parentNode);
		var moreContainer = Dom.getNextSibling(cntr);
		var genreEl = document.getElementById('genreFilterSelect');
		var serviceEl = document.getElementById('serviceFilterSelect');
		
		//create a new ajax connection
		var ajaxLoad = new AJAXConnection('ajaxConnectionAlert');
		
		if ( genreEl != null ) {
			genreId = genreEl.options[genreEl.selectedIndex].value;
			if ( genreId != 0 ) {
				controller += '/movieGenreId/';
				controller += genreId;
			}
		}
		
		if ( serviceEl != null ) {
			serviceId = serviceEl.options[serviceEl.selectedIndex].value;
			if ( serviceId != 0 ) {
				controller += '/movieServiceId/';
				controller += serviceId;
			}
		}
		
		//callback to called on ajax return
		var callback = function(data) {
			//get json encoded data
			var json = eval('(' + data + ')');
			
			var contentArr = json.content;
			while ( cntr.childNodes.length >= 1 ) {
				cntr.removeChild(cntr.firstChild);
			}
			
			//loop through each object and create new nav element
			for(a = 0; a < contentArr.length; a++){
				
				elData = contentArr[a];
		
				//create element
				var newEl = document.createElement('span');
				newEl.innerHTML = elData.listitem;
				
				//assign to DOM
				Dom.add(newEl, cntr);
			}
			moreContainer.innerHTML = json.more;
		}
		
		//actual ajax call
		ajaxLoad.xmlhttpPost(controller, callback);
	}
	,loadNew: function(el, controller) {
		var self = this;
		
		//get the container holding all the nav elements
		var cntr = Dom.getNextSibling(el.parentNode);
		var moreContainer = Dom.getNextSibling(cntr);
		var typeEl = document.getElementById('typeFilterSelect');
		
		//create a new ajax connection
		var ajaxLoad = new AJAXConnection('ajaxConnectionAlert');
		
		// get the actual genreId (since that's what this is for) and append it to the controller
		genreId = el.options[el.selectedIndex].value;
		if ( genreId != 0 ) {
			controller += '/genreId/';
			controller += genreId;
		}
		
		typeFilter = typeEl.options[typeEl.selectedIndex].value;
		controller += '/typeFilter/';
		controller += typeFilter;
		
		//callback to called on ajax return
		var callback = function(data) {
			//get json encoded data
			var json = eval('(' + data + ')');
			
			var contentArr = json.content;
			while ( cntr.childNodes.length >= 1 ) {
				cntr.removeChild(cntr.firstChild);
			}
			
			//loop through each object and create new nav element
			for(a = 0; a < contentArr.length; a++){
				
				elData = contentArr[a];
		
				//create element
				var newEl = document.createElement('span');
				newEl.innerHTML = elData.listitem;
				
				//assign to DOM
				Dom.add(newEl, cntr);
			}
			moreContainer.innerHTML = json.more;
		}
		
		//actual ajax call
		ajaxLoad.xmlhttpPost(controller, callback);
		
	}
	
	,loadFilter: function(el, controller) {
		var self = this;
		
		// this is a fucking tragedy...it assumes that the genre filter is there too, since that's valid for the only
		// case this is used in I'm leaving it like this, but it's shit and should be fixed.  just not now, or probably by me
		var genreEl = document.getElementById('genreFilterSelect');
		var cntr = Dom.getNextSibling(Dom.getNextSibling(el.parentNode));
		var moreContainer = Dom.getNextSibling(cntr);
		
		//create a new ajax connection
		var ajaxLoad = new AJAXConnection('ajaxConnectionAlert');
		
		// get the actual genreId (since that's what this is for) and append it to the controller
		genreId = genreEl.options[genreEl.selectedIndex].value;
		if ( genreId != 0 ) {
			controller += '/genreId/';
			controller += genreId;
		} else {
			controller += '/date/desc';
		}
		
		typeField = el.options[el.selectedIndex].value;
		controller += '/typeFilter/';
		controller += typeField;
		
		//callback to called on ajax return
		var callback = function(data) {
			//get json encoded data
			var json = eval('(' + data + ')');
			
			var contentArr = json.content;
			while ( cntr.childNodes.length >= 1 ) {
				cntr.removeChild(cntr.firstChild);
			}
			
			//loop through each object and create new nav element
			for(a = 0; a < contentArr.length; a++){
				
				elData = contentArr[a];
		
				//create element
				var newEl = document.createElement('span');
				newEl.innerHTML = elData.listitem;
				
				//assign to DOM
				Dom.add(newEl, cntr);
			}
			moreContainer.innerHTML = json.more;
		}
		
		//actual ajax call
		ajaxLoad.xmlhttpPost(controller, callback);
		
	}
	,loadMore: function(el, controller) {
		
		var self = this;
		
		//get the container holding all the nav elements
		var cntr = Dom.getPreviousSibling(el.parentNode);
		
		//turn on loader gif
		//var loader = this.toggleAjaxLoader(Dom.getFirstChild(el));
		
		//create a new ajax connection
		var ajaxLoad = new AJAXConnection('ajaxConnectionAlert');
		//callback to called on ajax return
		var callback = function(data){
			//get json encoded data
			var json = eval('(' + data + ')');
			
			var contentArr = json.content;
			
			//loop through each object and create new nav element
			for(a = 0; a < contentArr.length; a++){
				
				elData = contentArr[a];
		
				//create element
				var newEl = document.createElement('span');
				newEl.innerHTML = elData.listitem;
				
				//assign to DOM
				Dom.add(newEl, cntr);
			}
			el.parentNode.innerHTML = json.more;
			
			//turn off loader
			//self.toggleAjaxLoader(loader);
		}
		
		//actual ajax call
		ajaxLoad.xmlhttpPost(controller, callback);
		
	}
	
	,toggleAjaxLoader: function(el) {
		
		if(Dom.hasClassName(el, 'off')){
			Dom.removeClassName(el, 'off');
			Dom.addClassName(el, 'on');
		}else{
			Dom.removeClassName(el, 'on');
			Dom.addClassName(el, 'off');
		}
		
		return el;	
	}
	
	//turns on loader for naviagtion elements
	,loaderOn: function(el) {
		Dom.addClassName(el.parentNode,'loaderOn');
	}
	
	//turns off loader for navigation elements
	,loaderOff: function(el) {
		if(Dom.hasClassName(el.parentNode, 'loaderOn')){
			Dom.removeClassName(el.parentNode, 'loaderOn');
		}
	}
	
}