Vudu.widget.Paginator = function( pDivId , cDivId , sSelId , alphaSelId , viewTypeId , userId , key , config)    {
 
        // assing the datasource
        this._directorUrl = 'proxy';
        //assign the imgSoruce
        this._imgSoruce = '_IMG';
        //assign the movies homepage root
        this._movieHomeRoot = '/mediaWebApp/Title';
 		
 		this.userId = userId;
 		this.key= key;
 		
        // init state
        var _startIndex = 0;
        this.contentGenre = -1;
        this.contentSortBy = '-watchedScore';
        this.firstLetter = 0;
        this.viewType = 0; // default is grid view
 		this.pageSize = 0; // default for grid is 24
 		this.previousViewType = 1;
 		
        if(config)      {
                this._directorUrl = config.directorUrl? config.directorUrl : this._directorUrl;
                this._imgSoruce = config.imgSoruce? config.imgSoruce : this._imgSoruce;
                this._movieHomeRoot = config.movieHomeRoot? config.movieHomeRoot : this._movieHomeRoot;
                this.contentSortBy = config.contentSortBy? config.contentSortBy : this.contentSortBy;
                this.firstLetter = config.firstLetter? config.firstLetter : this.firstLetter;
                this.previousViewType = config.viewType? config.viewType : this.previousViewType;
        }
 		
        // init the paginator div
        this._paginatorDiv = YAHOO.util.Dom.get(pDivId);
        // init the content div
        this._contentDiv = YAHOO.util.Dom.get(cDivId);
        // init the sort select
        this._sortSelect = YAHOO.util.Dom.get(sSelId);
 		// init the alpha filter select
 		this._alphaSelect = YAHOO.util.Dom.get(alphaSelId); 
 		// init the view type image
 		this._viewTypeImg = YAHOO.util.Dom.get(viewTypeId); 
 		
        // assing the loader
        this.loader = new Vudu.widget.Paginator.LoadingDiv(this);
 		
        // render the paginator
        this.render();
 		
 		// set the mini details
 		this.mouseOverDetails = new Vudu.widget.module.MovieDetails( this._directorUrl , this._imgSoruce , this.userId , this.key);
        this.mouseOverDetails.render();
        this.mouseOverDetailsHideTimer = 0;
        this.mouseOverDetailsShowTime = 0;
};
 
