MTVM.services.ui = {}


MTVM.services.ui.ImageRotator	= function(objId)
{
	this.objId					= objId;
	
	/*** basic settings ***/
	this.images					={}	
	//this.filePath				= "/sitewide/img/logo/";
	//this.imageNamePrefix		= "logo";	
	//this.fileExtension			= ".jpg";
	
	/*** end basic settings ***/
	this.__init();
}

MTVM.services.ui.ImageRotator.prototype = 
{
	__init:	function()
	{
		this.images = MTVM.services.ui.ImageRotator.images; //set dynamically with data from ISIS
	},
	
	__randomize:	function()
	{
		var random = 0;
		random = Math.floor(Math.random()*this.images.length);
		return(random);
	},	
	
	showImage:	function()
	{
		var random = this.__randomize();
		
		fileLocation		= this.images[random];				
		
		document.getElementById(this.objId).src = fileLocation;
	}	
}



MTVM.services.ui.Lenser = function(lenserBoxId, lenserQuickMenuId, imageSrcObj)
{
		this.LENSER_BOX_ID			= lenserBoxId;
		this.LENSER_QUICKMENU_ID	= lenserQuickMenuId;
		this.LENSER_IMAGE_URL		= imageSrcObj?imageSrcObj.IMAGE_URL:""; 
		this.LENSER_LINK_URL		= imageSrcObj?imageSrcObj.LINK_URL:"";
		this.NUM_OF_LENSER_IMAGES	= this.LENSER_IMAGE_URL?this.LENSER_IMAGE_URL.length:0;
		this.DEFAULT_IMAGE_WIDTH	= 960;
		this.MAX_MARGIN				= 0;
		this.MIN_MARGIN				= -1 * (this.NUM_OF_LENSER_IMAGES - 1) * this.DEFAULT_IMAGE_WIDTH;
		this.IMAGE_IN_FOCUS			= 1;	//first image/slide displayed is defaulted to 1
		this.TIMER					= null;
		this.TIMER_LENGTH			= 4000;
		
		this.init();
}
	
