if(Object.isUndefined(Effect))
  throw("waImageAccordeon.js requires including script.aculo.us' effects.js library");

var waImageAccordeon = Class.create({
    initialize: function(element) {
        var defaults = {
            imagewidth_small: 60,
            imagewidth_wide: 100
        };
        var options = Object.extend(defaults, arguments[1] || { });
        this.options = options;

        this.imageArray = new Array;
        this.accordeon = $(element);
        this.activeimage = null;
        var currentx = 0;
        
        for (i = 0; i < 6; i ++) {
            this.imageArray[i] = [currentx, currentx + options.imagewidth_small];
            currentx = currentx + options.imagewidth_small;
        }

        this._refreshHotzone(0);
        this.eventShowImage = this._showImageOnHover.bindAsEventListener(this);
        this.accordeon.observe('mousemove', this.eventShowImage);
        this.eventHideImage = this._hideImageOnLeave.bindAsEventListener(this);
        $$('html')[0].observe('mousemove', this.eventHideImage);
    },

    showDescription: function (element, clicked, activepos) {
        this.activeimage = activepos;
        $$('.akkordeon_image_description').each(function(desc){
            desc.hide();
        });
        $(element).show();
        $$('.akkordeon_image_link').each(function(a){
            a.removeClassName("active")
        });
        clicked.addClassName("active")
    },

    _refreshHotzone: function (imagepos) {
        if (this.selectedimage == imagepos) {
            return;
        }
        var currentx = 0;
        for (i = 0; i < 6; i ++) {
            if (i == imagepos) {
                this.imageArray[i] = [currentx, currentx + this.options.imagewidth_wide];
                currentx = currentx + this.options.imagewidth_wide;
            } else {
                this.imageArray[i] = [currentx, currentx + this.options.imagewidth_small];
                currentx = currentx + this.options.imagewidth_small;
            }
        }
        this.selectedimage = imagepos;
        this._refreshImagePositions();
    },

    _refreshImagePositions: function() {
        var images = $$('.akkordeon_image_canvas');
        for (i = 0; i < 6; i ++) {
            var image = images[i];
            if (image) {
                new Effect.Move(image, {
                    x: this.imageArray[i][0],
                    y: 0,
                    mode: 'absolute',
                    duration: 0.2
                });
            }
        }
    },
    
    _showImageOnHover: function (e) {
        var left = this.accordeon.cumulativeOffset()[0];
        var mouse_x = e.pointerX();
        var relative_position = e.pointerX() - left;
        for (i = 0; i < 5; i ++) {
            if ((relative_position > this.imageArray[i][0]) && (relative_position < this.imageArray[i][1])) {
                this._refreshHotzone(i);
                break;
            }
        }
    },
    
    _hideImageOnLeave: function (e) {
        if (this.activeimage != null) {
            var left = this.accordeon.cumulativeOffset()[0];
            var top = this.accordeon.cumulativeOffset()[1];
            var dimensions = this.accordeon.getDimensions();
            var mouse_x = e.pointerX();
            var mouse_y = e.pointerY();
            if ((mouse_x < left || mouse_x > left + dimensions.width) || (mouse_y < top || mouse_y > top + dimensions.height)) {
                this._refreshHotzone(this.activeimage);
            }
        }
    }
});