// JavaScript Document

function jqTabNav() {
    this.jData = null;
    this.bDebug = true;
    this.nTotalTabs = 0;
    this.oTarget = null;
    this.oPlayImg = null;
    this.oStopImg = null;
    this.sHomeUrl = "";
    this.sClass = "";
    this.nInitialTab = 0;
    var _self = this;

    this.init = function(_arr, _class, _target, _initial, _playimg, _stopimg, _homeUrl) {
        this.sClass = _class;
        this.jData = _arr;
        this.oTarget = _target;
        this.oPlayImg = _playimg;
        this.oStopImg = _stopimg;
        this.sHomeUrl = _homeUrl;
        this.nInitialTab = _initial

        
        
        this.doCreateStyle();
    }

    this.doCreateStyle = function() {
        var sTabs = this.onCreateTabs();
        var sItems = this.onCreateItems();
        $(this.oTarget).addClass(this.sClass);
        $(this.oTarget).html("<div class='tablist'>" + sTabs + "</div><div class='contentlist'>" + sItems + "</div>");

        $(this.oTarget).delegate("#tabItems .item a", "click", function() { _self.onPlaySong($(this).attr("song"), this) });
        $(this.oTarget).delegate("#ulOptions li a", "click", function() { _self.onChangeTabInfo($(this).attr("data")) });
        $(this.oTarget).delegate(".img", "click", function() { _self.onGoUrl($(this).attr("clicktag")) });
        $(this.oTarget).delegate(".titlePhoto", "click", function() { _self.onGoUrl($(this).attr("clicktag")) });
        $(this.oTarget).delegate(".textPhoto", "click", function() { _self.onGoUrl($(this).attr("clicktag")) });

        this.onChangeTabInfo(this.nInitialTab);
    }

    this.onCreateTabs = function() {
        var oTabs = '<ul id="ulOptions">';
        for (var i = 0; i < this.jData.length; i++) {
            if (this.jData[i].imageNormal != null && this.jData[i].imageNormal != "") {
                oTabs += '<li><a href="javascript:void(0);" data="' + i + '" class="tabBtn" ><img border="0" src="' + this.jData[i].imageNormal + '" status="imageNormal"/></a></li>';
            } else {
                oTabs += '<li><a href="javascript:void(0);" data="' + i + '" class="tabBtn" >' + this.jData[i].name + '</a></li>';
            }
        }
        oTabs += '</ul><div class="clearfix"></div>';
        return oTabs;
    }


    this.onCreateItems = function(_data) {
        if (!_data) {
            _data = 0;
        }
        var oItems = '<ul id="tabItems">';
        var selClass = "light";
        for (var i = 0; i < this.jData[_data].info.length; i++) {
            if (i % 2 == 0) {
                selClass = "light";
            } else {
                selClass = "dark";
            }

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

            if (this.jData[_data].info[i].song != "")
                oItems += '<li class="' + selClass + '"><div class="item"><img src="' + this.jData[_data].info[i].image + '" clicktag="' + this.jData[_data].info[i].url + '" class="img"/><p class="titlePhoto" clicktag="' + this.jData[_data].info[i].url + '" title="' + Encoder.htmlDecode(this.jData[_data].info[i].copy) + '">' + copy + '</p><p clicktag="' + this.jData[_data].info[i].url + '" class="textPhoto">' + Encoder.htmlDecode(this.jData[_data].info[i].title) + '</p><a class="playerBtn_play" href="javascript:void(0);" song="' + this.jData[_data].info[i].song + '" status="stopped"><img id="imgPlayButton_' + i + '_' + this.sClass + '" src="' + this.oPlayImg + '" border="0"/></a></div><div class="clearfix"></div></li>';
            else
                oItems += '<li class="' + selClass + '"><div class="item"><img src="' + this.jData[_data].info[i].image + '" clicktag="' + this.jData[_data].info[i].url + '" class="img"/><p class="titlePhoto" clicktag="' + this.jData[_data].info[i].url + '" title="' + Encoder.htmlDecode(this.jData[_data].info[i].copy) + '">' + copy + '</p><p clicktag="' + this.jData[_data].info[i].url + '" class="textPhoto">' + Encoder.htmlDecode(this.jData[_data].info[i].title) + '</p></div><div class="clearfix"></div></li>';

        }


        oItems += '</ul>';
        return oItems;
    }

    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.onChangeTabInfo = function(_data) {

        $(this.oTarget).find(".contentlist").html("");
        var sItems = this.onCreateItems(_data);
        $(this.oTarget).find(".contentlist").html(sItems);


        if (this.jData[_data].imageNormal == null || this.jData[_data].imageNormal == "") {
            $(this.oTarget).find("#ulOptions li a").addClass("inactive_tab");

            var oTabToChange = $(this.oTarget).find("#ulOptions li a")[_data];

            $(oTabToChange).removeClass("inactive_tab");
            $(oTabToChange).addClass("active_tab");
        } 
        else {
            var anchors = $(this.oTarget).find("#ulOptions li a");
            for (var i = 0; i < anchors.length; i++) {
                if (i == _data) {
                    $(anchors[i]).html('<img border="0" src="' + this.jData[_data].imageselected + '" status="imageSelected"/>');
                }
                else {
                    $(anchors[i]).html('<img border="0" src="' + this.jData[i].imageNormal + '" status="imageNormal"/>');
                }
            }

        }
    }

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