/***********************	VOD Navigation	******************************/
 

var VODnavBar = Class.create();
VODnavBar.prototype = 
{
	initialize: function()
	{
		this.subMenuOffset = 3; //Offset of submenus from main menu. Default is 0 pixels.
		this.delay = 0.4;
		this.colWidth = 167;
		this.fullWidth = 750;	
		this.inProcess = false;
				
		var catElms = $$('ul.vod_nav > li');
		var catWidth= 750/(catElms.length)-2;
		//if(isIE6) --catWidth;
	
		//alert('isIE6');
		catElms.each( 
			function($elm)
			{
				if(isIE6) $elm.addClassName('vod_nav_li');
				$elm.setStyle({width: catWidth+'px'});				
			}
		);
		
		$$('ul.vod_nav > li:first-child')[0].addClassName('first').setStyle({width: (catWidth+1)+'px'});	
		$$('ul.vod_nav > li:last-child')[0].addClassName('last').setStyle({width: (catWidth+1)+'px'});		
		
		
		$$('ul.vod_nav li div > ul').each(
			function(oUL)
			{
				var navItem = oUL.up('li');
				
				
				var colWidth = this.colWidth;
				var divTop = navItem.offsetHeight - ((isIE6)?this.subMenuOffset:0) +'px';
				
				var arrow = new Element('img', {src: staticResourcesUriPrefix+ '/images/common/vod_menu_more.gif'});
	
				navItem.select('a')[0].insert({'bottom': arrow});
				
				// split list into columns if needed
				// get number of items
				var LIs = oUL.select('li');
				
				//LIs.each(function(elm, index){elm.id=index});
				// get genre titles within items
				var catLIs = oUL.select('li.genre');			
				
				var col=1;
				var newDiv = oUL.up();
				
				var divWidth = colWidth;
				
				if( (LIs.length + catLIs.length) > 11)
				{
					navItem.setStyle({position: 'static'});

					for(var i=0, count=0;i<LIs.length+1;i++, count++)
					{
						if(count>0 && (count % 11 == 0 || i==LIs.length) )
						{		
							var newUL = new Element('ul').addClassName( 'col'+col);
							
							
							oUL.select('li.col'+col).each(function(elm)
							{
								newUL.insert({bottom: elm.removeClassName('col'+col)});
							});
							
							newUL.select('li:first-child')[0].addClassName('first');
							newUL.select('li:last-child')[0].addClassName('last');
							
							newDiv.insert({bottom: newUL.removeClassName('col'+col)});
							
							count=0;						
							col++;	
						}
						
						if(i>=LIs.length) break;
						
						var elm = LIs[i];
						
						elm.addClassName('col'+col);
						
						if(elm.hasClassName('genre'))
						{
							count++;
						}
					}
					
					var divWidth = (--col)*colWidth;
					
					oUL.remove();							
				}
				else
				{
					newDiv.select('ul')[0].addClassName('single');
					newDiv.select('li')[0].addClassName('first');			
				}		
						
				var leftOffset = navItem.offsetLeft;		
				var widthOffset = navItem.offsetWidth;					
				var rightOffset = ((this.fullWidth-widthOffset-leftOffset)- (divWidth-widthOffset)/2);
				rightOffset = ((rightOffset+divWidth)>=this.fullWidth)? (this.fullWidth-divWidth) : (rightOffset<0)?0:rightOffset;															
				newDiv.setStyle({top : divTop,width : divWidth+'px', right:rightOffset + 'px'});
				
				newDiv.select('li:last-child')[0].addClassName('last');
				newDiv.select('ul:last-child')[0].addClassName('last');
				
				navItem.observe('mouseenter', this.reveal.bind(this));	
				navItem.observe('mouseleave', this.vanish.bind(this));	
				
				

			}.bind(this)
		);	
		
		$$('.vod_nav_wrapper')[0].setStyle({visibility:'visible'});
			
		//alert($$('.vod_nav_wrapper')[0].innerHTML);
	},
	
	reveal: function(event)
	{	
		var evnt = event || window.event;
		var $srcElm = Event.element(evnt);
		var $elm = $srcElm.up('ul.vod_nav > li')
		
		$elm = $elm || $srcElm;
		
		if(isIE6) $elm.addClassName('hover');
		
		this.inProcess = true;
		var myDiv = $elm.select('div')[0] || $elm.select('ul')[0];
		myDiv.setStyle({
				display: 'block',
				zIndex: 0
			});
		
		if(!myDiv.maxHeight)
		{
			//myDiv.maxHeight = myDiv.offsetHeight;
			myDiv.maxHeight = 226;		
		} 
	
		var openMenuTween = new Tween(myDiv.style, 'height', Tween.regularEaseOut, 0, myDiv.maxHeight, this.delay, 'px');
		var fadeMenuTween = new OpacityTween(myDiv, Tween.None, 0, 100,  this.delay);
		
		var pShowMenu = new Parallel();
		pShowMenu.addChild(openMenuTween);
		pShowMenu.addChild(fadeMenuTween);	

		$elm.setStyle({zIndex : 100});
		pShowMenu.start();

	},	
	
	vanish: function(event)
	{
		//if(VODnavBar.inProcess) return;
		var evnt = event || window.event;
		var $srcElm = Event.element(evnt);
		var $elm = $srcElm.up('ul.vod_nav > li')
		$elm = $elm || $srcElm;
		
		if(isIE6) $elm.removeClassName('hover');
		
		this.inProcess = true;
		
		var myDiv = $elm.select('div')[0] || $elm.select('ul')[0];
		/*
		if(!myDiv){
			$elm.setStyle({border:'1px solid red'});
			$srcElm.setStyle({border:'1px solid yellow'});
		} 
		*/
		var closeMenuTween = new Tween(myDiv.style,  'height', Tween.regularEaseOut, myDiv.maxHeight,  0, this.delay, 'px');
		var fadeoutMenuTween = new OpacityTween(myDiv, Tween.None, 100, 0,  this.delay);

	  	var pHideMenu = new Parallel();
		
		pHideMenu.addChild(closeMenuTween);
		pHideMenu.addChild(fadeoutMenuTween);		

		$elm.style.zIndex=0;
		pHideMenu.start();	
		pHideMenu.onMotionFinished = function()
		{
			myDiv.setStyle({display:'none', zIndex:100});
			//VODnavBar.inProcess = false;
		}		
	}
};

