var pageHeight = 336;
var itemsPerPage = 8;
var pagingPagesPerPage = 10;
var page = 1;
var pageCount = 1;
var pagingPage = 1;
var list = '#list-clips';
var showlist = '#list-shows';
var vidID = '';
var deepClipid = '';
var deepClipShow = '';


$(document).ready(function () {

    var deepClip = '';

    deepClipid = $('#ctl00_ContentLeft_hiddenUma').val();
    deepClipShow = $('#ctl00_ContentLeft_hiddenShow').val();
    if (deepClipid == undefined) {
        deepClipid = '';
    }
    if (deepClipShow == undefined) {
        deepClipShow = '';
    }

    if (deepClipShow != '') {
        callService('', '', deepClipShow);
    }
    else {
        if (QSo != "###") // QSo is the query string object, set in juicy.fruit.js
        {
            if (QSo.show != undefined) {
                callService('', '', QSo.show, true);
            }
            if (QSo.filter != undefined) {
                callService('nickToons');
            }
            else {
                callService('newclips');
            }
        }
        else {
            callService('newclips', '', '');
        }
    }

    $('#paging,#list-clips,#list-shows').disableTextSelect();
    initTabs();
});

function initClips()
{
    var clipCount = $(list).children().size();
    $('#pages').html('');
    $('#paging-curr').remove();
    pagingCreated=false;
    
    pagingPage=1;
    page=1;
    if(clipCount>itemsPerPage)
    {
        $('#pages').css({'display':'block'});
        
        pageCount = Math.floor(clipCount/itemsPerPage);
        if(clipCount/itemsPerPage>pageCount) pageCount++;
        
        var paging = [];
        for(var i=1; i<=pageCount; i++) {                
            paging[i] = '<a id="page'+i+'">'+i+'</a>';
            if(i%10==0) paging[i] += '<span class="more-pages">...</span><br /><span class="less-pages">...</span>';
        }
        $('#pages').append(paging.join(''));
        $('#pages a:first').addClass('on');

        $('#button-next').unbind().show().click(function () {
            if (!$(this).hasClass('disabled')) {
                page++; goPage(page);
                btg.Controller.reloadAds();
                trackPage();
                trackFeatured("clips next", s_account, 'clips');
            }
        });
        $('#button-back').unbind().show().click(function(){
            if (!$(this).hasClass('disabled')) {
                page--; goPage(page);
                btg.Controller.reloadAds();
                trackPage();
                trackFeatured("clips prev", s_account, 'clips');
             }
        });
        $('#pages a').unbind().click(function(){ 
            goPage(this.id.substr(4,5));
            btg.Controller.reloadAds();
            trackPage();
            trackFeatured("clips pages", s_account, 'clips');
        });
        // ... paging controls:
        $('.more-pages').unbind().click(function(){
            showMorePages();
            btg.Controller.reloadAds();
            trackPage();
            trackFeatured("clips more", s_account, 'clips');

        });
        $('.less-pages').unbind().click(function(){
            showLessPages();
            btg.Controller.reloadAds();
            trackPage();
            trackFeatured("clips less", s_account, 'clips');

        });
        
        goPage(1);
        goPagingPage(1);
    } 
    else 
    {
        $('#button-next').hide();
        $('#button-back').hide();
    }
    $('#list-clips a').unbind().click(function () {
        $('#list-clips a.on').removeClass('on');
        $(this).addClass('on');
        playClip($(this).attr('rel'), $(this).children('.list-show').html(), $(this).children('.list-title').html(), false, false);
        Cufon.replace($('.title'));
        btg.Controller.reloadAds();
        trackFeatured("clips gridItem", s_account, 'clips');

//        if (!$.browser.msie) {
//            window.history.pushState({}, 'the new title', 'http://' + window.location.host + '/clips/' + $(this).children('.list-showUrl').html());
//        }
    });

    if (deepClipid != '') {
        var thisClip = $(list + ' a[rel=' + deepClipid + ']');
        $(thisClip).addClass('on');
//        if (!$.browser.msie) {
//            window.history.pushState({}, 'the new title', 'http://' + window.location.host + '/clips/' + $(thisClip).children('.list-showUrl').html());
//        }

        var posTop = $(thisClip).position().top;
        if (posTop > pageHeight - 1) goPage(Math.floor(posTop / pageHeight) + 1);
        bindRelated(deepClipShow);
        $('#clips-show').html(deepClipShow);
        $('#clips-title').html($('#list-clips .on .list-title').html());
        $('#clips .InSkinContainer').css({ 'top': '70px' });
        //sponsorship logo:
        $('#logo-overlay').addClass('playing');
        //$('#clips').height(949); - before new paging
        //$('#clips').height(860);
        $('body').scrollTo(320, 500);
        thisClip.click();
        deepClipid = '';
        deepClipShow = '';
    }
    else {
        $('#clips-show').html($('#list-clips .on .list-show').html());
        $('#clips-title').html($('#list-clips .on .list-title').html());
        $('#clips .InSkinContainer').css({ 'top': '70px' });
        //sponsorship logo:
        $('#logo-overlay').addClass('playing');
        //$('#clips').height(949); - before new paging
        //$('#clips').height(860);
        $('body').scrollTo(320, 500);
    }

    Cufon.replace($('.title'));

}


