/**
 * @author POP webdev [timw]
 * @version 0.1.0
 * @classDescription 
 *		A MTC specific one-off for image gallery on production detail. 
 *		It should control a vertical slider next/prev group and populate a details area.
 */
var SlideDetailControl = Class.create({
    initialize: function(scrollerInstance, elDetailArea, lnkPrevious, lnkNext, options) {
        // set options
        this.options = Object.extend({
            //itemTemplate: '<img src="#{imgSrc}" alt="#{alt}" />\n<p>#{caption}</p>',
            itemTemplate: '<img class="image_prod_detail" alt="#{alt}" src="#{imgSrc}"/><div id="transp_shim"><div class="inner_info"><p>#{caption}</p></div></div>',
            itemsPerGroup: 5
        }, options || {});

        // construction tasks
        this.scroller = scrollerInstance; // an instance of the VerticalScrollerInstance class.
        this.detailArea = $(elDetailArea); // the area the detail information will appear

        this.lnkPrevious = $(lnkPrevious);
        this.lnkNext = $(lnkNext);


        this.currentGroupIndex = Math.floor(this.scroller.currentSlideIndex / this.options.itemsPerGroup);
        this._setPaginationLinksState();

        // event handlers
        lnkPrevious.observe('click', this.__PreviousClick.bindAsEventListener(this));
        lnkNext.observe('click', this.__NextClick.bindAsEventListener(this));

        // listen for when a slide has been selected
        //$('verticalscroller_frame').observe('sidescroller:slideselected', 
        document.observe('scroller:slideselected',
			this.__SelectedSlideChanged.bindAsEventListener(this)
		);

        this.scroller.slideList.observe('click', this.__ClickForDetail.bindAsEventListener(this));
    },

    __NextClick: function(e) {
        e.stop();
        this.moveToNextGroup();
    },

    __PreviousClick: function(e) {
        e.stop();
        this.moveToPreviousGroup();
    },

    getGroupCount: function() {
        return Math.ceil(this.scroller.getSlideCount() / this.options.itemsPerGroup);
    },

    moveToGroup: function(groupIndex) {
        this.currentGroupIndex = groupIndex;
        if (this.scroller.isMoving) { this.scroller.stopMoving(); } //A.D.D. protection
        this.scroller.moveTo(groupIndex * this.options.itemsPerGroup);

        this._setPaginationLinksState();
    },

    moveToNextGroup: function() {
        if (this.currentGroupIndex < (this.getGroupCount() - 1)) {
            this.moveToGroup(this.currentGroupIndex + 1);
        }
    },

    moveToPreviousGroup: function() {
        if (this.currentGroupIndex > 0) {
            this.moveToGroup(this.currentGroupIndex - 1);
        }
    },

    _setPaginationLinksState: function() {
        // add/remove 'disable' on next/previous links
        (this.currentGroupIndex >= (this.getGroupCount() - 1)) ? this.lnkNext.addClassName('disabled') : this.lnkNext.removeClassName('disabled');
        (this.currentGroupIndex < 1) ? this.lnkPrevious.addClassName('disabled') : this.lnkPrevious.removeClassName('disabled');

    },

    // Event listener for the sidescroller's custom slideselected event.
    __SelectedSlideChanged: function(e) {
        // a slide has been selected within the scroller (e.memo.slide = the newly selected LI, e.memo.slideIndex = the list index of the newly selected LI)
        var lnk = e.memo.slide.down('a');
        var dataItem = this.getDataItem(lnk);
        this.populateDetails(dataItem);

        // track event
        pop_trackEvent({ "object": 'photo_slider', "action": 'select', "label": dataItem.caption });
    },

    __ClickForDetail: function(e) {
        Event.stop(e);
        var el = e.element();
        var elLi, elLnk;

        if (el.nodeName == 'UL') {
            return; // user clicked in padding of ul
        }
        if (el.nodeName != 'LI') {
            elLi = el.up('LI');
        }
        else {
            elLi = el;
        }

        this.scroller.setSelectedSlide(elLi);

        // grab data from anchor
        elLnk = elLi.down('a');
        var dataItem = this.getDataItem(elLnk);

        this.populateDetails(dataItem);
    },

    getDataItem: function(elLnk) {
        // grab json formated rel attribute (e.g. rel="{imgSrc:'_ui/img/0.jpg', alt: 'some alt', caption:'Caption 0'}")
        var imgData = elLnk.readAttribute('rel').evalJSON();
        return imgData;
    },

    populateDetails: function(dataItem) {
        var myTemplate = new Template(this.options.itemTemplate);
        this.detailArea.update(myTemplate.evaluate(dataItem));

        // hide caption, if none exists
        if (dataItem.caption.empty()) {
            $('transp_shim').hide();
        }

        /*		
        var boundAfterFinish = function(){
        var myTemplate = new Template(this.options.itemTemplate);
        this.detailArea.update(myTemplate.evaluate(dataItem));
        this._effect = new Effect.Appear(this.detailArea, {duration:0.25});
        }.bind(this, dataItem);
		
		this._effect = new Effect.Fade(this.detailArea, {duration:0.25, afterFinish: boundAfterFinish});
        */
    }

});