/**************	VOD view page *******************/

var vodPlayer = {
	
	minH:68,
	maxH:342,
	inprocess: false,
	
	init: function(picUrl)
	{
		
		if(!picUrl) return;
		
		if(document.images)
		{
			pic = new Image(750,421); 
		    var $pic=$(new Image());
		    $pic.observe('load',vodPlayer.enableCurtain);
		    $pic.observe('error',vodPlayer.loadContent); 				  
			$pic.src = picUrl; 
		}
	},
	
	enableCurtain: function()
	{
		$$('.moreOnSiteTitle')[0].style.display='none';
		$('id_curtain').show();
		
		// set time to display banner
		setTimeout( function(){
			vodPlayer.openCurtain();
		} , 5000 );		
	},
	
	openCurtain : function() 
	{
	
		var tweenLeft  = new Tween($('id_curtainLeft').style,  'left', Tween.regularEaseOut, 0,  -375, 1, 'px');
		var tweenRight = new Tween($('id_curtainRight').style, 'left', Tween.regularEaseOut, 375 ,750, 1, 'px');
		
		tweenLeft.onMotionFinished = function()
		{
			$('id_curtain').hide();	// remove curtain div
			
			if (window.VODManager && VODManager.shouldLoad)
			{
				VODManager.loadPlayer();
			}
		}
	
		tweenLeft.start();
		tweenRight.start();
	},
	
	loadContent: function()
	{
		if (window.VODManager && VODManager.shouldLoad)
		{
			VODManager.loadPlayer();
		}
		
		var contentUrl = $$('.moreOnSiteAjaxContainer')[0].readAttribute('contentUrl');

		if ($$('html')[0].hasClassName('ie')) 
		{
			$('vod_player_banner').setStyle(
			{
				height: '250px',
				overflow: 'hidden'
			});
		}
		sendUrlInAjax(contentUrl,vodPlayer.callback);
	},
	
	callback: function(req)
	{	
		var text = req.responseText;
		
		var $container = $$('.moreOnSiteAjaxContainer')[0];
		
		text += '<div id="contentHandler" class="closed"><button>&nbsp;</button></div>';
		
		$container.update(text);
		
		$$('.vod_curtain_iframe_div button')[0].observe('click',function()
		{
			vodPlayer.toggleContent();
		});
		
		$$('.vod_curtain_iframe_div button')[0].observe('focus',function(event)
		{
			var elm = Event.element(event);
			elm.blur();
		});	
				
		$container.onmouseout = function(event){
			var evnt = event || window.event;
			if (isMouseLeaveOrEnter(evnt, this)) {
				vodPlayer.toggleContent(true);
			}
		};
		
		$container.addClassName('loaded');
			
		text.evalScripts();	
	},	
	
	toggleContent: function(isMouseOut)
	{
		if(vodPlayer.inprocess) return;
		
		// handle mouseout
		if(isMouseOut && $('contentHandler').hasClassName('closed')) return;
	
		var startH = this.minH;
		var endH = this.maxH;
		
		var newClassName = 'open';
		if($('contentHandler').hasClassName('open'))
		{
			startH = this.maxH;
			endH = this.minH;
			newClassName = 'closed';
		}		
		
		var btn = $$('.vod_curtain_iframe_div button')[0];

		var tweenHeight  = new Tween($$('.moreOnSiteAjaxContainer ul')[0].style,  'height', Tween.regularEaseOut, startH,  endH, 1, 'px');
		var fadeoutOpacity  = new OpacityTween(btn, Tween.regularEaseOut, 100, 1, 0.9);
		var fadeinOpacity  = new OpacityTween(btn, Tween.regularEaseIn, 1, 100, 0.3)
		
		tweenHeight.onMotionStarted = function()
		{
			vodPlayer.inprocess = true;
			fadeoutOpacity.start();	
		}		
		
		
		tweenHeight.onMotionFinished = function()
		{
			$('contentHandler').className = newClassName;	// remove curtain div
			fadeinOpacity.start();
			vodPlayer.inprocess = false;
		}
		
		tweenHeight.start();
	}
	
};