Vudu.widget.Paginator.prototype = {
 
		
		/**
		  * a counter used to keep track of images being loaded
		  * for the animation to start after the images
		  * are loaded.
		  *
		  * the counter should be reset after before content
		  * is loaded
		  *     this.showContent()
		  */
		_imagesLoaded : 0,
		
		direction : null,
		
		
		animationTimer : 0,
		
		waitingResponse : false,
		
		oCallback : null,
		
		
		
		
		prevSortIndex : 0,
		
		searchSet : false,
		
		searchKeywordsStr : null,
		
		searchKeywordsArray : null,
		
		
		
		
		
		
		
		startIndex : 0,
		
		recordsCount : 0,
		
		totalRecords : 0,
		
		specialCaseGenres : [
			{ val: -1, params : 'type=program&type=series'} ,
			{ val: -2, params : 'type=series'} ,
			{ val: -3, params : 'type=program&listType=newToRent'} ,
			{ val: -4, params : 'type=program&listType=newToOwn'} ,
			{ val: -5, params : 'type=program&listType=newTitles'} ,
			{ val: -6, params : 'type=program&listType=comingSoon'},
			{ val: -7, params : 'videoQuality=hdx'},
			{ val: -8, params : 'videoQuality=hd'},
			{ val: -9, params : 'listType=rated'  , auth : 'true' },
			{ val: -10, params :'listType=owned&type=program'  , auth : 'true' },
			{ val: -11, params :'listType=rented' , auth : 'true' },
			{ val: -12, params :'listType=owned&type=episode' , auth : 'true' }
		],
		//2009-03-31 07:00:00
		
		
		statusPage : null,
		
		nextPageImg : null,
		
		previousPageImg : null,
		
		firstPageImg : null,
		
		
		
		slideAnimation1 : null,
		
		slideAnimation2 : null,
		
		growAnimation : null,
        
		
		oCallback  : {
                success: function( oResponse ) {
                    
                    var results = Vudu.util.parseDirectorJSONResponse(oResponse.responseText);
                    
					if ( !results.content ) {
						this.failure(oResponse);
					}
					else {
						
						var recordsReturned = results.content.length;
						
						var startIndex = parseInt(oResponse.argument.offset);
						
						// call updae
						if (results.totalCount) {
							oResponse.argument.thePaginator.update(startIndex, recordsReturned, results.totalCount);
						}
						else {
							oResponse.argument.thePaginator.update(startIndex, recordsReturned);
						}
						
						
						var cDiv = document.createElement('div');
						YAHOO.util.Dom.setStyle(cDiv, 'padding-left', '4px');
						
						oResponse.argument.thePaginator.getContainer().appendChild(cDiv);
						
						
						// reset images
						oResponse.argument.thePaginator._imagesLoaded = 0;
						
						var thisRef = oResponse.argument.thePaginator;
						oResponse.argument.thePaginator.animationTimer = window.setTimeout(function() {
							thisRef.showContent();
						}, 3000);
						
						oResponse.argument.thePaginator.renderMovie = (oResponse.argument.thePaginator.viewType == 1) ? oResponse.argument.thePaginator.createImg : oResponse.argument.thePaginator.createList;
						
						for (var i = 0; i < results.content.length; i++) {
							cDiv.appendChild(oResponse.argument.thePaginator.renderMovie(i, results.content[i]));
						}
					}   
                },
                failure: function( oResponse ) {
            
                    var cDiv = document.createElement('div');
                    
                    if(this.searchSet)  {
                        cDiv.innerHTML = "Your search returned 0 results. Try using fewer words to get more results.";
                    }
                    else    {
                        cDiv.innerHTML = "Your request returned 0 results.";
                    }
                    
                    YAHOO.util.Dom.setStyle(cDiv , 'text-align' , 'center');
                    YAHOO.util.Dom.setStyle(cDiv , 'padding-left' , '4px');
                    YAHOO.util.Dom.setStyle(cDiv , 'padding-top' , '40px');
                    
                    oResponse.argument.thePaginator.getContainer().appendChild(cDiv);
                    
                    // reset images
                    oResponse.argument.thePaginator._imagesLoaded = 0;
                          
                    // reset pagination
                    oResponse.argument.thePaginator.update( 0 , 0 , 0 );
                          
                    // show the contents;
                    oResponse.argument.thePaginator.showContent();
                }
        },
        
        
        
        
        
 
        /**
          * returns the NON-active div container
          * used to add the elements to while
          * the active contaier is showing
          *
          * there should be no need to retreive the
          * showing contaier but in case a reference
          * is needed use:
          *     return this.slideAnimation1.getEl();
          *
          */
        getContainer : function() {
                return this.slideAnimation2.getEl();
        },
 		
 		
 		
 		
 		
 		
        /**
          * starts the animation to show the new set of movies
          * this method can is called when all images are loaded
          * or when this.showContentSafeGard triggers.
          *
          * this should only be called when
          *             this.getContainer() has been populated with content
          *
          * this method will also clean out
          *     this._imagesLoaded counter
          *
          * this method will cancel
          *     this.showContentSafeGard timeout call
          */
		showContent : function()        {
 
			clearTimeout(this.animationTimer);
			this.animationTimer = 0;
			this._imagesLoaded = 0;
			
			if(this.direction > 0 ) {
			
				this.slideAnimation1.getEl().style.top = '0px';
				this.slideAnimation2.getEl().style.top = '0px';
			
				this.slideAnimation1.attributes = { left : { from: 0    , to: -646      } };
				this.slideAnimation2.attributes = { left : { from: 646  , to: 0         } };
			}
			else if(this.direction < 0 ){
			
				this.slideAnimation1.getEl().style.top = '0px';
				this.slideAnimation2.getEl().style.top = '0px';
			
				this.slideAnimation1.attributes = { left : { from: 0    , to: 646       } };
				this.slideAnimation2.attributes = { left : { from: -646 , to: 0         } };
			}
			else    {
			
				this.slideAnimation1.getEl().style.left = '0px';
				this.slideAnimation1.getEl().style.top  = '0px';
				this.slideAnimation2.getEl().style.top  = '-580px';
				this.slideAnimation2.getEl().style.left = '0px';
				
				this.slideAnimation1.attributes = { top : { to: 580     } };
			this.slideAnimation2.attributes = { top : { to: 0       } };
			}
			
			this.slideAnimation1.animate();
			this.slideAnimation2.animate();
			
			// switch and prepare for next
			var temp = this.slideAnimation2;
			this.slideAnimation2 = this.slideAnimation1;
			this.slideAnimation1 = temp;
        },
        
        
        
        
        
        /**
          * this method renders tha pagination controlls
          * and initiates the fiest call to init data.
          *
          */
        render : function()     {
 
			// the first div contaier
			var activeContainer = document.createElement('div');
			activeContainer.style.overflow = 'hidden';
			activeContainer.style.width = '646px';
			activeContainer.style.height = '580px';
			activeContainer.style.top = '-580px';
			activeContainer.style.position = 'absolute';
			this._contentDiv.appendChild( activeContainer );
			// setup the first animation controller
			var thisRef = this;
			this.slideAnimation1 = new YAHOO.util.Anim( activeContainer );
			this.slideAnimation1.duration = 0.5;
			this.slideAnimation1.method = YAHOO.util.Easing.easeIn;
			this.slideAnimation1.onComplete.subscribe(
			        function()      {
			                thisRef.setStatus(false);
			                YAHOO.util.Event.purgeElement( thisRef.getContainer() , true  );
			                thisRef.getContainer().removeChild(thisRef.getContainer().childNodes[0]);
			        }
			);
			
			// the second div container
			var secondContainer = document.createElement('div');
			secondContainer.style.overflow = 'hidden';
			secondContainer.style.width = '646px';
			secondContainer.style.height = '580px';
			secondContainer.style.top = '-580px';
			secondContainer.style.position = 'absolute';
			this._contentDiv.appendChild(secondContainer);
			// setup the second animation controller
			this.slideAnimation2 = new YAHOO.util.Anim(secondContainer);
			this.slideAnimation2.duration = 0.5;
			this.slideAnimation2.method = YAHOO.util.Easing.easeIn;
			
			// add event listener for the select option
			for(var i=0 ; i < this._sortSelect.options.length; i++) {
			        if(this._sortSelect.options[i].value == this.contentSortBy )    {
			                this._sortSelect.selectedIndex = i;
			                break;
			        }
			}
			YAHOO.util.Event.addListener  (
			        this._sortSelect ,
			        'change' ,
			        function( e , paginator) {
			                paginator.loadData( 0 , true );
			        },
			        this ,
			        true
			);
				
			// add event listener for the select option
			for(var i=0 ; i < this._alphaSelect.options.length; i++) {
				if(this._alphaSelect.options[i].value == this.firstLetter )    {
					this._alphaSelect.selectedIndex = i;
					break;
				}
			}
			YAHOO.util.Event.addListener  (
				this._alphaSelect ,
				'change' ,
				function( e , paginator) {
					// select title sort
					for(var i=0 ; i < paginator._sortSelect.options.length; i++) {
					        if(paginator._sortSelect.options[i].value == 'title' )    {
					                paginator._sortSelect.selectedIndex = i;
					                break;
					        }
					}
					paginator.loadData( 0 , true );
				},
				this ,
			true
			);
			// add event listener for view type image
			YAHOO.util.Event.addListener  (
				this._viewTypeImg ,
				'click' ,
				function( e , paginator) {
					
					if( !paginator.waitingResponse )	{
						if(paginator.viewType == 1)	{	
		        			paginator.previousViewType = 2;
		        		}
		        		else	{ 	
		        			paginator.previousViewType = 1;
		        		}
		        		paginator.loadData( 0 , true );
					}
				},
				this ,
			true
			);
				
			// set the pagination div container
			this._paginatorDiv.style.position = 'relative';
			this._paginatorDiv.style.width = '200px';
			// generate the status span element
			this.statusPage = new Vudu.widget.Paginator.CurrentPageStatusReport(this);
			// generate the first image element
			this.firstPageImg = new Vudu.widget.Paginator.FirstPageImage(this);
			// generate the previous image element
			this.previousPageImg = new Vudu.widget.Paginator.PreviousPageImage(this);
			// generate the next page image element
			this.nextPageImg = new Vudu.widget.Paginator.NextPageImage(this);
			
			var cTable = document.createElement('table');
			
			
			cTable.setAttribute('cellspacing', '0');
			cTable.setAttribute('cellpadding', '0');
			cTable.setAttribute('border', '0');
			
			var cRow = cTable.insertRow(0);
			                  
			var firstPageCell = cRow.insertCell(0);
			YAHOO.util.Dom.setStyle(firstPageCell , 'padding-right' , '5px');
			firstPageCell.appendChild(this.firstPageImg.render());
			
			var prevPageCell = cRow.insertCell(1);
			YAHOO.util.Dom.setStyle(prevPageCell , 'padding-right' , '5px');
			prevPageCell.appendChild(this.previousPageImg.render());
			
			var statusPageCell = cRow.insertCell(2);
			statusPageCell.align = 'center';
			statusPageCell.style.color = 'rgb(255, 143, 0)';
			statusPageCell.style.fontSize = '10px';
			statusPageCell.style.paddingLeft = '5px';
			statusPageCell.style.paddingRight = '5px';
			statusPageCell.style.paddingBottom = '2px';
			// apned status el
			statusPageCell.appendChild(this.statusPage.render() );
			
			var nextPageCell = cRow.insertCell(3);
			YAHOO.util.Dom.setStyle(nextPageCell , 'padding-left' , '5px');
			YAHOO.util.Dom.setStyle(nextPageCell , 'padding-right' , '5px');
			nextPageCell.appendChild(this.nextPageImg.render() );
			
			this._paginatorDiv.appendChild(cTable);
                        
        },
 		
 		
 		
 		
 		
 		
 		switchViewType : function(view)	{
 		
        	if( this.waitingResponse ) return false;	
        	
        	// if requested view is the current one - return
        	if(!view || view == this.viewType)	{
        		return false;
        	}
        	
        	// if requesting list view 
        	if(view == 2)	{
				this.viewType = 2;
				this.pageSize = 4;
				this._viewTypeImg.src = this._imgSoruce+"/list_button.png";
        	}
        	else	{
				this.viewType = 1;
				this.pageSize = 24;
				this._viewTypeImg.src = this._imgSoruce+"/grid_button.png";
        	}
        	
        	return true;
        },
        
 		
 		setSearch : function( search )	{
 			
 			if( this.waitingResponse ) return false;
 			
 			this.searchKeywordsStr = search;
 			search = search.replace(/[^\w\s]+/g, "");
 			this.searchKeywordsArray = search.split(" ");
 			
 			this.searchSet = true;
 			
 			return true;
 		},
 		
 		clearSearch : function()	{
 			
 			if( this.waitingResponse ) return false;
 			
 			this.searchKeywordsStr  = null;
			this.searchKeywordsArray = null;
			
			this.searchSet = false;
			return true;
 		},
 		
        loadData : function( startIndex , totalCount , genre , where )  {
 				
				var reqTotalCount = totalCount;
				
                 // if waiting on response request cannot be made
                if( this.waitingResponse ) return false;
                
				/* build req object */
                var req = 
				    "_type=contentSearch&format=application%2Fjson"+
				    "&followup=p2pableOffers"+
					"&followup=credits"+
					"&followup=genres"+
					"&followup=ratingsSummaries"+
					"&p2pable=true";
                
                // if searching with keywords - dissable sort/firstletter filers
                if(this.searchSet )	{
                	
                	req += "&keywords="+Vudu.util.URLEncode(this.searchKeywordsStr);
                	this.switchViewType(2);
                	
                }
                else	{
                	// set view type to previous set
                	this.switchViewType(this.previousViewType);
                	this.previousViewType = this.viewType;
                	
                	this.firstLetter = this._alphaSelect.options[this._alphaSelect.selectedIndex].value;
                	
	                // changing slates
	                if(where && where.indexOf("genre_") != -1)	{
	                	// reset the alpha filter
	                	this._alphaSelect.selectedIndex = 0;
	                	this.firstLetter = 0;
	                }
	                // else add the requested filter
	                else if( this.firstLetter && this.firstLetter != 0  )	{
	                	req += "&firstLetter="+this.firstLetter;
	                }
                	
                	this.contentSortBy = this._sortSelect.options[this._sortSelect.selectedIndex].value;
					req += "&sortBy=" + this.contentSortBy;
				}
				
                req += reqTotalCount? "&followup=totalCount" : "" ;
				
				if(this.userId && this.key)	{
					req += "&followup=ratings";
					req+='&userId='+this.userId;
					req+='&sessionKey='+this.key;
				}
				
                req += "&count="+this.pageSize;
                req += "&offset="+ startIndex ;
                
				/* check for genre - more like slate */
                if(genre) { this.contentGenre = genre; }
				
				/* check if special case genre */
				var matchedSpecial = false;
				
				
				/* check if requesting a slate */
				var steCGenre = String(this.contentGenre);
				if(steCGenre && steCGenre.indexOf("slate_") == 0 )	{
				
					var slateId = steCGenre.substring(6);
					req += '&slateId='+slateId;
					matchedSpecial = true;
				}
				/* check if other special case */
				else	{
	                for(var i=0; i < this.specialCaseGenres.length; i++ ) {
	                	if(this.specialCaseGenres[i].val == this.contentGenre ) {
	                		matchedSpecial = true;
	                		req += '&'+this.specialCaseGenres[i].params;
	                	}
	                }
				}
				/* if not special - then requesting a genre */
                if(!matchedSpecial)	{
					req += '&genreId='+this.contentGenre+'&type=program&type=series';
                }
 				
				
				// hide the details
                this.mouseOverDetails.hide(true);
				clearTimeout(this.mouseOverDetailsHideTimer);
                this.mouseOverDetailsHideTimer = 0;
                clearTimeout(this.mouseOverDetailsShowTime);
                this.mouseOverDetailsShowTime = 0;
                
                this.oCallback.argument = { thePaginator : this , offset : startIndex };
				
 				// add custom content-type header
 				YAHOO.util.Connect.setDefaultPostHeader(false);
        		YAHOO.util.Connect.initHeader("Content-Type", "application/x-vudu-url-note");
                YAHOO.util.Connect.asyncRequest('POST', this._directorUrl , this.oCallback , req );
				
                // lock the paginator
                this.setStatus( true );
                // where to show the paginator
                if(where)	{
                	this.loader.show( where , 100 );
                }
                else	{
                	this.loader.show( this._paginatorDiv );
                }
 
                 // return true for request has been made
                return true;
        },
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
 		
        createImg : function( index , movie )        {
 						
			var elContainer = document.createElement('div');
			YAHOO.util.Dom.setStyle(elContainer , 'float' , 'left');
			YAHOO.util.Dom.setStyle(elContainer , 'cursor' , 'pointer');
			
			var homePage = Vudu.util.getMovieHomePage(
			                this._movieHomeRoot,
			                movie.title[0] ,
			                (movie.releaseTime)? movie.releaseTime[0] : null );
			
			homePage += '?lookup=true'+
			            '&contentIndex='+index+
			            '&contentGenre='+this.contentGenre+
			            '&contentSortBy='+this.contentSortBy+
			            '&totalCount='+this.totalRecords+
			            '&offset='+ this.startIndex+
			            '&pageSize='+ this.pageSize+
			            '&viewType='+ this.viewType;
			            

			if( this.firstLetter && this.firstLetter != 0  )	{
				homePage += '&firstLetter='+ this.firstLetter;
			}
			
			if( this.searchSet && this.searchKeywordsStr)	{
				homePage += '&keywords='+this.searchKeywordsStr;
			}
			
			YAHOO.util.Event.addListener(
				elContainer,
				"click",
				function()      {
					document.location.href = homePage;
				}
			);
			
			elContainer.style.width = '107px';
			elContainer.style.height = '144px';
			
			var innerElContainer = document.createElement('div');
			innerElContainer.style.position = 'relative';
			
			var img = document.createElement('img');
			/*
			* Keep track of images being loaded
			*
			* @IMPORTANT
			*  on load should always be set
			*  before the image src is set
			*  because if the image is in the cache
			*  the image will IMMEDIATELY be loaded ... ;)
			*/
			YAHOO.util.Event.addListener  (
			        img ,
			        'load' ,
			        function( e , paginator) {
			                paginator.imageLoaded();
			        }, this , true
			);
			
			img.style.position = 'absolute';
			img.style.width = '97';
			img.style.height = '138';
			img.style.top = "6px";
			img.style.left = "10px";
			img.src = movie.posterUrl[0];
			
			
			innerElContainer.appendChild(img);
	
	
			// check video quality on title for bug.
			var bugType = "sd";
			if( movie.contentVariants && movie.contentVariants[0].contentVariant )	{
				
				for(var i=0; i < movie.contentVariants[0].contentVariant.length; i++ )	{
				
					var cVariant = movie.contentVariants[0].contentVariant[i];
					
					if(cVariant.videoQuality)	{
					 	if(cVariant.videoQuality[0] == 'hdx')	{
					 		bugType = 'hdx';
					 		break;
					 	}
					 	if(cVariant.videoQuality[0] == 'hd')	{
					 		bugType = 'hd';
					 	}
					 }
				}
			
			}
								
			if( bugType != 'sd' )  {
			
			        var hdImg = document.createElement('img');
			
			        if(document.all && document.getElementById && (navigator.appVersion.indexOf("MSIE 7.0") == -1) )        {
			                hdImg.src = this._imgSoruce+'/spacer.png';
			                hdImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this._imgSoruce+"/"+bugType+".png')";
			        }
			        else    {
			                hdImg.src = this._imgSoruce+"/"+bugType+".png";
			        }
			
			        hdImg.style.width = bugType == 'hd' ? '43px':'56px';
			        hdImg.style.height = '19';
			        hdImg.style.position = 'absolute';
			        hdImg.style.top = '128px';
			        hdImg.style.left = ( bugType == 'hd' ? '66px':'53px' );
			        
			        innerElContainer.appendChild(hdImg);
			}
			
			elContainer.appendChild(innerElContainer);
			
			// apend the mouse over show details
			var imageDiv = elContainer;
			var movieObj = movie;
			YAHOO.util.Event.addListener  (
			        elContainer ,
			        'mouseover' ,
			        function( e , paginator) {
			                clearTimeout(paginator.mouseOverDetailsShowTime);
			                paginator.mouseOverDetailsShowTime = 0;
			                
			                var paginatorRef = paginator;
			                
			                paginator.mouseOverDetailsShowTime = setTimeout( function() { paginatorRef.mouseOverDetails.show(imageDiv,movieObj,homePage); } , 1000 );
			        }, this
			);
			
			YAHOO.util.Event.addListener  (
			        elContainer ,
			        'mouseout' ,
			        function( e , paginator) {
			        		
			        		clearTimeout(paginator.mouseOverDetailsShowTime);
			            	paginator.mouseOverDetailsShowTime = 0;
			                
			        		
			                var thisRef = paginator;
			                paginator.mouseOverDetailsHideTimer = setTimeout( function() { thisRef.mouseOverDetails.hide(); }, 500);
			        }, this
			);
			
			
			return elContainer;
        },
 	
 	
 	
 	
 	
 	
 	
 	
 	
 	
 	
		createList : function( index , movie )        {
			var Dom = YAHOO.util.Dom;
			
			var elContainer = document.createElement('div');
			Dom.setStyle(elContainer , 'float' , 'left');
			
			var homePage = Vudu.util.getMovieHomePage(
			                this._movieHomeRoot,
			                movie.title[0] ,
			                (movie.releaseTime)? movie.releaseTime[0] : null );
			
			homePage += '?lookup=true'+
			            '&contentIndex='+index+
			            '&contentGenre='+this.contentGenre+
			            '&contentSortBy='+this.contentSortBy+
			            '&totalCount='+this.totalRecords+
			            '&offset='+ this.startIndex+
			            '&pageSize='+ this.pageSize+
			            '&viewType='+ this.viewType;
			
			if( this.firstLetter && this.firstLetter != 0  )	{
				homePage += '&firstLetter='+ this.firstLetter;
			}
			
			if( this.searchSet && this.searchKeywordsStr)	{
				homePage += '&keywords='+this.searchKeywordsStr;
			}
			
			Dom.setStyle(elContainer , 'width' , '640px');
			Dom.setStyle(elContainer , 'height' , '144px');
			
			var innerElContainer = document.createElement('div');
			Dom.setStyle(innerElContainer , 'width' , '107px');
			Dom.setStyle(innerElContainer , 'height' , '144px');
			Dom.setStyle(innerElContainer , 'position' , 'relative');
			Dom.setStyle(innerElContainer , 'float' , 'left');
			
			var img = document.createElement('img');
			/*
			* Keep track of images being loaded
			*
			* @IMPORTANT
			*  on load should always be set
			*  before the image src is set
			*  because if the image is in the cache
			*  the image will IMMEDIATELY be loaded ... ;)
			*/
			YAHOO.util.Event.addListener  (
			        img ,
			        'load' ,
			        function( e , paginator) {
			                paginator.imageLoaded();
			        }, this , true
			);
			
			img.style.position = 'absolute';
			img.style.width = '97';
			img.style.height = '138';
			img.style.top = "6px";
			img.style.left = "10px";
			img.src = movie.posterUrl[0];
			
			
			innerElContainer.appendChild(img);
	
	
			// check video quality on title for bug.
			var bugType = "sd";
			if( movie.contentVariants && movie.contentVariants[0].contentVariant )	{
				
				for(var i=0; i < movie.contentVariants[0].contentVariant.length; i++ )	{
				
					var cVariant = movie.contentVariants[0].contentVariant[i];
					
					if(cVariant.videoQuality)	{
					 	if(cVariant.videoQuality[0] == 'hdx')	{
					 		bugType = 'hdx';
					 		break;
					 	}
					 	if(cVariant.videoQuality[0] == 'hd')	{
					 		bugType = 'hd';
					 	}
					 }
				}
			
			}
								
			if( bugType != 'sd' )  {
			
			        var hdImg = document.createElement('img');
			
			        if(document.all && document.getElementById && (navigator.appVersion.indexOf("MSIE 7.0") == -1) )        {
			                hdImg.src = this._imgSoruce+'/spacer.png';
			                hdImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this._imgSoruce+"/"+bugType+".png')";
			        }
			        else    {
			                hdImg.src = this._imgSoruce+"/"+bugType+".png";
			        }
			
			        hdImg.style.width = bugType == 'hd' ? '43px':'56px';
			        hdImg.style.height = '19';
			        hdImg.style.position = 'absolute';
			        hdImg.style.top = '128px';
			        hdImg.style.left = ( bugType == 'hd' ? '66px':'53px' );
			        
			        innerElContainer.appendChild(hdImg);
			}
			Dom.setStyle(innerElContainer , 'cursor' , 'pointer');
			YAHOO.util.Event.addListener(
				innerElContainer,
				"click",
				function()      {
					document.location.href = homePage;
				}
			);
			elContainer.appendChild(innerElContainer);
			
			
			var textElContainer = document.createElement('div');
			Dom.setStyle(textElContainer , 'position' , 'relative');
			Dom.setStyle(textElContainer , 'width' , '530px');
			Dom.setStyle(textElContainer , 'overflow' , 'hidden');
			Dom.setStyle(textElContainer , 'height' , '138px');
			Dom.setStyle(textElContainer , 'margin-top' , '6px');
			Dom.setStyle(textElContainer , 'float' , 'left');
			Dom.setStyle(textElContainer , 'background-color' , '#121212');
			
			// movie title span
			var titleDiv = document.createElement('span');
			Dom.setStyle(titleDiv , 'position' , 'relative');
			Dom.setStyle(titleDiv , 'float' , 'left');
			Dom.setStyle(titleDiv , 'padding-left' , '20px');
			Dom.setStyle(titleDiv , 'margin-top' , '3px');
			Dom.setStyle(titleDiv , 'width' , '500px');
			Dom.setStyle(titleDiv , 'height' , '30px');
			Dom.setStyle(titleDiv , 'font-family' , 'arial,helvetica,clean,sans-serif');
			Dom.setStyle(titleDiv , 'color' , '#FF9900');
			Dom.setStyle(titleDiv , 'font-size' , '10pt');
			Dom.setStyle(titleDiv , 'font-weight' , 'bold');
			titleDiv.innerHTML = movie.title[0];
			Dom.setStyle(titleDiv , 'cursor' , 'pointer');
			YAHOO.util.Event.addListener(
				titleDiv,
				"click",
				function()      {
					document.location.href = homePage;
				}
			);
			textElContainer.appendChild(titleDiv);
			
			
			// Pricing
			var pricingDiv = document.createElement('div');
			Dom.setStyle(pricingDiv , 'position' , 'relative');
			Dom.setStyle(pricingDiv , 'float' , 'left');
			Dom.setStyle(pricingDiv , 'width' , '500px');
			Dom.setStyle(pricingDiv , 'height' , '25px');
			Dom.setStyle(pricingDiv , 'cursor' , 'pointer');
			YAHOO.util.Event.addListener(
				pricingDiv,
				"click",
				function()      {
					document.location.href = homePage;
				}
			);
			textElContainer.appendChild(pricingDiv);
			
			
			var ownSpan = document.createElement('span');
			var rentSpan = document.createElement('span');
			Dom.setStyle( [ ownSpan, rentSpan ] , 'float' , 'right');
			Dom.setStyle( [ ownSpan, rentSpan ] , 'padding-right' , '15px');
			Dom.setStyle( [ ownSpan, rentSpan ] , 'color' , '#CCCCCC');
			Dom.setStyle( [ ownSpan, rentSpan ] , 'font-family:arial' , 'arial,helvetica,clean,sans-serif');
			Dom.setStyle( [ ownSpan, rentSpan ] , 'font-size' , '13px');
			Dom.setStyle( [ ownSpan, rentSpan ] , 'font-weight' , 'bold');
			// append spans to top text div 
			pricingDiv.appendChild(rentSpan);
			pricingDiv.appendChild(ownSpan);
			// Calculate PRICING
			var lowOwn = 0; var lowRent = 0;
			var multiOwn = false; var multiRent = false;
			var ownAvailableOn = null; var rentAvailableOn = null;
			// loop movie object
			if( movie.contentVariants && movie.contentVariants[0].contentVariant )	{

				for(var i=0; i < movie.contentVariants[0].contentVariant.length; i++ )	{
					
					var cVariant = movie.contentVariants[0].contentVariant[i];
						
					if(cVariant.offers && cVariant.offers[0].offer )      {
						for(var j=0; j < cVariant.offers[0].offer.length; j++)     {
						
							var type = cVariant.offers[0].offer[j].offerType;
							var price = ( Math.round( cVariant.offers[0].offer[j].price*100 ) / 100);
							var availableOn = cVariant.offers[0].offer[j].startTime;
							
							if(type == 'pto')	{
								if( lowOwn == 0 )	{
									lowOwn  = price;
									ownAvailableOn = availableOn;
								}
								else {
									multiOwn = true;
									if(price < lowOwn && availableOn == null ) {
										lowOwn = price;
										ownAvailableOn = null;
									}
								}
							}
							else if(type == 'ptr')	{
								if( lowRent == 0 )	{
									lowRent = price;
									rentAvailableOn = availableOn;
								}
								else {
									multiRent = true;
									if(price < lowRent && availableOn == null ) {
										lowRent = price;
										rentAvailableOn = null;
									}
								}
							}
						} // end for each offer
					}
				} // end for each contentVarianr
			}
			if(lowOwn > 0 )	{
				// if is coming soon
				if(ownAvailableOn)	{
					ownSpan.innerHTML = 'Own on '+Vudu.util.formateDate(ownAvailableOn);
				}
				else	{
					ownSpan.innerHTML = 'Own '+(multiOwn? 'from ': 'for ')+'$'+  lowOwn;
				}
			}
			if(lowRent > 0 )	{
				// if is coming soon
				if(rentAvailableOn)	{
					rentSpan.innerHTML = 'Rent on '+Vudu.util.formateDate(rentAvailableOn);
				}
				else	{	
					rentSpan.innerHTML = 'Rent '+(multiRent? 'from ': 'for ')+'$'+  lowRent;
				}
			}
			
			// rating
			var ratingContainer = document.createElement('div');
			Dom.setStyle(ratingContainer , 'width' , '500px');
			Dom.setStyle(ratingContainer , 'height' , '32px');
			Dom.setStyle(ratingContainer , 'position' , 'relative');
			Dom.setStyle(ratingContainer , 'float' , 'left');
			Dom.setStyle(ratingContainer , 'padding-left' , '20px');
			textElContainer.appendChild(ratingContainer);
			
			var ratingDiv = document.createElement('div');
			Dom.setStyle(ratingDiv , 'position' , 'relative');
			Dom.setStyle(ratingDiv , 'float' , 'left');
			Dom.setStyle(ratingDiv , 'width' , '500px');
			Dom.setStyle(ratingDiv , 'height' , '30px');
			
			var communityRating = "";
			if(movie.ratingsSummaries && movie.ratingsSummaries[0].ratingsSummary
				&& movie.ratingsSummaries[0].ratingsSummary[0].starRatingsAvg[0] > 0 )	{
				communityRating = movie.ratingsSummaries[0].ratingsSummary[0].starRatingsAvg[0];
			}
			var userRating = "";
			if(movie.ratings && movie.ratings[0].rating
				&& movie.ratings[0].rating[0].starRating[0] > 0 )	{
				userRating = movie.ratings[0].rating[0].starRating[0];
			}
			// init the rating widget
        	var ratingWidget = new Vudu.widget.Rating(
        				ratingDiv ,
        				this._imgSoruce, /* image resource */
        				this._directorUrl, /* director URL */
        				"", /*  critics ratings */
        				communityRating, /* community ratings */
        				movie.contentId[0], /* contentId */
        				this.key,
        				this.userId,
        				"", /* login path */        				
        				userRating, /* users rating */
        				"compaqMode"
        	);
			ratingContainer.appendChild(ratingDiv);
			
			var descDiv = document.createElement('div');
			Dom.setStyle(descDiv , 'position' , 'relative');
			Dom.setStyle(descDiv , 'float' , 'left');
			Dom.setStyle(descDiv , 'overflow' , 'hidden');
			Dom.setStyle(descDiv , 'padding-left' , '20px');
			Dom.setStyle(descDiv , 'height' , '45px');
			Dom.setStyle(descDiv , 'width' , '500px');
			Dom.setStyle(descDiv , 'font-family' , 'arial,helvetica,clean,sans-serif');
			Dom.setStyle(descDiv , 'color' , '#CCCCCC');
			Dom.setStyle(descDiv , 'font-size' , '12px');
			
			// if with search keyords highlight as well ... 
			if(this.searchSet)	{
				descDiv.innerHTML = Vudu.util.TextWrapWithHighlight( movie.description[0], this.searchKeywordsArray  , 200 , ' ' , '...' );
			}
			else	{
				descDiv.innerHTML = Vudu.util.TextWrap( movie.description[0], 200 , ' ' , '...' );
			}
			Dom.setStyle(descDiv , 'cursor' , 'pointer');
			YAHOO.util.Event.addListener(
				descDiv,
				"click",
				function()      {
					document.location.href = homePage;
				}
			);
			textElContainer.appendChild(descDiv);
			
			elContainer.appendChild(textElContainer);
			
			return elContainer;	
        },
        
        
        
        
        
        
        imageLoaded : function()        {
 
                this._imagesLoaded++;
 
                if(this._imagesLoaded >= this.recordsCount )    {
                        this.showContent();
                }
        },
 
        setStatus : function(loading)   {
                if(loading)     {
                        // put lock
                        this.waitingResponse = true;
                        this._sortSelect.disabled = true;
                        this._alphaSelect.disabled = true;
                        
                }
                else    {
                        // rempve lock
                        this.waitingResponse = false;
                        this.loader.hide();
                        // re-enable sort & filter if not in search
                        if(!this.searchSet)	{
                        	this._sortSelect.disabled = false;
                        	this._alphaSelect.disabled = false;
                        }
                }
        },
 
 
        getNextPage : function()        {
                return (this.startIndex + this.recordsCount < this.totalRecords )? this.startIndex + this.recordsCount : null;
        },
 
 
 
        getPreviousPage : function()    {
 
                var result = this.startIndex - this.pageSize;
                return result > 0 ? result : 0;
        },
 
 
        update : function(sIndex, rCount, tRecords )    {
                // this is for animation direction
                this.direction = tRecords? 0 : this.startIndex > sIndex ? -1 : 1;
 
                this.startIndex = sIndex;
                this.recordsCount = rCount;
                if(tRecords != null) this.totalRecords = tRecords;
 
                this.statusPage.update();
                this.firstPageImg.update();
                this.previousPageImg.update();
                this.nextPageImg.update();
        }
};
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Vudu.widget.Paginator.CurrentPageStatusReport = function (p) {
        this.paginator = p;
};
 
