dojo.require('dojo.html');
dojo.require('dojo.html.style');
dojo.require('dojo.html.layout');
dojo.require('dojo.lfx.html');
dojo.require('dojo.event');

TfGalleryManager = {
    galleries: {},

    add: function(galleryId, itemWidth) {
        if (TfGalleryManager.galleries[galleryId]) return false;

        TfGalleryManager.galleries[galleryId] = true;
        
        dojo.addOnLoad(function() {
            TfGalleryManager.init(galleryId, itemWidth);
        });

        return true;
    },

    init: function(galleryId, itemWidth) {
        TfGalleryManager.galleries[galleryId] = new TfGallery(
            dojo.byId(galleryId), itemWidth
        );
    },

    showItem: function(galleryId, itemPos) {
	if (galleryId && TfGalleryManager.galleries[galleryId])
            TfGalleryManager.galleries[galleryId].showItem(itemPos);
    }
}

TfGallery = function(tfGalleryNode, itemWidth) {
    this.rootNode = tfGalleryNode;
    this.itemWidth = itemWidth;

    this._initButtons();
    this._initPane();

}

TfGallery.prototype = {
    rootNode: null,
    boxNode:  null,
    paneNode: null,

    items:  null,
    itemWidth: null,
    itemPageWidth: null,
    itemsPerPage: null,
    itemPadding: null,

    currPos: 1,
    maxPos:  null,

    running: false,

    scrollForward: function() {
        this.scrollTo(this.currPos + 1);
    },

    scrollBack: function() {
        this.scrollTo(this.currPos - 1);
    },

    showItem: function(itemPos) {
        var pos = (itemPos - itemPos % this.itemsPerPage) / this.itemsPerPage;

        this.scrollTo(pos + 1);
    },

    scrollTo: function(newPos) {
        if (this.running || newPos == this.currPos || newPos < 1 || newPos > this.maxPos) return;

        this.running = true;

        var left = this.paneNode.style.left;
        if (!left || left == '') {
            left = 0;
        } else {
            left = parseInt(left.substr(0, left.length - 2));
        }

        var newLeft = left + this.itemPageWidth * (this.currPos - newPos);

        dojo.lfx.html.slideTo(
            this.paneNode,
            {top: 1, left: newLeft},
            500,
            null,
            dojo.lang.hitch(this, '_clearLock')
        ).play();

        this.currPos = newPos;
    },

    _clearLock: function() {
        this.running = false;
    },

    _initButtons: function() {
        var prevBtn = dojo.html.getElementsByClass(
            'tfGallery-prevBtn', this.rootNode
        );
        dojo.event.connect(
            prevBtn, 'onclick',
            dojo.lang.hitch(this, 'scrollBack')
        )[0];

        var nextBtn = dojo.html.getElementsByClass(
            'tfGallery-nextBtn', this.rootNode
        )[0];
        dojo.event.connect(
            nextBtn, 'onclick',
            dojo.lang.hitch(this, 'scrollForward')
        );
    },

    _initPane: function() {
        this.boxNode = dojo.html.getElementsByClass(
            'tfGallery-paneBox2', this.rootNode
        )[0];

        this.paneNode = dojo.html.getElementsByClass(
            'tfGallery-pane', this.rootNode
        )[0];

        this.items = dojo.html.getElementsByClass(
            'tfGallery-item', this.paneNode
        );

        var containerWidth =
            dojo.html.getContentBox(this.boxNode).width - 8;

        this.itemsPerPage = Math.floor(containerWidth / (this.itemWidth + 5));

        var itemPadding = Math.ceil((containerWidth - this.itemsPerPage *
                    this.itemWidth) / this.itemsPerPage / 2);

        this.itemPageWidth = this.itemsPerPage *
            (this.itemWidth + itemPadding * 2);

        for (var i=0; i < this.items.length; i++) {
            dojo.html.setStyle(
                this.items[i], 'padding-left',
                itemPadding + 'px'
            );
            dojo.html.setStyle(
                this.items[i], 'padding-right',
                itemPadding + 'px'
            );
        }

        this.maxPos = Math.ceil(this.items.length /
            this.itemsPerPage);

    }
}