// JavaScript Document

function jqHorNav() {
    this.jData = null;
    this.bDebug = true;
    this.nInitAsset = 0;
    this.nActualPage = 1;
    this.nTotalNodes = 0;
    this.nItemsCount = 0;
    this.nPagesCant = 0;
    this.nWidthMask = 0;
    this.aData = [];
    this.nTimeTochange = 2000000;
    this.sClass = "";
    this.oTarget = null;
    this.oPlayImg = null;
    this.oStopImg = null;
    this.sHomeUrl = "";
    var _self = this;
    this.init = function(_arr, _target, _class, _cant, _playimg, _stopimg, _homeUrl) {
        this.jData = _arr;
        this.oTarget = _target;
        this.oPlayImg = _playimg;
        this.oStopImg = _stopimg;
        this.sClass = _class;
        this.nItemsCount = _cant;
        this.doCreateStyle();
    }

    this.doCreateStyle = function() {
        this.nPagesCant = Math.ceil(this.jData.length / this.nItemsCount);

        var sList = this.onCreateList();
        var sTabNav = this.onCreateNav();

        $(this.oTarget).addClass(_self.sClass);
        $(this.oTarget).html('<div class="list">' + sList + '</div><div class="nav">' + sTabNav + '</div>');

        this.nWidthMask = ($(this.oTarget).find(".item").width() + 20) * this.nItemsCount;
        $(this.oTarget).css("width", this.nWidthMask);

        var widthList = ($(this.oTarget).find(".item").width() + 20) * this.jData.length;
        $(this.oTarget).find(".list").css("width", widthList);

        var widthNav = ($(this.oTarget).find("#ulButtons > li > a").width() + 4) * (this.nPagesCant + 2);
        $(this.oTarget).find("#ulButtons").css("width", widthNav);

        $(this.oTarget).delegate(".player a", "click", function() { _self.onPlaySong($(this).attr("song"), this) });
        $(this.oTarget).delegate("#ulButtons li a", "click", function() { _self.autochange($(this).attr("page")) });
        $(this.oTarget).delegate(".item_photo", "click", function() { _self.onGoUrl($(this).attr("clicktag")) });
        $(this.oTarget).delegate(".item_title", "click", function() { _self.onGoUrl($(this).attr("clicktag")) });
        $(this.oTarget).delegate(".item_copy", "click", function() { _self.onGoUrl($(this).attr("clicktag")) });

        this.onScroll();
    }
    this.onCreateNav = function() {
        var oTabs = '<ul id="ulButtons">';
        if (this.nPagesCant > 1) {
            oTabs += '<li><a href="javascript:void(0);" page="999" class="btnNavigator_l"></a></li>';
            for (var i = 0; i < this.nPagesCant; i++) {
                oTabs += '<li><a href="javascript:void(0);" page="' + (i + 1) + '" class="btnNav"></a></li>';
            }
            oTabs += '<li><a href="javascript:void(0);" page="9999" class="btnNavigator_r"></a></li>';
        }
        oTabs += '</ul><div class="clearfix"></div>';
        return oTabs;
    }
    this.onCreateList = function() {
        var oItems = '<ul id="ulItems">';
        for (var i = 0; i < this.jData.length; i++) {

            var title = Encoder.htmlDecode(this.jData[i].title);
            if (title.length > 17)
                title = title.substring(0, 17) + "...";

            var copy = Encoder.htmlDecode(this.jData[i].copy);
            if (copy.length > 17)
                copy = copy.substring(0, 17) + "...";
                
            if (this.jData[i].song != "")
                oItems += '<li><div class="item"><img class="item_photo" src="' + this.jData[i].image + '" clicktag="' + this.jData[i].url + '"/><p class="item_title" title="' + Encoder.htmlDecode(this.jData[i].title) + '" clicktag="' + this.jData[i].url + '">' + title + '</p><p class="item_copy" clicktag="' + this.jData[i].url + '">' + copy + '</p><div class="player"><a href="javascript:void(0);" class="playerBtn_play" song="' + this.jData[i].song + '" status="stopped"><img id="imgPlayButton_' + i + '_' + this.sClass + '" src="' + this.oPlayImg + '" border="0"/></a></div></div></li>';
            else
                oItems += '<li><div class="item"><img class="item_photo" src="' + this.jData[i].image + '" clicktag="' + this.jData[i].url + '"/><p class="item_title" title="' + Encoder.htmlDecode(this.jData[i].title) + '" clicktag="' + this.jData[i].url + '">' + title + '</p><p class="item_copy" clicktag="' + this.jData[i].url + '">' + copy + '</p></div></li>';
        }
        oItems += '</ul><div class="clearfix"></div>';
        return oItems;
    }
    this.onScroll = function(_data) {
        $(this).stopTime();
        $(this).oneTime(this.nTimeTochange, "hide", function() {
            this.autochange(_data);
        });

        $(this.oTarget).find("#ulButtons li .btnNav").removeClass("active");
        var activeObj = $(this.oTarget).find("#ulButtons li .btnNav")[this.nActualPage - 1];
        $(activeObj).addClass("active");
    }

    this.onGetMovie = function(movieName) {
        if (navigator.appName.indexOf("Microsoft") != -1) {
            return window[movieName];
        } else {
            return document[movieName];
        }
    }

    this.onGoUrl = function(_data) {
        window.open(_data, "_self");
        return false;
    }

    this.autochange = function(_data) {
        var sToMove = '';

        if (_data == "9999") {
            if (this.nActualPage < this.nPagesCant) {
                sToMove = '-=' + this.nWidthMask;
                this.nActualPage++;
            } else {
                sToMove = '0';
                return;
            }
        }
        else if (_data == "999") {
            if (this.nActualPage <= 1) {
                sToMove = '0';
                
            } else {
                sToMove = '+=' + this.nWidthMask;
                this.nActualPage--;
            }
        }
        else {
            this.nActualPage = _data;
            sToMove = '-' + (this.nWidthMask * (_data - 1)) + '';
        }


        $(this.oTarget).find(".list").animate({
            left: sToMove
        }, 500, function() { });



        this.onScroll();
    }

    this.onPlaySong = function(_data, _me) {
        var sId = $(_me).find("img").attr("id");
        playMP3(sId, this.oPlayImg, this.oStopImg, this.sHomeUrl, _data);
    }

}