msnbc.modules.StoryNav = msnbc.modules.Module.extend({

    setup: function(data, container) {
        this.MAX_TEASES = 4;
        this.columns = [];

        this.moduleList = data;
        this.container = container;

        this.slices = [];

        this.nextStory = this.addComponent('msnbc.components.nextStory');
    },

    render: function(moduleList) {

      this.moduleList = moduleList || this.moduleList;

        this.nextStory.setup();

        var self = this;
        var tdata = [];

        // filter down only to first 4 modules that implement teases
        jQuery.each(this.moduleList,
        function(i) {
            if (i == 0) return true;
            // skip 1st element
            var t = this.getNavTease(this);
            // send reference to nav in case module needs to attach listeners
            if (t) {
                self.slices.push(this.__container);
                tdata.push(t);
            }

            if (tdata.length == self.MAX_TEASES) return false;
            // exit loop when/if we have 4 teases
        });

        var cols;

        // HANDLE SPECIAL LAYOUTS
        switch (tdata.length) {
        case 0:
            // nothing to render, notify accordingly and exit
            $(this.container.slot).empty();
            this.dispatchEvent('noTeasesToRender');
            return false;
        case 1:
            // just one extra tease, add nextStory component
            $(".summaryBarLabel").after('<div id="next-story-shim">&#160;&#160;</div>');
            tdata.push(this.nextStory.getNavTease());
            break;
        default:
            this.nextStory.insertBefore(this.container.slot);
            break;
        };

        this.columns = this.container.applyLayout(this.container.slot, tdata.length);

        jQuery.each(this.columns,
        function(j) {
            self.renderItem(this, tdata[j], j);
        });

        $(this.__container.slot).find('.preloader').remove();
        $(this.__container.slot).addClass('t'+this.columns.length);
        

    },

    renderItem: function(slot, item, i) {
        var self = this;
        // first item may need explicit class
        var first = (i == 0) ? 'first ': '';
        var colWidth = this.container.getSpan(slot);

        var abstr = item['abstract'];
        var teaseSize;

        if (item.special) {
            // handle next links differently
            this.renderNextLink(slot, item, i);
            return;
        };
        
        var iconmarkup = '<div class="icon"><div class="' + item.icon + '"></div><div class="arrow"></div></div>';
        
        if (colWidth == 1) {
            teaseSize = "thumb";
            var markup = '<div class="nav-item ' + first + ' ' + item.icon + ' i' + (i+2) + '" title="Skip to ' + item.label + '">';
              markup += '<div class="label ' + item.icon + '">' + item.label + '</div>';
              markup += '<div class="tease">' + iconmarkup + '</div>';
              markup += '<a title="Skip to ' + item.label + '"><span class="title">' + item.title + '</span></a>';
              markup += '<div class="source">' + item.source + '</div>';
            markup += '</div>';
            $(slot).append(markup);

        } else if (colWidth >= 2) {
            teaseSize = "vmodsmall";
            if (item.label.match(/text/i)) {
              // don't split
              var markup = iconmarkup + '<div class="label ' + item.icon + '">' + item.label + '</div>';
              markup += '<a title="Skip to ' + item.label + '"><span class="title">' + item.title + '</span></a>';
              markup += '<div class="source">' + item.source + '</div>';
              $(slot).append(markup);
            } else {
              // split again
             var inners = this.container.applyLayout(slot, 2);
             $(inners[0]).append('<div class="tease">' + iconmarkup + '</div>');
             $(inners[1]).append('<div class="label ' + item.icon + '">' + item.label + '</div><a title="Skip to ' + item.label + '"><div class="title">' + item.title + '</div></a><div class="source">' + item.source + '</div>');
           }
   
            $(slot).wrapInner('<div class="nav-item ' + first + ' i' + (i+2) + '" title="Skip to ' + item.label + '"></div>');
        }

        if (abstr.match(/http/)) {
            abstr = '<img src="' + msnbc.utils.makeAIMS(abstr, teaseSize) + '"/>';
        } else if (item.label.match(/text/i)) {
            abstr = '';
            $(slot).find('div.nav-item').addClass('nav-text');
        }

        $(slot).find('div.tease:last').append(abstr);

        $(slot).bind('click',
        function(e) {
            var slice = self.slices[i];
            var delta = Math.ceil($(slice.slot).offset().top);
            if (msnbc.document.quilt.openOnScroll.length > 0) var rescroll = true;
            $('html,body').stop().animate({
                scrollTop: delta
            },
            800,
            function() {
                if (rescroll) {
                    var delta2 = Math.ceil($(slice.slot).offset().top);
                    if (delta2 > delta) {
                        $('html,body').animate({
                            scrollTop: delta2
                        },
                        200);
                    }
                };
            });
        });


    },

    renderNextLink: function(slot, item, i) {
      if (item.href.indexOf('http')==-1) {
        item.href = 'http://www.msnbc.msn.com/id/' + item.href;
      };
      var markup = '<div class="nav-item next-story i3" title="Skip to the next story">';
      markup += '<div class="icon"><div class="' + item.icon + '"></div><div class="arrow"></div></div>';
      markup += '<div class="label ' + item.icon + '">' + item.label + '</div>';
      markup += '<a title="Skip to the next story" href="' + item.href + '"><span class="title">' + item.title + '</span></a>';
      markup += '</div>';
      $(slot).append(markup);
    },


    reRender: function(newData) {
        $(this.container.slot).empty();
        this.setup(newData || this.moduleList, this.container);
        this.render();
    }


});