var countOfLink;
var arrImg = new Array();
var arrText = new Array();
var arrURL = new Array();
var arrTitle = new Array();
var tooltipHTML = new Array();
var RESULTS_PER_PAGE = 15; // MUST be greater than '1'
var PAGINATION_WIDTH = 5; // indicates how many visible pages would appear, better to be odd number
var first = 1;
var last = RESULTS_PER_PAGE;
$(function() {
    $('#wl_emo_btmImg').css({ 'background': 'transparent url("/img/ajax-loader.gif") no-repeat scroll 50% 50%', 'height': '501px' });
    $.getJSON("http://data.ninemsn.com.au/Services/Service.axd?ServiceName=Highlight&ServiceAction=Get&ServiceFormat=JSONAUTO&SiteID=4372&SectionID=9975&SubSectionID=154564&GroupID=76973&callback=?", function(data) {
        if (data && data.HighlightList && data.HighlightList.Highlight && data.HighlightList.Highlight.LinkList && data.HighlightList.Highlight.LinkList.Link) {
            countOfLink = parseInt(data.HighlightList.Highlight.LinkList.Link.length);
            //countOfLink = 2;
            for (i = 0, j = countOfLink - 1; i < countOfLink; i++, j--) {
                arrImg[j] = data.HighlightList.Highlight.LinkList.Link[i].ImageUrl;
                arrText[j] = data.HighlightList.Highlight.LinkList.Link[i].Text;
                arrURL[j] = data.HighlightList.Highlight.LinkList.Link[i].Url;
                arrTitle[j] = data.HighlightList.Highlight.LinkList.Link[i].Title;
                var tempArray = new Array();
                tempArray = arrText[j].toString().split(',');
                for (k = 0; k < 4; k++) //there must be at least 1 line and less than 4 lines description for tooltip 
                    tempArray[k] = !tempArray[k] ? "" : tempArray[k];

                tooltipHTML[j] = '<div id="wl_emo_tooltip' + j + '" class="wl_emo_tooltip"><div class="wl_emo_tooltip_top"></div><div class="wl_emo_tooltip_mid"><div class="wl_emo_tooltip_title">' + arrTitle[j] + '</div><div class="wl_emo_tooltip_text">' + tempArray[1] + '</div><div class="wl_emo_tooltip_text">' + tempArray[2] + '</div><div class="wl_emo_tooltip_text">' + tempArray[3] + '</div></div><div class="wl_emo_tooltip_btm"><div class="wl_emo_tooltip_text">' + tempArray[0] + '</div></div></div>';
            }
            if (countOfLink < RESULTS_PER_PAGE) last = countOfLink;
            else last = RESULTS_PER_PAGE;
            GetResultsPerPage();
        }
    });
    $('#wl_emo_topImg #item_0').click(function() {
        OMNTRLinkTracking(this, 'WL_EMO_MID', 'WL_EMO_MID_DownloadMsg');
    });
    $('#wl_emo_topImg #item_1').click(function() {
        OMNTRLinkTracking(this, 'WL_EMO_MID', 'WL_EMO_MID_GetLatest');
    });
    $('#wl_emo_topImg #item_2').click(function() {
        OMNTRLinkTracking(this, 'WL_EMO_MID', 'WL_EMO_MID_Personalise');
    });
});
function DisplayTooltip(id) {
    $('#wl_emo_tooltip' + id.toString().substring('wl_emo_packageImg'.length)).css({ 'display': 'block', 'cursor': 'pointer' }).stop().animate({ "opacity": 0.9 });
}
function HiddenTooltip(id) {
    $('#wl_emo_tooltip' + id.toString().substring('wl_emo_packageImg'.length)).css({ 'display': 'none', 'cursor': 'none' }).stop().animate({ "opacity": 0 });
}

function DownloadEmoticon(id) {
    window.location = (arrURL[id.toString().substring('wl_emo_packageImg'.length)]);
}