Vudu.widget.Paginator.CurrentPageStatusReport.prototype = {
        span : null,
        render : function () {
                this.span = document.createElement('span');
                this.update();
                return this.span;
        },
        update : function () {
                var p = this.paginator;
                
                var pages = Math.floor(p.totalRecords / p.pageSize) + (p.totalRecords % p.pageSize != 0 ? 1 : 0);
                var currentPage = p.startIndex /  p.pageSize + 1;
                
                if(!pages || isNaN(pages))	{
                	pages = 0;
                }
                if(!pages || !currentPage || isNaN(currentPage))	{
                	currentPage = 0;
                }
                
                this.span.innerHTML = 'Page '+currentPage + ' of '+pages;
        }
};
 
Vudu.widget.Paginator.NextPageImage = function (p) {
        this.paginator = p;
};
 
Vudu.widget.Paginator.NextPageImage.prototype = {
 
        current         :null,
 
        full    : null,
 
        empty   : null,
 
        render : function () {
 
                var p     = this.paginator;
 
                this.full = document.createElement('img');
                this.full.height = '16';
                this.full.width = '8';
                this.full.style.cursor = 'pointer';
                this.full.src = p._imgSoruce+'/arrow_norm_right.png';
                YAHOO.util.Event.on(
                        this.full,'mouseover',
                        function(e)     {
                                this.full.src = p._imgSoruce+'/arrow_over_right.png';
                        },
                        this,
                        true
                );
 
                YAHOO.util.Event.on(
                        this.full,'mouseout',
                        function(e)     {
                                this.full.src = p._imgSoruce+'/arrow_norm_right.png';
                        },
                        this,
                        true
                );
 
                YAHOO.util.Event.on(this.full,'click',this.onClick,this,true);
 
                this.empty = document.createElement('img');
                this.empty.height = '16';
                this.empty.width = '8';
                this.empty.src = p._imgSoruce+'/arrow_dis_right.png';
 
 
                this.current = p.getNextPage()  ? this.full : this.empty;
 
                return this.current;
        },
 
        update : function () {
 
                var par = this.current ? this.current.parentNode : null;
                if (this.paginator.getNextPage() ) {
                        if (par && this.current === this.empty) {
                                // always revert to default image - because mouseout dosent trigger on switch case
                                this.full.src = this.paginator._imgSoruce+'/arrow_norm_right.png';
 
                                par.replaceChild(this.full,this.current);
                                this.current = this.full;
                        }
                } else {
                        if (par && this.current === this.full) {
                                par.replaceChild(this.empty,this.current);
                                this.current = this.empty;
                        }
                }
        },
 
        onClick : function (e) {
                this.paginator.loadData(this.paginator.startIndex + this.paginator.recordsCount );
        }
};
 