MTVM.services.ui.Lenser.prototype = 
	{
		init:	function()
		{
			if(this.NUM_OF_LENSER_IMAGES > 0)
			{
				this.createLenserBox();			
				this.createQuickMenu();						
				this.loadImages();
				this.setQuickMenuButtonBorder();
				this.startTimer();
			}
		},				
	
		createLenserBox:	function()
		{
			var html = "";
			
			for(var idx=1; idx<=this.NUM_OF_LENSER_IMAGES; idx++)
			{
				if (this.LENSER_LINK_URL[idx-1]!="0")
				html = html+"<div id=\"lenserImgBox"+idx+"\" class=\"left\"><a href=\""+this.LENSER_LINK_URL[idx-1]+"\"><img id=\"lenserImg"+idx+"\" src=\"/sitewide/img/spacer.gif\" width=\"960\" height=\"360\" border=\"0\"/></a></div>";
				else
				html = html+"<div id=\"lenserImgBox"+idx+"\" class=\"left\"><img id=\"lenserImg"+idx+"\" src=\"/sitewide/img/spacer.gif\" width=\"960\" height=\"360\" border=\"0\"/></div>";
			}			
			html = html +"<div class=\"clear\"></div>";
			
			document.getElementById(this.LENSER_BOX_ID).innerHTML = html;
			
		},
		

		createQuickMenu:	function()
		{		
			var html = "";
			
			for(var idx=1; idx<=this.NUM_OF_LENSER_IMAGES; idx++)
			{			
				html = html + "<a href=\"javascript:void(0);\" onclick=\"mtvmLenser.go("+idx+");\" id=\"lenserQuickMenuLink"+idx+"\"><img src=\"/sitewide/img/spacer.gif\" id=\"lenserQuickMenuImg"+idx+"\" width=\"40\" height=\"15\"/></a>";
			}			
			document.getElementById(this.LENSER_QUICKMENU_ID).innerHTML = html;		
			
		},
		
		
		loadImages:	function()		
		{
			for(var i = 1; i<=this.NUM_OF_LENSER_IMAGES; i++)
			{				
				eval("document.getElementById('lenserImg"+i+"').src=\""+this.LENSER_IMAGE_URL[i-1]+"\";");
				eval("document.getElementById('lenserQuickMenuImg"+i+"').src=\""+this.LENSER_IMAGE_URL[i-1]+"\";");
			}
		},		
		
		setQuickMenuButtonBorder:	function()
		{
			this.resetQuickMenuBorders();
			document.getElementById("lenserQuickMenuLink"+this.IMAGE_IN_FOCUS).blur();
			document.getElementById("lenserQuickMenuImg"+this.IMAGE_IN_FOCUS).style.border = "#f90464 solid 1px";
			
		},
		
		resetQuickMenuBorders:	function()
		{
			for(var i = 1; i<=this.NUM_OF_LENSER_IMAGES; i++)
			{
			  document.getElementById("lenserQuickMenuImg"+i).style.border = "solid #666 1px";
			}
		},
		
		startTimer:	function()
		{
			var thisRef = this;
			this.TIMER = setTimeout("mtvmLenser.processTimer()", thisRef.TIMER_LENGTH); // very very hacky. Can't get the variable name which you init the MTVMlenser object with.
		},
		
		resetTimer:	function()
		{
			var thisRef = this;
			clearTimeout(thisRef.TIMER);
		},
		
		processTimer:	function()
		{
			if(this.__isNotLastSlide())
			{
				this.go("right");
			}else
			{
				this.go(1);
			}
		},
		
		go:	function(destination) //destination is "right" or "left" or an index number of the slide wish to 'goto'.
		{
			var currMarginLeft = parseFloat(document.getElementById(this.LENSER_BOX_ID).style.marginLeft) ? parseFloat(document.getElementById(this.LENSER_BOX_ID).style.marginLeft) : 0;
			var animateIt = false;
			
			if(this.__isNotAnimating(currMarginLeft))
			{
				switch(destination)
				{
					case "right":						
						if(this.__isNotLastSlide())
						{
							currMarginLeft = currMarginLeft - this.DEFAULT_IMAGE_WIDTH;							
							this.IMAGE_IN_FOCUS++;
							this.setQuickMenuButtonBorder();
							animateIt = true;	
						}						
						break;

					case "left":						
						if(this.__isNotFirstSlide())
						{
							currMarginLeft = currMarginLeft + this.DEFAULT_IMAGE_WIDTH;
							this.IMAGE_IN_FOCUS--;
							this.setQuickMenuButtonBorder();
							animateIt = true;	
						}
						break;
					
					default:						
						if(destination <= this.NUM_OF_LENSER_IMAGES)
						{
							currMarginLeft = (destination * this.DEFAULT_IMAGE_WIDTH * -1) + this.DEFAULT_IMAGE_WIDTH;						
							animateIt = true;							
							this.IMAGE_IN_FOCUS = destination;
							this.setQuickMenuButtonBorder();
						}
						break;
				}
			}
			
			
			if(animateIt == true) //animate it				
			{
				currMarginLeft = currMarginLeft + "px";
				this.resetTimer();
				$J("#"+this.LENSER_BOX_ID).animate({marginLeft: currMarginLeft}, 750 );
				this.startTimer();
			} 
		},
		
		__isNotAnimating:	function(currMarginLeft) //a check to see if sliding animation is still on-going and user is getting trigger happy and trying to click right or left button again
		{
			if(parseInt(currMarginLeft) % this.DEFAULT_IMAGE_WIDTH == 0 )
			{return true;}
			else
			{return false;}
		},
		
		__isNotLastSlide:	function()
		{
			if(this.IMAGE_IN_FOCUS < this.NUM_OF_LENSER_IMAGES)
			{return true;}
			else{
			return false;}
		},

		__isNotFirstSlide:	function()
		{
			if(this.IMAGE_IN_FOCUS > 1)
			{return true;}
			else{
			return false;}
		}
		
	}


/*
 * Hide/Show Thumbnail
 * 
 */