function initShows()
{
    var showCount = $(showlist).children().size();
    $('#pages').html('');
    $('#paging-curr').remove();
    pagingCreated=false;
    
    pagingPage=1;
    page=1;
    if(showCount>itemsPerPage)
    {
        $('#pages').css({'display':'block'});
        
        pageCount = Math.floor(showCount/itemsPerPage);
        if(showCount/itemsPerPage>pageCount) pageCount++;
        
        var paging = [];
        for(var i=1; i<=pageCount; i++) {
            paging[i] = '<a id="page'+i+'">'+i+'</a>';
            if(i%10==0) paging[i] += '<span class="more-pages">...</span><br /><span class="less-pages">...</span>';
        }
        $('#pages').append(paging.join(''));
        $('#pages a:first').addClass('on');

        $('#button-next').unbind().show().click(function () {
            if (!$(this).hasClass('disabled')) {
                page++; goPage(page, true);
                btg.Controller.reloadAds();
                trackPage();
                trackFeatured("clips prev", s_account, 'clips');
            }
        });
        $('#button-back').unbind().show().click(function(){
            if (!$(this).hasClass('disabled')) {
                page--; goPage(page, true);
                btg.Controller.reloadAds();
                trackPage();
                trackFeatured("clips prev", s_account, 'clips');

             }
        });
        $('#pages a').unbind().click(function(){
            goPage(this.id.substr(4, 5), true);
            btg.Controller.reloadAds();
            trackPage();
            trackFeatured("clips pages", s_account, 'clips');

        });
        // ... paging controls:
        $('.more-pages').unbind().click(function(){
            showMorePages();
            btg.Controller.reloadAds();
            trackPage();
            trackFeatured("clips more", s_account, 'clips');

        });
        $('.less-pages').unbind().click(function(){
            showLessPages();
            btg.Controller.reloadAds();
            trackPage();
            trackFeatured("clips less", s_account, 'clips');

        });
        
        goPage(1,true);
        goPagingPage(1);
    } 
    else 
    {        
        $('#button-next').hide();
        $('#button-back').hide();
    } 
    $('#list-shows a').unbind().click(function(){
        callService('', '', $(this).children('.list-show').html());
    });
}

function initTabs()
{
    $('#tab-newclips').click(function(){
        if (!$(this).hasClass('on')) callService('newclips');
        btg.Controller.reloadAds();
        trackPage();
        trackFeatured("clips new", s_account, this);

    });
    $('#dropdown a').click(function(){
        if (!$(this).hasClass('on')) callService('cliptype', $(this).html());
        btg.Controller.reloadAds();
        trackPage();
        trackFeatured("clips byType", s_account, 'clips');

    });    
    $('#tab-shows').click(function(){    
        $('#tabs a, #tabs div').removeClass('on');
        $('#tab-shows').addClass('on');
        $('#loading,#list-clips').hide();
        $('#list-shows').show();
        $('#breadcrumb').html('You are viewing: <span>Shows A-Z</span>');
        initShows();
        btg.Controller.reloadAds();
        trackPage();
        trackFeatured("clips byShow", s_account, 'clips');

    });
}
/*///---

callService parameters:

- tab: 'newclips', 'cliptype' or ''
- type: string. category filter for clips service (when clip type drop down is used)
- show: string. show name, when selected, to filter ajax results by a show.
- deepShow: used for deeplinking to a show within clips. this sets the list to show a shows clips and begins playing the first clip of that show.
///*/
var firstLoad = true;