Vudu.widget.Paginator.PreviousPageImage = function (p) {
        this.paginator = p;
};
 
Vudu.widget.Paginator.PreviousPageImage.prototype = {
 
        current         :null,
 
        full    : null,
 
        empty   : null,
 
        render : function () {
 
                var p     = this.paginator;
 
                this.full = document.createElement('img');
                this.full.height = '16';
                this.full.width = '8';
                this.full.style.cursor = 'pointer';
                this.full.src = p._imgSoruce+'/arrow_norm_left.png';
                YAHOO.util.Event.on(
                        this.full,'mouseover',
                        function(e)     {
                                this.full.src = p._imgSoruce+'/arrow_over_left.png';
                        },
                        this,
                        true
                );
                YAHOO.util.Event.on(
                        this.full,'mouseout',
                        function(e)     {
                                this.full.src = p._imgSoruce+'/arrow_norm_left.png';
                        },
                        this,
                        true
                );
                YAHOO.util.Event.on(this.full,'click',this.onClick,this,true);
 
 
                this.empty = document.createElement('img');
                this.empty.height = '16';
                this.empty.width = '8';
                this.empty.src = p._imgSoruce+'/arrow_dis_left.png';
 
 
                this.current = p.startIndex > 0 ? this.full : this.empty;
                return this.current;
        },
 
        update : function (e) {
                if (e && e.prevValue === e.newValue) {
                        return;
                }
                var par = this.current ? this.current.parentNode : null;
                if (this.paginator.startIndex < 1) {
                        if (par && this.current === this.full) {
                                // always revert to default image - because mouseout dosent trigger on switch case
                                this.full.src = this.paginator._imgSoruce+'/arrow_norm_left.png';
 
                                par.replaceChild(this.empty,this.current);
                                this.current = this.empty;
                        }
                } else {
                        if (par && this.current === this.empty) {
                                par.replaceChild(this.full,this.current);
                                this.current = this.full;
                        }
                }
        },
 
        onClick : function (e) {
                this.paginator.loadData( this.paginator.getPreviousPage() );
        }
};
 