MTVM.services.ui.thumbFlyover = 
{	
	event:	null,
	node:	null,
	
	proc: function(obj, event)
	{

		this.event = event;
		this.node = obj;
		switch(event.type){
			case "mouseover":
				this.__show();
				break;
			
			case "mouseout":
				this.__hide();
				break;
		}
	},	
	
	__hide: function()
	{
		for(var i = 0; i< this.node.childNodes.length; i++)
		{
			if(this.node.childNodes[i].className == 'videoLinkThumbBg' || this.node.childNodes[i].className == 'videoLinkPlay')
			{
				this.node.childNodes[i].style.display = 'none';
			}
		}
	},
	
	__show: function()
	{
		for(var i = 0; i< this.node.childNodes.length; i++)
		{
			if(this.node.childNodes[i].className == 'videoLinkThumbBg' || this.node.childNodes[i].className == 'videoLinkPlay')
			{
				this.node.childNodes[i].style.display = 'block';
			}
		}		
		
	}
	
	
}





/************************************************************************/
/****************************** BUTTONS ********************************/
/************************************************************************/
MTVM.services.ui.button ={
	buttonList:	[]
}
MTVM.services.ui.button.BaseButton =  function()
{
	this.buttonProperties = 
	{
		leftEndSlice:{
			content: 	"",
			className:	""
		},
		
		rightEndSlice:{
			content: 	"",
			className:	""
		},
		
		buttonText:{
				content: 	"",
				className:	"",
				onclick:	""
		},
		
		container:{			
				className:	""
		}
	}

	this.BUTTON_HTML = "";
}

MTVM.services.ui.button.BaseButton.prototype.__buildButton = function(baseProperties)
{
	this.BUTTON_HTML = ''+
	'<div class="'+(baseProperties.container.className||"") +'">'+
		'<div class="'+(baseProperties.leftEndSlice.className||"") +'">'+(baseProperties.leftEndSlice.content||"")+'</div>'+

		'<div class="'+(baseProperties.buttonText.className||"") +'">'+ (baseProperties.buttonText.content||"") +
		//'<a href="javascript:_void();" onclick="'+(baseProperties.buttonText.onclick||"")+'">'+(baseProperties.buttonText.content||"") +'</a>'+
		'</div>'+
		'<div class="'+(baseProperties.rightEndSlice.className||"") +'">'+(baseProperties.rightEndSlice.content||"")+'</div>'+
		'<div style="clear:both;"></div>'+
	'</div>';
}



/************************************************************************/
/****************************** BUTTON TYPES ****************************/
/************************************************************************/



/***** playlist pink ********/
MTVM.services.ui.button.playlistPink = function(properties){
	this.buttonProperties = 
	{
		leftEndSlice:{
			content: 	"<img src=\"/sitewide/img/spacer.gif\"/>",
			className:	"MTVM-playlist-button-pink-leftEndSlice"
		},
		
		rightEndSlice:{
			content: 	"<img src=\"/sitewide/img/spacer.gif\"/>",
			className:	"MTVM-playlist-button-pink-rightEndSlice"
		},
		
		buttonText:{
				content: 	properties.buttonText.content||"",
				className:	"MTVM-playlist-button-pink-buttonText",
				onclick:	properties.buttonText.onclick||""
		},
		
		container:{			
				className:	"MTVM-playlist-button-pink-container"
		}
	}
	
	this.__buildButton(this.buttonProperties);
}
MTVM.services.ui.button.playlistPink.prototype = new MTVM.services.ui.button.BaseButton;	



/***** playlist white ********/
MTVM.services.ui.button.playlistWhite  = function(properties)
{
	this.buttonProperties = 
	{
		leftEndSlice:{
			content: 	"<img src=\"/sitewide/img/spacer.gif\"/>",
			className:	"MTVM-playlist-button-white-leftEndSlice"
		},
		
		rightEndSlice:{
			content: 	"<img src=\"/sitewide/img/spacer.gif\"/>",
			className:	"MTVM-playlist-button-white-rightEndSlice"
		},
		
		buttonText:{
				content: 	properties.buttonText.content||"",				
				className:	properties.buttonText.className||"MTVM-playlist-button-white-buttonText",
				onclick:	properties.buttonText.onclick||""
		},
		
		container:{			
				className:	"MTVM-playlist-button-white-container"
		}
	}
	
	this.__buildButton(this.buttonProperties);
}
MTVM.services.ui.button.playlistWhite.prototype = new MTVM.services.ui.button.BaseButton;	
	