function GetResultsPerPage() {
    var p = $('#wl_emo_pagination');
    var b = $('#wl_emo_btmImg');
    b.find('div').remove();
    p.find('span').remove();
    for (i = first - 1; i < last; i++) {
        var jPackageImg = $('<div class="wl_emo_packageImg" id="wl_emo_packageImg' + i + '" style="width:176px;height:152px;float:left;background-image:url(' + arrImg[i] + ')">' + tooltipHTML[i] + '</div>');
        //var wl_emo_packageImg = $('<div class="wl_emo_packageImg" onclick="DownloadEmoticon(' + i + ')" onmouseover="DisplayTooltip(' + i + ')" onmouseout="HiddenTooltip(' + i + ')" id="wl_emo_packageImg' + i + '" style="width:176px;height:152px;float:left;background-image:url(http://windowslive.syd.ninemsn.com.au' + arrImg[i] + ')">' + tooltipHTML[i] + '</div>');
        $('#wl_emo_btmImg').append(jPackageImg);
        //wl_emo_packageImg.hover(DisplayTooltip(), HiddenTooltip());
        jPackageImg.hover(function() { DisplayTooltip(this.id) }, function() { HiddenTooltip(this.id) });
        jPackageImg.click(function() { DownloadEmoticon(this.id); OMNTRLinkTracking(this, 'WL_EMO_POD', 'WL_EMO_POD_' + arrTitle[this.id.toString().substring('wl_emo_packageImg'.length)].replace(/\s/g, '')) });
    }

    p.append('<span id="wl_emo_pageNext" class="wl_emo_pageLink" onclick="onClickNext()">NEXT ></span>');

    if (countOfLink / RESULTS_PER_PAGE > PAGINATION_WIDTH) { // movable pagination
        if (last / RESULTS_PER_PAGE >= Math.floor(PAGINATION_WIDTH / 2) + 1) {
            if (countOfLink - last <= 2 * RESULTS_PER_PAGE) {
                for (var i = (countOfLink % RESULTS_PER_PAGE == 0 ? j = countOfLink / RESULTS_PER_PAGE : j = Math.floor(countOfLink / RESULTS_PER_PAGE) + 1); i >= j - PAGINATION_WIDTH + 1; i--) {
                    p.append('<span class="wl_emo_pageBtn" id="wl_emo_page' + i + '">' + i + '</span>');
                }
            }
            else {
                for (var i = Math.floor(last / RESULTS_PER_PAGE) + Math.floor(PAGINATION_WIDTH / 2); i >= Math.floor(last / RESULTS_PER_PAGE) - Math.floor(PAGINATION_WIDTH / 2); i--) {
                    p.append('<span class="wl_emo_pageBtn" id="wl_emo_page' + i + '">' + i + '</span>');
                }
            }
        }
        else {
            for (var i = PAGINATION_WIDTH; i >= 1; i--) {
                p.append('<span class="wl_emo_pageBtn" id="wl_emo_page' + i + '">' + i + '</span>');
            }
        }
    }
    else { //fixed pagination
        for (var i = (countOfLink % RESULTS_PER_PAGE == 0 ? countOfLink / RESULTS_PER_PAGE : Math.floor(countOfLink / RESULTS_PER_PAGE) + 1); i >= 1; i--) {
            p.append('<span class="wl_emo_pageBtn" id="wl_emo_page' + i + '">' + i + '</span>');
        }
    }

    p.append('<span id="wl_emo_pagePrev" class="wl_emo_pageLink" onclick="onClickPrev()">< PREV</span>');

    checkBtn();

    $('#wl_emo_btmImg').css({ 'background': 'transparent none no-repeat scroll 50% 50%', 'height': 'auto' });

    $('.wl_emo_pageBtn').click(function() { onClickPage(this.id) });
}

function onClickPrev() {
    if (first != 1) {
        first -= RESULTS_PER_PAGE;
        last = first + RESULTS_PER_PAGE - 1;
    }
    GetResultsPerPage();
}

function onClickNext() {
    first += RESULTS_PER_PAGE;
    if (countOfLink - last <= RESULTS_PER_PAGE) last = countOfLink;
    else last += RESULTS_PER_PAGE;
    GetResultsPerPage();
}

function onClickPage(id) {
    first = (id.toString().substring('wl_emo_page'.length) - 1) * RESULTS_PER_PAGE + 1;
    if (id.toString().substring('wl_emo_page'.length) * RESULTS_PER_PAGE > countOfLink) last = countOfLink;
    else last = id.toString().substring('wl_emo_page'.length) * RESULTS_PER_PAGE;
    GetResultsPerPage();
}

function checkBtn() { // check the button status in pagination, eg. if visible or not
    if (first == 1) $('#wl_emo_pagePrev').css('display', 'none');
    else $('#wl_emo_pagePrev').css('display', 'block');
    if (last == countOfLink) $('#wl_emo_pageNext').css('display', 'none');
    else $('#wl_emo_pageNext').css('display', 'block');
    $('#wl_emo_page' + Math.floor((first + RESULTS_PER_PAGE) / RESULTS_PER_PAGE)).css({ "background-color": "#fff", "color": "#000" }); // hightlight the current page
}