Vudu.widget.Paginator.FirstPageImage = function (p) {
        this.paginator = p;
};
 
Vudu.widget.Paginator.FirstPageImage.prototype = {
 
        current         :null,
 
        full    : null,
 
        empty   : null,
 
        render : function () {
 
                var p     = this.paginator;
 
                this.full = document.createElement('img');
                this.full.height = '16';
                this.full.width = '14';
                this.full.style.cursor = 'pointer';
                this.full.src = p._imgSoruce+'/arrow_dbl_norm_left.png';
                YAHOO.util.Event.on(
                        this.full,'mouseover',
                        function(e)     {
                                this.full.src = p._imgSoruce+'/arrow_dbl_over_left.png';
                        },
                        this,
                        true
                );
                YAHOO.util.Event.on(
                        this.full,'mouseout',
                        function(e)     {
                                this.full.src = p._imgSoruce+'/arrow_dbl_norm_left.png';
                        },
                        this,
                        true
                );
                YAHOO.util.Event.on(this.full,'click',this.onClick,this,true);
 
 
                this.empty = document.createElement('img');
                this.empty.height = '16';
                this.empty.width = '14';
                this.empty.src = p._imgSoruce+'/arrow_dbl_dis_left.png';
 
 
                this.current = p.startIndex > 0 ? this.full : this.empty;
                return this.current;
        },
 
        update : function (e) {
                if (e && e.prevValue === e.newValue) {
                        return;
                }
                var par = this.current ? this.current.parentNode : null;
                if (this.paginator.startIndex < 1) {
                        if (par && this.current === this.full) {
                                // always revert to default image - because mouseout dosent trigger on switch case
                                this.full.src = this.paginator._imgSoruce+'/arrow_dbl_norm_left.png';
 
                                par.replaceChild(this.empty,this.current);
                                this.current = this.empty;
                        }
                } else {
                        if (par && this.current === this.empty) {
                                par.replaceChild(this.full,this.current);
                                this.current = this.full;
                        }
                }
        },
 
        onClick : function (e) {
                this.paginator.loadData(0);
        }
};
 
 
 