/************************VOD Index ********/

var VODindex = Class.create();
VODindex.prototype = 
{
	initialize: function(isVODindex, chosenTab)
	{
		
		$$('.vod_tabs li').each(
			function($elm, indx)
			{
				$elm.observe('click', function(evnt)
				{
					Event.stop(evnt);
					this.selTab($elm,isVODindex);
				}.bind(this));	
				
				if(chosenTab && chosenTab==indx)
				{
					this.selTab($elm,isVODindex);
				} 
			}.bind(this)
		);

		$$('.vod_index span a').each(
			function($elm, indx)
			{
				$elm.observe('click', function(evnt)
				{
					Event.stop(evnt);
					this.selLetter($elm);
				}.bind(this));	
			}.bind(this)
		);
		
		$$('.vod_list > span').each(
			function($elm, indx)
			{
				$elm.observe('click', function(evnt)
				{
					window.scrollTo(0,400);
				});	

			}
		);
		
		/*
		$$('.vod_index .content .off').each(
			function($elm, indx)
			{
				var lastPos = $elm.getStyle('position');
				alerT('lastPos='+lastPos);
				$elm.setStyle({
					position: 'absolute',
					visibility: 'hidden',
					display: 'block'
				});
				
				$elm..select('.vod_list ul li a').each(
					function($elm)
					{
						$elm.trunc();	
					}
				);
				
				$elm.setStyle({
					position: lastPos,
					visibility: 'visible',
					display: ''
				});
				
			}
		);
	*/
		
		
	},
	
	selTab:function(oTab, isVODindex) 
	{ 
		//tabs
		$$('.vod_tabs li').each(
			function($elm)
			{
				$elm.className = 'off';
				$('c' + $elm.id).className = 'clearer off';	
			}
		);
	
		oTab.className = 'on';
		$('c' + oTab.id).className = 'clearer on';
		
		if(isVODindex)
		{
			anchor = $('c'+oTab.id).select('a')[0];
			this.selLetter(anchor);			
		}
	},	
	
	selLetter: function($elm)
	{
		//letter index
		var index = $elm.href.split('#')[1];
		var disp = (index=='all')?'block':'none';
	
		var $parDiv = $elm.up('div.index');
		
		$parDiv.nextSiblings('.vod_list').each(
			function($elm, indx)
			{
				$elm.setStyle({display:disp});
			}
		);
		
		if(index!='all')
		{
			var par = $parDiv.up();
			var $list = par.select('.vod_letter_'+ index)[0];
			$list.setStyle({display:'block'})

			par.select('.vod_shade')[0].setStyle({display:'block'}).scrollTo();	
		} 	
			
	}	
}


			
/***********************	VOD Curtain	******************************/
var vodCurtain = {
	
	elems: null,
	imgs: {},
	title: {},
	link: {},
	dispElm: null,
	count: null,
	index: {},
	_delay: 6,
	_freq: 0.4,
	allowClick: {},
	bStop: {},
	hideTitle: {},	
	showTitle: {}, 
	background:{},
	timeObj:{},

	init: function(position)
	{
		// overall init
		if(!position)
		{
			this.elems = $$('.vod_curtain ul li');			

			this.elems.each(function(elm){elm.setStyle({display:'none'});});
			
			this.dispElm = this.elems[0];
			this.count =  this.elems.length;
					
			this.dispElm.setStyle({display:'block', position:'relative'});
			
			this.init('right');
			this.init('left');
			
			return;
		}
		
		// a flag indicates pause request by user
		this.bStop[position]=false;
		this.index[position] = 1;
		this.allowClick[position] = true;
		
		this.link[position] = this.dispElm.select('a.'+position)[0];
		
		this.link[position].observe('mouseover', function(e, _position)
		{
			//alerT('mouseover='+_position);
			this.bStop[_position]=true;
			//alerT('bstop= '+_position+' : '+this.bStop[_position]);
		}.partial(undefined, position).bind(this));
		
		this.link[position].onmouseout = function(e, _position,_this)
		{
			var evnt = e || window.event;
			
			if (isMouseLeaveOrEnter(evnt, this) == true) 
			{	
				if (_this.bStop[_position]) 
				{
					_this.bStop[_position] = false;
					//alerT('onmouseout bstop= '+_position+' : '+_this.bStop[_position]);
					_this.play.bind(_this);
				}
			}
		}.partial(undefined, position, this);
		
		this.title[position] = this.link[position].select('p')[0];
		this.background[position] = this.link[position].select('h5')[0];

		this.link[position].href = this.elems[1].select('a.'+position)[0].href;
		this.title[position].update(this.elems[1].select('a.'+position+' p')[0].innerHTML);
		
		
		var imgs = {};
		// init image

		imgs['visible'] = this.dispElm.select('a.'+position+' > img.visible')[0];

		imgs['visible'].src = this.elems[1].select('a.'+position+' > img')[0].src;
		
		$$('.vod_curtain .btn.'+position+' > .up').each( 
			function($elm)
			{
				//alerT('position='+position)
				$elm.observe('click', function(evnt, position)
					{
						Event.stop(evnt);
						//alerT('position2='+position)
						this.scroll('prev',position, true);
					}.partial(undefined, position).bind(this)
				);
				
				$elm.observe('focus', function(evnt)
					{
						this.blur();
					}.bind($elm)
				);
			}.bind(this));			

			
			$$('.vod_curtain .btn.'+position+' > .down').each( function($elm)
			{
				$elm.observe('click', function(evnt, position)
					{
						Event.stop(evnt);
						
						this.scroll('next',position, true );
					}.partial(undefined, position).bind(this)
				);
				
				$elm.observe('focus', function(evnt)
					{
						this.blur();
					}.bind($elm)
					);
			}.bind(this));
			
	
	
			/** show back titles animation*/
			var showTitle = new Tween(this.background[position].style,  'marginTop', Tween.regularEaseOut, 0,  -26, 0.3, 'px');
	

			showTitle.onMotionFinished = function(_position)
			{
				var dly = randomInt(this._delay-2, this._delay);
				this.allowClick[_position] = true;
				this.timeObj[_position] = this.play.bind(this).delay(dly, position);
			}.bind(this).curry(position);			
	
			this.showTitle[position] = showTitle;			
			
			/************hide titles animation *********/
			var hideTitle = new Tween(this.background[position].style,  'marginTop', Tween.regularEaseIn, -26,  0, 0.2, 'px');
			
			this.hideTitle[position] = hideTitle;	
			this.play(position);
	},
	
	
	play: function(position)
	{
		this.pause(position);
		this.scroll('next',position);
	},
	
	pause: function(position)
	{
		clearTimeout(this.timeObj[position]);
	},
	
	scroll: function(dir, position, userClick)
	{
		//alerT('scroll='+position+' : allowClick='+ this.allowClick[position])
		
		if(!this.allowClick[position]) return;
		
		if(userClick)
		{
			this.pause(position);
		} 
		else if(this.bStop[position]) 
		{
			// on mouse over the scrolling stops
			this.pause(position);
			return;
		}
				
		this.allowClick[position] = false;
		
		var freq = this._freq;
		
		// hide the titles 				
		var delay = this._delay;
	
	/**********(: Begin animation movie :) ***************/
	
	// Initialize tween animation objects
		var imgs = {};
		// init image
		imgs['visible'] = this.dispElm.select('a.'+position+' > img.visible')[0];
		
		imgs['shadow'] = this.dispElm.select('a.'+position+' > img.shadow')[0];
		
		//  get the hidden image   
		imgs['hidden'] = this.dispElm.select('a.'+position+' > img.hidden')[0];

		
		// first - hide the titles		
		
		var index;
		
		if(dir=='next')
		{
			if((index = ++this.index[position]) >=this.count)
			{
				index = this.index[position] = 1;
			} 
		}
		else
		{
			if((index = --this.index[position])<=1)
			{
				index = this.index[position] = (this.count-1);
			} 	
		}		
			
		imgs['hidden'].src = this.elems[index].select('a.'+position+' > img')[0].src;
		
		
				
		// position the upcoming images in place
		if (dir == 'next') 
		{	
			window.Effect = Tween.regularEaseIn;			
			Element.insert(imgs['visible'], {
				'before': imgs['hidden']
			});
		}
		else 
		{
			window.Effect = Tween.regularEaseOut;
			Element.insert(imgs['visible'], {
				'after': imgs['hidden']
			});
		}	
			
		var hideImg = new Tween(imgs['visible'].style,  'height', window.Effect, 198,  0, freq, 'px');
		hideImg.onMotionFinished = function()
		{
			this.removeClassName('visible').addClassName('hidden');	
		}.bind(imgs['visible']);
		
		var resizeShadow, moveShadow, fadeShadow;
		
		
		if(dir == 'next')
		{
			resizeShadow = new Tween(imgs['shadow'].style,  'height', window.Effect, 198,  0, freq, 'px');
			moveShadow = new Tween(imgs['shadow'].style,  'top', window.Effect, 0,  198, freq, 'px');
			fadeShadow = new OpacityTween(imgs['shadow'], window.Effect, 0, 100,  freq*1+0.1);
	 	
			fadeShadow.onMotionStarted = function(_freq)
			{
				Element.show.delay(_freq, this);
			}
			.curry(0.3)
			.bind(imgs['shadow']);
			
			resizeShadow.onMotionFinished = function()
			{
				this.hide();	
			}
			.bind(imgs['shadow']);							
		}
		else
		{
			var resizeShadow = new Tween(imgs['shadow'].style,  'height', window.Effect, 0, 198, freq, 'px');
			var moveShadow = new Tween(imgs['shadow'].style,  'top', window.Effect, 198, 0, freq, 'px');
			var fadeShadow = new OpacityTween(imgs['shadow'], window.Effect, 100, 0,  freq*1+0.1);
	 	
			fadeShadow.onMotionStarted = function()
			{
				this.show();	
			}			
			.bind(imgs['shadow']);
			
			resizeShadow.onMotionFinished = function(_freq)
			{
				Element.hide.delay(_freq, this);
			}
			.curry(0.3)
			.bind(imgs['shadow']);		
		}
				
		var showImg = new Tween(imgs['hidden'].style,  'height', window.Effect, 0,  198, freq, 'px');
		showImg.onMotionFinished = function()
		{
			this.addClassName('visible').removeClassName('hidden');
		}.bind(imgs['hidden']);	
			
		var pSwapImages = (new Parallel())
			.addChild(showImg)
			.addChild(hideImg)
			.addChild(fadeShadow)
			.addChild(resizeShadow)
			.addChild(moveShadow);
								
		pSwapImages.onMotionFinished = function(_position)
		{
			this.showTitle[_position].start();
		}.curry(position).bind(this);		
				
		this.hideTitle[position].onMotionFinished = function(_position)
		{
			pSwapImages.start();
			this.title[_position].update(this.elems[index].select('a.'+position+' > p')[0].innerHTML);
			this.link[_position].href = this.elems[index].select('a.'+position)[0].href;
										
		}.curry(position).bind(this);
		
		this.hideTitle[position].start();				
	}
};


//vodCurtain.dispElm.select('a.right img.visible')[0]].setStyle({border:'1px red solid'})