/***** playlist dark ********/
MTVM.services.ui.button.playlistDark  = function(properties)
{
	this.buttonProperties = 
	{
		leftEndSlice:{
			content: 	"<img src=\"/sitewide/img/spacer.gif\"/>",
			className:	"MTVM-playlist-button-dark-leftEndSlice"
		},
		
		rightEndSlice:{
			content: 	"<img src=\"/sitewide/img/spacer.gif\"/>",
			className:	"MTVM-playlist-button-dark-rightEndSlice"
		},
		
		buttonText:{
				content: 	properties.buttonText.content||"",
				className:	properties.buttonText.className||"MTVM-playlist-button-dark-buttonText",
				onclick:	properties.buttonText.onclick||""
		},
		
		container:{			
				className:	"MTVM-playlist-button-dark-container"
		}
	}
	
	this.__buildButton(this.buttonProperties);
}
MTVM.services.ui.button.playlistDark.prototype = new MTVM.services.ui.button.BaseButton;	


/***** button 19px height ********/
MTVM.services.ui.button.white19  = function(properties)
{
	this.buttonProperties = 
	{
		leftEndSlice:{
			content: 	"<img src=\"/sitewide/img/spacer.gif\"/>",
			className:	"MTVM-button-white19-leftEndSlice"
		},
		
		rightEndSlice:{
			content: 	"<img src=\"/sitewide/img/spacer.gif\"/>",
			className:	"MTVM-button-white19-rightEndSlice"
		},
		
		buttonText:{
				content: 	properties.buttonText.content||"",				
				className:	properties.buttonText.className||"MTVM-button-white19-buttonText",
				onclick:	properties.buttonText.onclick||""
		},
		
		container:{			
				className:	"MTVM-button-white19-container"
		}
	}
	
	this.__buildButton(this.buttonProperties);
}
MTVM.services.ui.button.white19.prototype = new MTVM.services.ui.button.BaseButton;



/***** button 32px height ********/
MTVM.services.ui.button.white32  = function(properties)
{
	this.buttonProperties = 
	{
		leftEndSlice:{
			content: 	"<img src=\"/sitewide/img/spacer.gif\"/>",
			className:	"MTVM-button-white32-leftEndSlice"
		},
		
		rightEndSlice:{
			content: 	"<img src=\"/sitewide/img/spacer.gif\"/>",
			className:	"MTVM-button-white32-rightEndSlice"
		},
		
		buttonText:{
				content: 	properties.buttonText.content||"",				
				className:	properties.buttonText.className||"MTVM-button-white32-buttonText",
				onclick:	properties.buttonText.onclick||""
		},
		
		container:{			
				className:	"MTVM-button-white32-container"
		}
	}
	
	this.__buildButton(this.buttonProperties);
}
MTVM.services.ui.button.white32.prototype = new MTVM.services.ui.button.BaseButton;






/************************************************************************/
/**************************** CAROUSEL FUNCTION *************************/
/************************************************************************/