Vudu.widget.Paginator.LoadingDiv = function(paginator)     {
 
                this.paginator = paginator;
        this.loadingDiv = document.createElement('div');
        document.body.appendChild(this.loadingDiv);
 
        // style the div
        this.loadingDiv.setAttribute( 'id', 'vudu-loading-div');
        this.loadingDiv.style.position = 'absolute';
        this.loadingDiv.style.overflow = 'hidden';
        this.loadingDiv.style.width  = '30px';
        this.loadingDiv.style.height = '20px';
        this.loadingDiv.style.top = '-30px';
        this.loadingDiv.style.left = '-30px';
        this.loadingDiv.style.zIndex = '100';
 
 
        // add the image
        this.slidingImagesC = 0;
 
        this.slidingImages = document.createElement('img');
 
        if(document.all && document.getElementById && (navigator.appVersion.indexOf("MSIE 7.0") == -1) )        {
                this.slidingImages.src = this.paginator._imgSoruce+'/spacer.png';
 
                this.slidingImages.style.filter =
                        "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.paginator._imgSoruce+"/reel_28c.png' )";
        }
        else    {
                this.slidingImages.src = this.paginator._imgSoruce+'/reel_28c.png';
        }
        this.slidingImages.style.width = '896';
        this.slidingImages.style.height = '20';
                this.slidingImages.style.position = 'relative';
        this.slidingImages.style.top = '0px';
        this.slidingImages.style.left = '0px';
 
        this.loadingDiv.appendChild(this.slidingImages);
 
 
        this.showingMethd = null;
 
        this.show = function( cDiv , left )    {
 			
			var region = YAHOO.util.Dom.getRegion(cDiv);
			 
			YAHOO.util.Dom.setStyle(this.loadingDiv , 'top' , region.top);
			YAHOO.util.Dom.setStyle(this.loadingDiv , 'left' , region.left + (left? left : 0));
			 
			var thisRef = this;
			this.showingMethd = setTimeout( function() { thisRef._showNext() } , 100 ); 
        }
        
        this._showNext = function()     {
 
                this.slidingImagesC += 28 ;
                if(this.slidingImagesC > 840 /* 30 * 28 */ )   {
                        this.slidingImagesC = 0;
                }
 
                this.slidingImages.style.left = '-' + this.slidingImagesC + 'px';
 
                var thisRef = this;
                this.showingMethd = setTimeout( function() { thisRef._showNext() } , 100 );
        };
 
 
        this.hide= function()   {
 
                clearTimeout(this.showingMethd);
                this.slidingImagesC = 0;
 
                YAHOO.util.Dom.setStyle(this.loadingDiv , 'top' , '-30px' );
                YAHOO.util.Dom.setStyle(this.loadingDiv , 'left' , '-30px' );
 
                this.slidingImages.style.left = '0px';
        };
}