/*
 * Simple prototype based three state rollover class
*/
var Roll = Class.create();
Roll.prototype = {
    initialize: function (element, options) {
        this.element = element;
        this.images = [3];
        this.active = false;
        this.setOptions(options);
        this.setup();
    },
    setOptions: function (options) {
        this.options = {
            over: '-over',
            active: '-active',
            inactive: ''
        };
        Object.extend(this.options, options || {});
    },
    setup: function () {
        if (this.element == undefined)
            return;
        // load images for states
        this.images[0] = new ImgLoad(this.buildImgName(this.element.src, this.options.inactive));
        this.images[1] = new ImgLoad(this.buildImgName(this.element.src, this.options.over));
        this.images[2] = new ImgLoad(this.buildImgName(this.element.src, this.options.active));
        // sink events
        Event.observe(this.element, 'mouseover', this.onMouseOver.bindAsEventListener(this));
        Event.observe(this.element, 'mouseout', this.onMouseOff.bindAsEventListener(this));
    },
    buildImgName: function (uri, state) {
        dot = uri.lastIndexOf('.');
        pfx = uri.substr(0, dot);
        ext = uri.substr(dot);
        if (pfx.endsWith(this.options.inactive)) {
            this.active = false;
            pfx = pfx.substr(0, pfx.length - this.options.inactive.length);
        }
        if (pfx.endsWith(this.options.active)) {
            this.active = true;
            pfx = pfx.substr(0, pfx.length - this.options.active.length);
        }
        if (pfx.endsWith(this.options.over)) {
            this.active = false;
            pfx = pfx.substr(0, pfx.length - this.options.over.length);
        }
        return pfx + state + ext;
    },
    update: function (state) {
        if (this.active && this.images[2] != undefined && this.images[2].isLoaded()) {
            this.element.src = this.images[2].getSrc();
        }else if (this.images[state] != undefined && this.images[state].isLoaded()) {
            this.element.src = this.images[state].getSrc();
        }
    },
    setActive: function (onoff) {
        this.active = (onoff == true) ? true : false;
        this.update(0);
    },
    onMouseOver: function (e) {
        this.update(1);
    },
    onMouseOff: function (e) {
        this.update(0);
    }
}
// Rollover invoke helper method
Element.addMethods({
    roll: function (element) {
        new Roll(element);
    }
});
/*
* Simple prototype based image loading class
*/
var ImgLoad = Class.create();
ImgLoad.prototype = {
    initialize: function (uri) {
        this.image = new Image();
        this.loaded = false;
        // sink events
        Event.observe(this.image, 'load', this.onLoad.bindAsEventListener(this));
        Event.observe(this.image, 'error', this.onError.bindAsEventListener(this));
        Event.observe(this.image, 'abort', this.onError.bindAsEventListener(this));
        // start load image
        this.image.src = uri;
    },
    isLoaded: function () {
        return this.loaded;
    },
    getSrc: function () {
        return this.image.src;
    },
    onLoad: function () {
        this.loaded = true;
    },
    onError: function () {
        this.loaded = false;
    }
}

/*
* Creates a seesaw to normalize the height of an element locked in step with another element
*/
var SeeSaw = Class.create();
SeeSaw.prototype = {
    initialize: function (element, options) {
        this.element = element;
        this.setOptions(options);
        // grab the element we want to follow
        if ($(this.options.alttarget) == undefined) {
            this.target = $(this.options.target);
        } else {
            this.target = $(this.options.alttarget);
        }
        this.origheight = this.element.getDimensions().height;
        // sink events
        Event.observe(window, 'resize', this.onResize.bindAsEventListener(this));
        Event.observe(document, 'custom:resize', this.onResize.bindAsEventListener(this));
        this.onResize();
    },
    setOptions: function (options) {
        this.options = {
            target: 'main',
            alttarget: 'additonal-content'
        };
        Object.extend(this.options, options || {});
    },
    onResize: function () {
        var elementOffset = this.element.cumulativeOffset();
        var elementDim = this.element.getDimensions();
        var targetOffset = this.target.cumulativeOffset();
        var targetDim = this.target.getDimensions();
        var eCur = elementOffset.top + elementDim.height;
        var tCur = targetOffset.top + targetDim.height;
        var delta = tCur - eCur;
        if (delta < 0) {
            this.target.style.height = (targetDim.height + -delta - 30) + 'px';
        } else {
            this.element.style.height = (elementDim.height + delta) + 'px';
        }
    }
}

// SeeSaw invoke helper method
Element.addMethods({
    ss: function (element, options) {
        new SeeSaw(element, options);
    }
});