function callService(tab, type, show, deepShow) {
    $('#tabs a, #tabs div').removeClass('on');
    if(tab!='') $('#tab-'+tab).addClass('on');
    else $('#tab-shows').addClass('on');
    $(list).show().html('');
    $('#loading').show();
    $('#list-shows').hide();
    if (tab == 'newclips') {
        $.ajax(
	    {
	        type: "POST",
	        url: "/services/contentLINQ.asmx/Clips",
	        beforeSend: function (xhr) {
	            xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
	        },
	        data: "{'show':'all','genre':'all'}",
	        contentType: "application/json; charset=utf-8",
	        dataType: "json",
	        success: function (json) {
	            $('#loading').hide();
	            var clipData = json.d;

	            for (var i = 0; i <= clipData.length - 1; i++) {
	                var thisClip = clipData[i];
	                var elm = '<a title="Watch ' + thisClip.Show + ' - ' + thisClip.Description + '" rel="' + thisClip.Umaid + '">';
	                elm += '<span class="list-img">';
	                if (thisClip.Thumb == "") thisClip.Thumb = "/global/img/thumb.gif";
	                elm += '<img src="' + thisClip.Thumb + '" alt="' + thisClip.Description + '" />';
	                elm += '<span class="clip-hover"></span>';
	                elm += '</span>';
	                elm += '<span class="list-show">' + thisClip.Show + '</span>';
	                elm += '<span class="list-title">' + thisClip.Description + '</span>';
	                elm += '<span class="list-showUrl" style="display:none;">' + thisClip.ShowUrl + '/' + thisClip.Clipid + '</span>';
                     elm += '<span class="playing"></span>';
	                elm += '</a>';
	                $('#list-clips').append(elm);
	            }

	            if (firstLoad == true) {
	                var endSlate = '<div id="end-slate" class="list"><span class="replay"></span><ul></ul></div>';
	                var vidID = clipData[0].Umaid;
	                var videoPlayer = '<object id="embeddedPlayer" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" ><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="flashVars" value="autoPlay=true&'
	                videoPlayer += dartKeyValues
	                videoPlayer += '" /><param name="wmode" value="transparent" /><param name="movie" value="http://media.mtvnservices.com/mgid:uma:video:nick.co.uk:'
	                videoPlayer += vidID
	                videoPlayer += '"  /><embed src="http://media.mtvnservices.com/mgid:uma:video:nick.co.uk:'
	                videoPlayer += vidID
	                videoPlayer += '" id="embeddedPlayer" name="embeddedPlayer" flashVars="autoPlay=true&'
	                videoPlayer += dartKeyValues
	                videoPlayer += '" width="100%" height="100%" bgcolor="#000000" wMode="transparent" type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="always" /></object>'
	                $('#videoplayer').html('').append(videoPlayer + endSlate);
	                $('#list-clips a:first-child').addClass('on');
	                $('#breadcrumb').html('You are viewing: <span>Clips</span>');
	                firstLoad = false;
	            }
	            initClips();
	        },
	        error: function (desc) {
	            $('#loading').hide();
	            $('#list-clips').html("<strong>Oops! Sorry, something has gone wrong with this page. Please try again.</strong>");
	        }
	    });
	}
	else if (tab == 'nickToons') {
	    $.ajax(
	    {
	        type: "POST",
	        url: "/services/contentLINQ.asmx/Clips",
	        beforeSend: function (xhr) {
	            xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
	        },
	        data: "{'show':'NickToons','genre':'all'}",
	        contentType: "application/json; charset=utf-8",
	        dataType: "json",
	        success: function (json) {
	            $('#loading').hide();
	            var clipData = json.d;

	            for (var i = 0; i <= clipData.length - 1; i++) {
	                var thisClip = clipData[i];
	                var elm = '<a title="Watch ' + thisClip.Show + ' - ' + thisClip.Description + '" rel="' + thisClip.Umaid + '">';
	                elm += '<span class="list-img">';
	                if (thisClip.Thumb == "") thisClip.Thumb = "/global/img/thumb.gif";
	                elm += '<img src="' + thisClip.Thumb + '" alt="' + thisClip.Description + '" />';
	                elm += '<span class="clip-hover"></span>';
	                elm += '</span>';
	                elm += '<span class="list-show">' + thisClip.Show + '</span>';
	                elm += '<span class="list-title">' + thisClip.Description + '</span>';
	                elm += '<span class="list-showUrl" style="display:none;">' + thisClip.ShowUrl + '/' + thisClip.Clipid + '</span>';
	                elm += '<span class="playing"></span>';
	                elm += '</a>';
	                $('#list-clips').append(elm);
	            }

	            if (firstLoad == true) {
	                var endSlate = '<div id="end-slate" class="list"><span class="replay"></span><ul></ul></div>';
	                var vidID = clipData[0].Umaid;
	                var videoPlayer = '<object id="embeddedPlayer" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" ><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="flashVars" value="autoPlay=true&'
	                videoPlayer += dartKeyValues
	                videoPlayer += '" /><param name="wmode" value="transparent" /><param name="movie" value="http://media.mtvnservices.com/mgid:uma:video:nick.co.uk:'
	                videoPlayer += vidID
	                videoPlayer += '"  /><embed src="http://media.mtvnservices.com/mgid:uma:video:nick.co.uk:'
	                videoPlayer += vidID
	                videoPlayer += '" id="embeddedPlayer" name="embeddedPlayer" flashVars="autoPlay=true&'
	                videoPlayer += dartKeyValues
	                videoPlayer += '" width="100%" height="100%" bgcolor="#000000" wMode="transparent" type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="always" /></object>'
	                $('#videoplayer').html('').append(videoPlayer + endSlate);
	                $('#list-clips a:first-child').addClass('on');
	                $('#breadcrumb').html('You are viewing: <span>Nicktoons clips</span>');
	                firstLoad = false;
	            }
	            initClips();
	        },
	        error: function (desc) {
	            $('#loading').hide();
	            $('#list-clips').html("<strong>Oops! Sorry, something has gone wrong with this page. Please try again.</strong>");
	        }
	    });
	}
	else if(tab == 'cliptype') 
	{	
        $.ajax(
	    {
		    type: "POST",
		    url: "/services/contentLINQ.asmx/Clips",
		    beforeSend: function (xhr) {                            
		        xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
		    },
		    data: "{'show':'all','genre':'"+ type +"'}",
		    contentType: "application/json; charset=utf-8",
		    dataType: "json",
		    success: function(json)
		    {  
		       $('#loading').hide();
		       var clipData = json.d;
    		   
		       for(var i=0; i<=clipData.length-1; i++) {
				    var thisClip = clipData[i];    				
				    var elm = '<a title="Watch '+ thisClip.Show +' - '+ thisClip.Description +'" rel="'+ thisClip.Umaid +'">';
				    elm += '<span class="list-img">';
				    if(thisClip.Thumb=="") thisClip.Thumb = "/global/img/thumb.gif";
                    elm += '<img src="'+ thisClip.Thumb +'" alt="'+ thisClip.Description +'" />';
                    elm += '<span class="clip-hover"></span>';
                    elm += '</span>';
                    elm += '<span class="list-show">'+ thisClip.Show +'</span>';
                    elm += '<span class="list-title">'+ thisClip.Description +'</span>';
                    elm += '<span class="playing"></span>';
                    elm += '</a>';                    
				    $('#list-clips').append(elm);
		       }
		       $('#breadcrumb').html('You are viewing: <span>Clip type</span> > <span>'+ type +' clips</span>');
		       initClips();
		    },
		    error: function(){
		        $('#loading').hide();
                $('#list-clips').html("<strong>Oops! Sorry, something has gone wrong with this page. Please try again.</strong>");
		    }   
	    });
	}
    else if (show != '') {
        show = show.replace("'", "&#39;");
        show = jQuery.trim(show);
	    $.ajax(
	    {
	        type: "POST",
	        url: "/services/contentLINQ.asmx/Clips",
	        beforeSend: function (xhr) {
	            xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
	        },
	        data: "{'show':'" + show + "','genre':'all'}",
	        contentType: "application/json; charset=utf-8",
	        dataType: "json",
	        success: function (json) {
	            $('#loading').hide();
	            var clipData = json.d;
	            for (var i = 0; i <= clipData.length - 1; i++) {
	                var thisClip = clipData[i];
	                var elm = '<a title="Watch ' + thisClip.Show + ' - ' + thisClip.Description + '" rel="' + thisClip.Umaid + '">';
	                elm += '<span class="list-img">';
	                if (thisClip.Thumb == "") thisClip.Thumb = "/shows/thumbs/generic_show.jpg";
	                elm += '<img src="' + thisClip.Thumb + '" alt="' + thisClip.Description + '" />';
	                elm += '<span class="clip-hover"></span>';
	                elm += '</span>';
	                elm += '<span class="list-show">' + thisClip.Show + '</span>';
	                elm += '<span class="list-title">' + thisClip.Description + '</span>';
	                elm += '<span class="playing"></span>';
	                elm += '</a>';
	                $('#list-clips').append(elm);
	            }
	            $('#list-clips').css({ "top": 0 });
	            $('#breadcrumb').html('You are viewing: <span id="shows">Shows A-Z</span> > <span>' + clipData[0].Show + ' clips</span>');
	            initClips();

	            if (deepShow) {
	                $('#list-clips a:first').addClass('on');
	            }
	        },
	        error: function () {
	            $('#loading').hide();
	            $('#list-clips').html("<strong>Oops! Sorry, something has gone wrong with this page. Please try again.</strong>");
	        }
	    });
	}   
}