var Pager = Class.create();

Pager.prototype = {

    initialize : function() {
        this._buttons = new Array();
        this._disposed = false;
    },

    observeImage : function(imgID, pageNumber, src, activeSrc, pressedSrc) {
        var button = new ImageButton(imgID, src, activeSrc, pressedSrc);
        this._buttons.push(button);
        button.click = this.pageChanged.bind(this, pageNumber);
    },

//When called takes single argument pageNumber
    pageChanged : function() {
    },

    dispose : function() {
        if (!this._disposed) {
            this._buttons.each(function(button) {
                button.dispose();
            }.bind(this))
            delete this._buttons;
            this._buttons = null;
            this.pageChanged = function() {
            };
            this._disposed = true;
        }
    }
}

var ImageButton = Class.create();

ImageButton.prototype = {
    click : null,

    initialize : function(imgID, src, activeScr, pressedSrc) {
        this._imgID = imgID;
        this._src = src;
        this._activeSrc = activeScr;
        this._pressedSrc = pressedSrc;
        this._boundMouseOver = this._mouseOver.bind(this);
        this._boundMouseOut = this._mouseOut.bind(this);
        this._boundMouseUp = this._mouseUp.bind(this);
        this._boundMouseDown = this._mouseDown.bind(this);
        this._boundMouseClick = this._mouseClick.bind(this);

        $(this._imgID).observe("mouseover", this._boundMouseOver);
        $(this._imgID).observe("mouseout", this._boundMouseOut);
        $(this._imgID).observe("mouseup", this._boundMouseUp);
        $(this._imgID).observe("mousedown", this._boundMouseDown);
        $(this._imgID).observe("click", this._boundMouseClick);
        this._disposed = false;
    },

    dispose : function() {
        if (!this._disposed) {
            this._click = null;
            Event.stopObserving(this._imgID, "mouseover", this._boundMouseOver)
            Event.stopObserving(this._imgID, "mouseout", this._boundMouseOut)
            Event.stopObserving(this._imgID, "mouseup", this._boundMouseUp)
            Event.stopObserving(this._imgID, "mousedown", this._boundMouseDown)
            Event.stopObserving(this._imgID, "click", this._boundMouseClick)
            this._disposed = true;
        }
    },

    _mouseOver : function() {
        $(this._imgID).src = this._activeSrc;
    },

    _mouseOut : function() {
        $(this._imgID).src = this._src;
    },

    _mouseUp : function() {
        $(this._imgID).src = this._activeSrc;
    },

    _mouseDown : function() {
        $(this._imgID).src = this._pressedSrc;
    },

    _mouseClick : function() {
        if (this.click != null && typeof(this.click) == 'function') {
            this.click();
        }
    }
}