//
        // change page
        //
        function changePage(index)
        {
            renderPage(data.items, config.pageSize, index, data.listStyle);
            renderPager(index, data.items.length, config.pageSize, config.pagerSize);
        }

        //
        // render playlist grid
        //
        function renderPage(items, size, page, listStyle)
        {
            var container = $(config.playListULid);
            
            if (listStyle) {
	            $(config.playListULid).removeClass("matchClipList");
	            $(config.playListULid).removeClass("wideClipList");
	            $(config.playListULid).removeClass("boxClipList");
	            $(config.playListULid).addClass(listStyle);
            }

            //cancel all playlist animations before emptying container
            for(i=0;i<fxArray.length;i++)
            {
            	$clear(fxArray[i].timer);
            }

            for(i=0;i<fxArray.length;i++)
            {
            	fxArray[i].fx.cancel();
            }
            
            container.empty();
            
            var start = size * page;
            var end = size * (page + 1);
            end = end.limit(0, items.length);
            
            fxChain = new Chain();
			var boxlink = "";
			var hasClip = true;
			
            for(i=start; i < end; i++)
            {
          		if (items[i].link) {
            		if (items[i].clipId) {
	            		boxlink = "javascript:player.play(" + items[i].clipId + ", '" + items[i].clipId + "', '" + items[i].formats[0] + "', " + items[i].profiles[0] + ");updateInfo(" + items[i].clipId + ");load('"+items[i].link+"')";
	            	}
	            	else {
		           		boxlink = "javascript:load('"+items[i].link+"')";
	            	}
	            	var hasClip = true;
            	}
            	else if (items[i].url) {
                    boxlink = "javascript:player.play(" + items[i].clipId + ", '"+items[i].url+"', '" + items[i].formats[0] + "', " + items[i].profiles[0] + ",{name:'"+items[i].listingName+"'});updateInfo(" + items[i].clipId + ");";
	            	var hasClip = true;
	            }
            	else if (items[i].clipId) {
            		boxlink = "javascript:player.play(" + items[i].clipId + ", '" + items[i].clipId + "', '" + items[i].formats[0] + "', " + items[i].profiles[0] + ");updateInfo(" + items[i].clipId + ");";
            		var hasClip = true;
            	}
				else {
					hasClip = false;
				}
				
                var el = new Element("li", {
                    "id" : "clip" + items[i].clipId,
                    "class": "clipHolder",
                    "styles": {
                        opacity : 0                   
                    }
                });
                
                
                if (items[i].imageId) {
	                var image = new Element("img", {
	                    "src" : config.imgBasePath + items[i].imageId + "080.jpg",
	                    "alt" : items[i].title + "\n" + items[i].descr
	                });

					if (hasClip) {
						var aa = new Element("a", {
		                    "href" : boxlink 
		                }).inject(el);
		                image.inject(aa);
	                }
	                else {
		                image.inject(el);
	                }
                }


				if (hasClip) {
					new Element("a", {
	                    "href" : boxlink ,
	                    "class" : "clipTitle", 
	                    "html" : items[i].title
	                }).inject(el);
                }
                else {
					new Element("span", {
	                    "class" : "clipTitle", 
	                    "html" : items[i].title
	                }).inject(el);
                }


	            if (listStyle == "wideClipList") {
		            new Element("p", {
		                "class" : "clipDescr",
		                "html" : items[i].descr
		            }).inject(el);
				}
				
				

				if (items[i].duration && items[i].duration != "NaN" && items[i].duration != "") {
					new Element("p", {
	                    "class" : "clipDuration",
	                    "html" : "Duration: " + getDurationString(items[i].duration)
	                }).inject(el);
				}
				if (items[i].startTime && items[i].startTime != "NaN" && items[i].startTime != "") {
					new Element("p", {
	                    "class" : "clipDuration",
	                    "html" : items[i].startTime
	                }).inject(el);
				}

                if (items[i].daysLeft) {
	                new Element("p", {
	                    "class" : "clipDaysLeft",
	                    "html" : getDaysLeftString(items[i].daysLeft)
	                }).inject(el);
                }
                if (items[i].geoblock) {
	                new Element("p", {
	                    "class" : "clipGeoblock",
	                    "html" : "<span class=\"red\">"+items[i].geoblock+"</span>"
	                }).inject(el);
                }
	            if (hasClip && listStyle == "wideClipList") {
	                var aaa = new Element("a", {
	                    "href" : boxlink ,
	                    "class" : "playIcon"
	                }).inject(el);
	                
		            new Element("img", {
		                "class" : "playIcon",
		                "alt" : (items[i].linkType ? items[i].linkType : ""),
		                "src" : (items[i].linkType ? "/sport/soccer/euro2008/images/" + items[i].linkType + "_icon.gif": "")
		            }).inject(aaa);
				}

                el.inject(container); 
                
				fx = el.effects({duration: 300});

                f = function(){
	                    this.start({opacity:[0,.99]});
	                }.delay(100 * (i - start), fx)
	                
	            fxArray.push({"fx": fx, "timer" : f});
		        player.highlight($(player.activeItem), $('playlist')); 
            }
       }
        
        //
        // render Match Page
        //
        function renderMatchPage(item)
        {
        	updateInfo(item.clipId);
            var container = $(config.playListULid);
            
            $(config.playListULid).removeClass("wideClipList");
            $(config.playListULid).removeClass("boxClipList");
            $(config.playListULid).addClass("matchClipList");

            $('progTitle').innerHTML="Live Match";
            
            //cancel all playlist animations before emptying container
            for(i=0;i<fxArray.length;i++)
            {
            	$clear(fxArray[i].timer);
            }

            for(i=0;i<fxArray.length;i++)
            {
            	fxArray[i].fx.cancel();
            }
            
            container.empty();
            
            var start = 0;
            var end = 1;
            end = end.limit(0, 1);
            
            fxChain = new Chain();

            var top = new Element("li", {
                "class": "matchTopPanel",
                "styles": {
                    opacity : 0                   
                }
            });
            
            new Element("img", {
                "src" : "images/" + item.team1 + "_crest.jpg",
                "class" : "crest1",
                "alt" : item.team1
            }).inject(top);

            new Element("p", {
                "class" : "clipTitle",
                "html" : item.title
            }).inject(top);

            new Element("img", {
                "src" : "images/" + item.team2 + "_crest.jpg",
                "class" : "crest2",
                "alt" : item.team2
            }).inject(top);
            
            top.inject(container); 
			fx = top.effects({duration: 300});
            f = function(){
                    this.start({opacity:[0,.99]});
                }.delay(100 * 0, fx)
            fxArray.push({"fx": fx, "timer" : f});
            

			var desc =new Element("li", {
                "class" : "matchDescription",
                "html"  : item.descr,
                "styles": {
                    opacity : 0                   
                }
            }).inject(container);
			fx = desc.effects({duration: 300});
            f = function(){
                    this.start({opacity:[0,.99]});
                }.delay(100 * 1, fx)
            fxArray.push({"fx": fx, "timer" : f});

            var link1 = new Element("li", {
                "id" : "clip1",
                "class": "clipHolder video",
                "styles": {
                    opacity : 0                   
                }
            });
            
            new Element("a", {
                "href" : "javascript:player.play(1, '" + item.url + "', 'real', 220,{name:'" + item.listingName + "'});",
                "class" : "clipTitle", 
                "html" : "<strong>Watch LIVE</strong> (Ireland Only)"
            }).inject(link1);
            link1.inject(container); 
			fx = link1.effects({duration: 300});
            f = function(){
                    this.start({opacity:[0,.99]});
                }.delay(100 * 2, fx)
            fxArray.push({"fx": fx, "timer" : f});

            var link2 = new Element("li", {
                "id" : "clip2",
                "class": "clipHolder audio",
                "styles": {
                    opacity : 0                   
                }
            });
            
            new Element("a", {
                "href" : "javascript:player.play(2, 'http://dynamic.rte.ie/av/live/radio/radio1.smil', 'real', 209);",
                "class" : "clipTitle", 
                "html" : "<strong>Listen:</strong> RT&Eacute; Radio 1 Live Updates (Worldwide)"
            }).inject(link2);
            link2.inject(container); 
			fx = link2.effects({duration: 300});
            f = function(){
                    this.start({opacity:[0,.99]});
                }.delay(100 * 3, fx)
            fxArray.push({"fx": fx, "timer" : f});
            
            if (item.title != "Laois v Wicklow" ) {
	            var link3 = new Element("li", {
	                "id" : "clip3",
	                "class": "clipHolder audio",
	                "styles": {
	                    opacity : 0                   
	                }
	            });
	            new Element("a", {
	                "href" : "javascript:player.play(3, 'http://dynamic.rte.ie/av/live/radio/rnag.smil', 'real', 209);",
	                "class" : "clipTitle", 
	                "html" : "<strong>&Eacute;ist:</strong> RT&Eacute; R na G - Sp&oacute;rt an Lae (Worldwide)"
	            }).inject(link3);
	            link3.inject(container); 
				fx = link3.effects({duration: 300});
	            f = function(){
	                    this.start({opacity:[0,.99]});
	                }.delay(100 * 4, fx)
	            fxArray.push({"fx": fx, "timer" : f});
            }
            
	        player.highlight($(player.activeItem), $('playlist'));
         	autostartfirstclip ();
            
       }




        //
        // create pager (UL)
        //
        function renderPager(currentPage, collectionSize, pageSize, pagerSize)
        {
            var container = $(config.pagerULid)
            container.empty();
            
            var lBound = 0;
            var uBound = pagerSize.limit(0, ((collectionSize + pageSize - 1)/pageSize).floor());
            
            if(currentPage >= ((pagerSize-1)/2).round())
            {
                lBound = (currentPage - ((pagerSize-1)/2).round()).limit(0, currentPage - 1);
                uBound = (lBound + pagerSize).limit(lBound, ((collectionSize + pageSize - 1)/pageSize).floor());
                lBound2 = (uBound - pagerSize).limit(0, lBound);
                lBound = lBound2;
            }
            
            if (uBound > 1) {
	            for(i=lBound;i<uBound;i++)
	            {
	                new Element("li", {
	                    "id"   : "page" + i,
	                    "html" : (i != currentPage ? ("<a href=\"javascript:changePage(" + i + ")\">" + (i + 1) + "</a>") : ("<a class=\"sel\">" + (i + 1) + "</a>"))
	                }).inject(container, "top");     
	            }
	        }
        }

        //
        // format days string
        //
        function getDaysLeftString(days)
        {
            if(days > 1)
                return days + " days left";
            else
                return "<span class=\"red\">Last chance</span>";
                
        }

        //
        // format duration string
        //
        function getDurationString(sec)
        {
            var m = Math.floor(sec/60);
            var s = Math.round(sec - (m * 60));
            
            return m + ":" + (s > 9 ? s : (s > 0 ? ("0" + s) : "00"));
        }

        //
        // write info section below the player
        //
        function updateInfo(clipId)
        {
        	var index = -1;
        	for(i=0, found=false; i<data.items.length; i++){
        		if (data.items[i].clipId == clipId && found == false)	{
        			found = true;
        			index=i;
        		}
        	}

        	if (index == -1) {return}
        	
            var el = new Element("div", {
                "styles": {
                    width : "100%",
                    opacity : 0
                }
            });

            if (data.items[index].imageId) {
	            new Element("img", {
	                "src" : config.imgBasePath + data.items[index].imageId + "080.jpg",
	                "alt" : data.items[index].title + "\n" + data.items[index].descr
	            }).inject(el);
            }

            new Element("h4", {
                "class" : "clipTitle", 
                "html" : data.items[index].title
            }).inject(el);

           new Element("p", {
                "class" : "clipDescr",
                "html" : data.items[index].descr
            }).inject(el);

/*             if (data.items[index].duration) {
            	new Element("p", {
	                "class" : "clipDuration",
	                "html" : "Duration: " + getDurationString(data.items[index].duration)
	            }).inject(el);
			} */

 /*            new Element("p", {
                "class" : "clipDaysLeft",
                "html" : getDaysLeftString(data.items[index].daysLeft)
            }).inject(el); */
            
            if(infoFx) infoFx.cancel();
            el.inject($(config.infoContainer).empty());
            
	        if (Browser.Engine.trident && Browser.Platform.win) 
	        {	
	          	infoFx = el.effects({duration: 300}).start({opacity:[0,1]});
	        } else {
	          	infoFx = el.effects({duration: 300}).start({opacity:[0,.99]});
	        }
		}
        //
        // load new page with loading message
        //        
        function setTabMenu(highlight)
        {
			$("live").removeClass("on");
			$("features").removeClass("on");
			$("apresmatch").removeClass("on");
			$(highlight).addClass("on");
		}

        //
        // load new page with loading message
        //        
        function load(x)
        {
            var el = $('playlist');

            if(!$('ajaxLoader'))
            {
                var tmp = new Element("div", {
                    "id"     : "ajaxLoader",
                    "styles" : {
                                "position" : "absolute",
                                "opacity"  : "0",
                                "background-color" : "#000",                                
                                "height"   : el.getCoordinates().height,
                                "width"    : el.getCoordinates().width,
                                "top"      : el.getCoordinates().top,
                                "left"     : el.getCoordinates().left
                    }
                }).inject(el);


                new Element("img", {
                    "src"    : "images/loading.gif",
                    "styles" : {
                                "position" : "absolute",
                                "top"      : el.getCoordinates().height / 2 - 100,
                                "left"     : el.getCoordinates().width / 2 - 50
                    }
                }).inject(tmp);
                
                window.playlistFx = tmp.effects({duration: 300}).start({opacity:[0,0.6]});
            }
            else
            {
                window.playlistFx = $('ajaxLoader').setStyles({
                    "display"  : "block",
                    "opacity"  : "0"
                  }).effects({duration: 300}).start({opacity:[0,0.6]});
            }
            
            //reload data object with json
            var json = new Request.JSON({
                   url        : "json/" + x + ".js",
                   method     : "get",
                   secure     : false, 
                   async      : false,
                   onComplete : function(obj, text){

                                    data = obj;
                                    $('ajaxLoader').setStyle("display", "none");
                                    currentPage = 0;
									$('progTitle').innerHTML="<span class='ProgTitleText'>"+data.title+"</span>";
									
									if (x.lastIndexOf("_") > 0) {
										var backFx;
										if(backFx) backFx.cancel();
										backlink = x.substring(0, x.lastIndexOf("_"));
										el = $('progTitle');
							            new Element("span", {
							                "class" : "backbutton",
							                "id": "backbutton",
							                "html" : "<a href='javascript:load(\""+backlink+"\")'><img src='/sport/soccer/euro2008/images/player_back_button.gif'/></a>",
							                "styles" : {
							                	opacity : 0
							                }
							            }).inject(el);
							            backFx = $('backbutton').effects({duration: 300}).start({opacity:[0,.99]});
									}

									setTabMenu(data.tabmenu);
									if (data.listStyle == "matchClipList") {
	                                    renderMatchPage(data.items[0]);
	                                    $(config.pagerULid).empty();
									}
									else if (data.listStyle == "wideClipList") {
	                                    if (data.items.length > config.pageSize) {
		                                    renderPage(data.items, config.pageSize, 0, data.listStyle);
		                                    $(config.playListULid).setStyle("height", "424px");
	                                    	renderPager(0, data.items.length, config.pageSize, config.pagerSize);
	                                    }
	                                    else {
		                                    renderPage(data.items, data.items.length, 0, data.listStyle);
		                                    $(config.playListULid).setStyle("height", "445px");
	                                    	$(config.pagerULid).empty();
	                                    }
									}
									else {
	                                    renderPage(data.items, config.pageSize, 0, data.listStyle);
	                                    renderPager(0, data.items.length, config.pageSize, config.pagerSize);
	                                }
                                }
            }).send();
        }




        //
        // Changes tab and starts clip from paramaters in URL
        //   
	    function autostartfromurl () 
	    {
	    	
	        if (document && document.location.search && document.location.search.length > 0)
	        {
	            var params = location.search.substr(1).split(",");
	            load(params[0]);
	            
	            if(params.length >= 5)
	            {
	            	params[3] = params[3]==0 ? "real" : params[3];
	            	params[3] = params[3]==1 ? "wmp" : params[3];
	                 try
	                 {
	                    eval("player.play(" + params[1] + ",'" + params[2] + "','" + params[3] + "'," + params[4] + ")");
	                    eval("updateInfo(" + params[1] + ")");
	                    return true;
	                 }
	                 catch(e){}
	            }
	        }
	        
	        return false;
	    }
	    
	    
	    
        //
        // Changes tab and starts clip from paramaters in URL
        //   
	    function autostartfirstclip () 
	    {
        	if ($E("#clipList a"))
        	{
	        	var link = $E("#clipList a").href;
				try
				{
					eval("player"+link.substr(link.indexOf(".play(")));
					return true;
				}
				catch(e){}
			}
        }

	    
	    
	    
		function showHelp()
		{
			if(document.getElementById("player"))
			{
				document.getElementById("player").innerHTML = "<iframe src=\"/info/avfaq_simple_euro2008.html\" name=\"adPanel\" id=\"adPanel\" width=\"512\" height=\"334\" scrolling=\"yes\" marginheight=\"0\" marginwidth=\"0\" frameborder=\"0\" status=\"no\" statusbar=\"no\" allowTransparency=\"true\"></iframe>";
				if(document.getElementById("clipExtraInfo"))
					document.getElementById("clipExtraInfo").innerHTML = "";
			}
			
		}