/*
 * pass a jquery selector for the top level feature object, 
 * along with a value that says how many items should be viewable in the nav.
 * 
 * Also, pass in an XML file and the indexing element ('name', 'id', etc);
 * 
 * the last two parameters indicate the root element in the xml doc and the element that contains a unique index within the root element.
 */
 
 var commonfolder = '_common_KP3';

function FeaturePlayer(t){
	this.xmlDoc;
	this.domObject = $(t);
	this.rootElement = 'event';
	this.indexElement = 'pageUrl';
	this.menu = this.domObject.find("ul");
	this.menuItems = this.menu.find("li");
	this.visibleMenuItems = new Array();
	this.max = 5; //number of items in the menu
	this.clickType;
	
	this.setObjectActions = fP_setObjectActions;
	this.setViewableMenuItems = fP_setViewableMenuItems;
	this.setControlButtons = fP_setControlButtons;

	this.dataCheck = fP_dataCheck;
	this.setTouchAnimation = fP_setTouchAnimation;
	this.ribbonFlick = fP_ribbonFlick;
	this.previewFlick = fP_previewFlick;
	this.slideRibbon = fP_slideRibbon;
	this.getMenuSet = fP_getMenuSet;
	
	this.__construct = function(){
		var obj = this;
		this.dataCheck();
		setTimeout(function(){
			obj.domObject.find('.content').slideDown();
		},1000);
		
	}
}

function fP_dataCheck(){
	var obj = this;
	/*
	 * xhr is a global variable that contains the AJAX-called XML file.
	 */
	if(xhr.constructor != Object){
		this.xmlDoc = xhr;
		
		this.setObjectActions();
		this.setViewableMenuItems();
		this.setControlButtons();
	}
	else{
		setTimeout(function(){
			obj.dataCheck();
		},50);
	}
}

function fP_setObjectActions(){
	var obj = this;
	
	obj.domObject.css('overflow','hidden');
	
	this.menuItems.find("a").removeAttr("href"); 
	this.menuItems.click(function(){
		if(typeof(siteTracker) != 'undefined'){
			siteTracker._trackEvent('FeaturesItemToggle', $(this).attr('uniqueid'));
		}
		obj.domObject.find("img.large").fadeOut("fast");
		
		var activeLi = $(this);
		
		obj.domObject.find(".preview").fadeOut("fast", function(){
			obj.menuItems.attr("class", "");
			activeLi.attr("class", "selected");
			
			/*
			 * Get the root element (event) with the attribute id that matches the li object's name attribute
			 */
			var e = $(obj.xmlDoc).find(obj.rootElement+' > '+obj.indexElement+':contains("'+activeLi.attr('uniqueid')+'")').parent();
			
			
			/*
			 * The following lines might have to be specific to each data type we have (modlin events, features, etc).
			 */
			if(e.find('images > pageImage > path').text().indexOf("_common_") != -1){
				obj.domObject.find("img.large").attr("src",e.find('images > pageImage > path').text());
			
			}
			else{
				obj.domObject.find("img.large").attr("src",commonfolder+e.find('images > pageImage > path').text());
			}				
			obj.domObject.find(".preview .content a").html(e.find('artist > name').text());
		
			//use QA if on qa
			if(window.location.href.indexOf('http://qa') != -1){
				obj.domObject.find(".preview .content a").attr('href',e.find('pageUrlQa').text());
			}
			else{
				obj.domObject.find(".preview .content a").attr('href',e.find('pageUrl').text());
			}		
			
			//########## We need to wrap HTML in CDATA. It is way too hard to preserve formatting otherwise. ##########
			var previewClone = e.find('featureCopy').clone();
			
			obj.domObject.find(".preview .content .text").html(previewClone.text());
			//########## END IDIOT CODE ##########
			
			obj.domObject.find("img.large").fadeIn("slow", function(){
				var t = setTimeout(function(){return true;},2000);
				obj.domObject.find('.preview').css('margin','10px');
				obj.domObject.find(".preview").slideDown();
				clearTimeout(t);
			});	
		});		
		
		obj.previewFlick(obj.domObject.find('.preview:first'), obj.domObject.children('.border:first'));
	});
	obj.setTouchAnimation();
}


function fP_setTouchAnimation(){
	var obj = this;
	
	//stop native mouse actions (to prevent dragging everywhere)
	obj.domObject.bind('mousedown',function(){
		return false;
	});	
	
	//pick touch or click
	document.body.setAttribute('ontouchmove','return;');
	if(typeof document.body.ontouchmove == 'function'){
		obj.clickType = {
				start: 'touchstart',
				move: 'touchmove',
				end: 'touchend',
				x: 'event.targetTouches[0].clientX',
				y: 'event.targetTouches[0].clientY'
		}
		
	}	
	else{
		obj.clickType = {
				start: 'mousedown',
				move: 'mousemove',
				end: 'mouseup',
				x: 'e.clientX',
				y: 'e.clientY'
		}		
	}	
	
	//set events
	obj.previewFlick(obj.domObject.find('.preview:first'), obj.domObject.children('.border:first'));
	obj.ribbonFlick(obj.domObject.find('ul:first'));
}