MTVM.services.ui.carousel = function(containerID, options)
{
	var ptr = this;
	
	this.carousel = $J("#"+containerID);
	this.options = options || {};
	
	var leftArrow = ('leftTriggerID' in this.options) ? $J("#"+this.options.leftTriggerID) : null;
	var leftArrowEnabled = (leftArrow!=null) ? leftArrow.html() : null;
	var leftArrowDisabled = ('leftTriggerDisabled' in this.options) ? this.options.leftTriggerDisabled : "<img src=\"/img/spacer.gif\" width=\"18\" height=\"1\" border=\"0\" />";
	var rightArrow = ('rightTriggerID' in this.options) ? $J("#"+this.options.rightTriggerID) : null;
	var rightArrowEnabled = (rightArrow!=null) ? rightArrow.html() : null;
	var rightArrowDisabled = ('rightTriggerDisabled' in this.options) ? this.options.rightTriggerDisabled : "<img src=\"/img/spacer.gif\" width=\"18\" height=\"1\" border=\"0\" />";
	
	this.containerWidth = ('containerwidth' in this.options) ? this.options.containerwidth : 0;
	this.containerHeight = ('containerheight' in this.options) ? this.options.containerheight : 0;
	this.itemWidth = ('itemwidth' in this.options) ? this.options.itemwidth : 0;
	this.itemHeight = ('itemheight' in this.options) ? this.options.itemheight : 0;
	this.listWidth = ('listwidth' in this.options) ? this.options.listwidth : 0;
	this.listHeight = ('listheight' in this.options) ? this.options.listheight : 0;
	this.flipMode = ('flipmode' in this.options) ? this.options.flipmode : 'page';
	this.size = ('size' in this.options) ? this.options.size : 0;
	this.ready = true;
	this.currentFocus = null;
	this.timer = null;
	
	this.AUTORUN = ('autorun' in this.options) ? this.options.autorun : false;
	this.AUTORUNDELAY = ('autorundelay' in this.options) ? this.options.autorundelay : 5000;
	this.ANIMATIONDELAY = ('animationdelay' in this.options) ? this.options.animationdelay : 750;
	
	this.init = function(){
		if (this.listWidth == 0) this.listWidth = this.itemWidth * this.size; // list width should always be num of items x size
		if (this.AUTORUN){ this.startAutoRun(); }
		leftArrow.html(leftArrowDisabled);
		rightArrow.html(rightArrowDisabled);
		if (this.size > 6){
			rightArrow.html(rightArrowEnabled);
		}
	}
	this.flip = function(dir, mode){
		if (typeof mode == 'undefined') mode = this.flipMode;
		//console.log("margin before: " + this.carousel.css("margin-left"));
		//alert("margin before: " + this.carousel.css("margin-left"));
		//console.log("fliping: "+ dir + " mode: "+ mode);
		if (this.ready && !this.animating()){ // if the ajax object is ready
			var currPos = this.carousel.css("margin-left");
			var currPosNumber = currPos.replace("px", '');
			
			if (dir=='left'){
				currPosNumber = parseInt(currPosNumber) + parseInt(this.containerWidth); 
				//console.log("distination: "+currPosNumber+"px")
				currPos = currPosNumber + "px";
				if (currPosNumber >= 0){
					this.carousel.animate({marginLeft: '0px'}, this.ANIMATIONDELAY);
					leftArrow.html(leftArrowDisabled);
				}
				else{
					this.carousel.animate({marginLeft: currPos}, this.ANIMATIONDELAY);
					
				}
				if (this.size > 6){
					rightArrow.html(rightArrowEnabled);
				}
			}
			else if (dir=='right'){
				currPosNumber = parseInt(currPosNumber) - parseInt(this.containerWidth);
				//console.log("distination: "+currPosNumber+"px")
				currPos = currPosNumber + "px";
				if (currPosNumber <= (this.listWidth * -1)){
					this.carousel.animate({marginLeft: '0px'}, this.ANIMATIONDELAY);
					leftArrow.html(leftArrowDisabled);
				}
				else{
					this.carousel.animate({marginLeft: currPos}, this.ANIMATIONDELAY);
					leftArrow.html(leftArrowEnabled);
				}
				if ((this.listWidth + currPosNumber) <= this.containerWidth){
					rightArrow.html(rightArrowDisabled);
				}else{
					rightArrow.html(rightArrowEnabled);
				}
			}
			else {
			}
			if (this.AUTORUN){
				clearTimeout(ptr.timer);
				this.startAutoRun();
			}
		}
		//console.log("margin now: " + this.carousel.css("margin-left"));
	}
	
	this.setCurrentFocus = function(){
	}
	
	this.startAutoRun = function(){
		this.AUTORUN = true;
		this.timer = setTimeout( function(){ptr.autorunProcess()}, ptr.AUTORUNDELAY);
	}
	
	this.stopAutoRun = function(){
		this.AUTORUN = false;
		clearTimeout(ptr.timer);
		console.log("autorun stopped");
	}
	
	this.autorunProcess = function(){
		this.flip("right");
	}

	this.animating = function(){
		var framePosition = this.carousel.css("margin-left");
		framePosition = framePosition.replace("px", '');
		var movingRange = (this.flipMode = 'page') ? this.containerWidth : this.itemWidth;
		if (framePosition % movingRange == 0){
			//console.log("NOT animating"); 
			return false; 
		} else {
			//console.log("animating"); 
			return true;  
		}
	}
	
	this.isFirstItem = function(){
	}
	this.isLastItem = function(){
	}
	
	this.init();
}