function fP_ribbonFlick(swipe){
	var obj = this;

	swipe.bind(obj.clickType.start, function(e){
		//register event touch x y tracking:
		e.clientX = eval(obj.clickType.x);

		var start_x = e.clientX;
		var rebound = true;
		
		swipe.bind(obj.clickType.move, function(e){	
			e.clientX = eval(obj.clickType.x);

			swipe.css('left', (e.clientX-start_x)+'px');
			
			if((e.clientX-start_x) > 250){
				rebound = false;
				obj.getMenuSet('left');
				obj.slideRibbon('645px','left');
				swipe.unbind(obj.clickType.move);
			}	
			else if((start_x-e.clientX) > 250){
				rebound = false;
				obj.getMenuSet('right');
				obj.slideRibbon('645px','right');
				swipe.unbind(obj.clickType.move);
			}	
				
		});
		
		$('body').bind(obj.clickType.end, function(e){
			swipe.unbind(obj.clickType.move);
			swipe.unbind(obj.clickType.start);
			
			$('body').unbind(obj.clickType.end);
			
			if(rebound == true){
				swipe.animate({'left':'0px'}, 600);
				obj.ribbonFlick(swipe);
			}
		});
	});

}

function fP_previewFlick(swipe, reload){
	var obj = this;
	
	reload.bind(obj.clickType.start, function(e){
		if(swipe.css('margin-left') != '10px'){
			swipe.hide();
			swipe.css('margin-left','10px');
			swipe.slideDown(500,function(){
				return false;
			});
		}	
	});
	
	swipe.bind(obj.clickType.start, function(e){
		//register event touch x y tracking:
		e.clientX = eval(obj.clickType.x);

		var start_x = e.clientX;
		swipe.bind(obj.clickType.move, function(e){
			//register event touch x y tracking:
			e.clientX = eval(obj.clickType.x);
			
			if(e.clientX > start_x+100){
				obj.domObject.children('.border:first').css('z-index','10');
				swipe.animate({'margin-left':'645px'}, 300, function(){
					obj.domObject.children('.border:first').css('z-index','0');	
				});
				swipe.unbind(obj.clickType.move);
			}
			
			if(e.clientX < start_x-100){
				obj.domObject.children('.border:first').css('z-index','10');
				swipe.animate({'margin-left':'-645px'}, 300, function(){
					obj.domObject.children('.border:first').css('z-index','0');	
				});
				swipe.unbind(obj.clickType.move);
			}
		});
		
		$('body').bind(obj.clickType.end, function(e){
			swipe.unbind(obj.clickType.move);
			$('body').unbind(obj.clickType.end);
		});
	});
		
}

function fP_setViewableMenuItems(){
	var obj = this;
	/*
	 * Display the starting set of items in the ribbon controller
	 */
	var start = false;
	
	obj.menuItems.each(function(){
		$(this).hide();
		if($(this).attr("class") == 'selected'){
			start = 1;
		}
		if((start != false)&&(start <= obj.max)) {
			$(this).show();
			start++;
			obj.visibleMenuItems.push($(this).index());
		}
	});
	//start over if you hit the end of the list and don't have enough items
	if(obj.visibleMenuItems.length < obj.max){
		var num = obj.max - obj.visibleMenuItems.length;
		var toAdd = obj.menuItems.filter(':lt('+num+')');
		toAdd.each(function(){
			$(this).show();
			obj.visibleMenuItems.push($(this).index());
		});	
	}
	
	obj.menu.slideDown();
	/*
	if(obj.menuItems.filter(":visible").length < obj.max){
		var addNum = obj.max - obj.menuItems.filter(":visible").length;
		if(addNum < obj.menuItems.length){			
			var add = obj.menuItems.slice(0,addNum);
			add.insertAfter(obj.menuItems.filter(":visible:last")).show();
		}
		else{
			obj.menuItems.show();
		}
	}*/
}


function fP_setControlButtons(){
	var obj = this;
	/*
	 * Configure the next button action
	 */
	obj.menu.after('<input type="button" class="button right" name="right" />');
	
	obj.domObject.find(".button").click(function(){
		
		if(typeof(siteTracker) != 'undefined'){
			siteTracker._trackEvent('FeaturesSetToggle', $(this).attr("name"));
		}
		obj.getMenuSet('right');
		obj.slideRibbon('645px','right');
	});	
}

function fP_getMenuSet(direction){
	var obj = this;
	
	
	var last = obj.visibleMenuItems[obj.max-1];
	var first = obj.visibleMenuItems[0];
	
	obj.visibleMenuItems = new Array();
	
	if((direction == 'right') || (direction == '')){
		for(var n=1; n<=obj.max; n++){
			if(last+n < obj.menuItems.length){
				obj.visibleMenuItems.push(last+n);
			}
			else{
				obj.visibleMenuItems.push(Math.abs(obj.menuItems.length-last-n));
			}	
		}
	}
	else if (direction == 'left'){
		for(var n=obj.max; n>0; n--){
			if(first-n < 0){
				obj.visibleMenuItems.push(obj.menuItems.length+(first-n));
			}
			else{
				obj.visibleMenuItems.push(first-n);
			}	
		}
	}	
}

function fP_slideRibbon(width,direction){
	var obj = this;
	
	obj.domObject.children('.border:first').css('z-index','10');
	
	
	if((direction == 'left') || (direction == '')){
		var startWidth = width;
		var endWidth = '-'+width;
	}
	else if(direction == 'right'){
		var startWidth = '-'+width;
		var endWidth = width;
	}	
	
	obj.domObject.find('ul:first').animate({'left':startWidth}, 500, function(){
		obj.menuItems.hide();		
		for(n=0;n<obj.visibleMenuItems.length;n++){
			obj.menuItems.eq(obj.visibleMenuItems[n]).show();
		}
		obj.domObject.find('ul:first').css('left',endWidth);
		obj.domObject.find('ul:first').animate({'left':'0px'}, 500, function(){
			obj.ribbonFlick(obj.domObject.find('ul:first'));
			obj.domObject.children('.border:first').css('z-index','0');
		});
	});
}