/**
 * Additional element function for use with prototype
 * 
 * (c) Alex Jasse / Skygate GmbH
 * 
 */

var functions = {

    /** 
     * Set image to an absolute position within document
     * 
     * Options:
     * x: X-Position
     * y: Y-Position
     * keepLayout: insert a clone of the element before the element to prevent 
     *             a collapse of the page-layout
     */
    setPosition: function(element) {
        element = $(element);
        
        var options = Object.extend({
            x:          0,
            y:          0,
            keepLayout: true
        }, arguments[1] || {})
        
        // Insert invisible clone of element in place of element
        if(options.keepLayout && !element.placeHolder) {
            
            var dummy = element.cloneNode(true);
            if(element.id) {
                dummy.id = element.id + '_dummy';
            }
            dummy.setOpacity(0);
            
            element.parentNode.insertBefore(dummy, element);
            element.placeHolder = dummy;
        }
        
        // Make element position absolute
        //new Position.absolutize(element);
        element.setStyle({
            left:     options.x + 'px',
            top:      options.y + 'px'
        });
        
        // If element is pinned, re-pin
        if(element.pinned) {
            element.unpin();
            element.pin();
        }
        
        return element;
    },

    /** 
     * Centers an element on screen
     */
    centerOnScreen: function(element) {
        element = $(element);

        // W/H of browser windw        
        var iWidth = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;
            
        var iHeight = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;

        // Scroll amount
        var scrollXOffset = window.pageXOffset
            || document.documentElement.scrollLeft
            || document.body.scrollLeft
            || 0;

        var scrollYOffset = window.pageYOffset
            || document.documentElement.scrollTop
            || document.body.scrollTop
            || 0;
        
        var x = ((iWidth  - element.getWidth())  / 2) + scrollXOffset;
        var y = ((iHeight - element.getHeight()) / 2) + scrollYOffset;
        
        element.setPosition({x: x, y: y})
        
        return element;
    },
    
    /**
     * Pin an element to it's position. 
     * Should provide a behaviour similar to 'position: fixed'
     * (which is not available in IE6)
     */
    pin: function(element) {
        element = $(element)  ;
        
        // get current (absolute) position of element
        var position = Position.page(element);
        
        // this will get called everytime the document is scrolled
        var onScroll = function() {
            var scrollXOffset = window.pageXOffset
                || document.documentElement.scrollLeft
                || document.body.scrollLeft
                || 0;
    
            var scrollYOffset = window.pageYOffset
                || document.documentElement.scrollTop
                || document.body.scrollTop
                || 0;
            
            element.setPosition({x: position[0] + scrollXOffset, y: position[1] + scrollYOffset});
        }
        
        onScroll();
        Event.observe(window, 'scroll', onScroll)
        element.pinObserver = onScroll;
        element.pinned = true;
        
        return element;
    },

    /**
     * Un-Pin an element
     */    
    unpin: function(element) {
        element = $(element);
      
        if(!element.pinned)   {
            return element;
        }
        
        Event.stopObserving(window, 'scroll', element.pinObserver);
        element.pinObserver = null;
        element.pinned = false;
    },
    
    /** 
     * Align an element to another element
     * 
     * Options:
     * hAlign: Horizontal alignment ('left', 'center', 'right'), default: 'center'
     * vAlign: Vertical alignment ('top', 'middle', 'bottom'), default: 'middle')
     */
    alignTo: function(element, element2) {
        element  = $(element);
        element2 = $(element2);
        
        var options = Object.extend({
            hAlign: 'center',
            vAlign: 'middle'
        }, arguments[2] || {});
        
        var offsetX = 0;
        var offsetY = 0;
        
        switch(options.hAlign) {
            case 'center':
                offsetX = (element2.getWidth() - element.getWidth()) / 2
                break;
                
            case 'right':
                offsetX = element2.getWidth() - element.getWidth();
                break;
        }
        
        switch(options.vAlign) {
            case 'middle':
                offsetY = (element2.getHeight() - element.getHeight()) / 2;
                break;
                
            case 'bottom':
                offsetY = element2.getHeight() - element.getHeight();
                break;
        }
        
        //new Position.absolutize(element);
        new Position.clone(element2, element, {
            setWidth  : false,
            setHeight : false,
            offsetLeft: offsetX,
            offsetTop : offsetY
        });
    },

    /** 
     * Block an element by layering a transparent <div> over it
     * 
     * Options:
     * color: Color of blocker element
     * opacity: Opacity of blocker element
     */
    block: function(element) {
        element = $(element);
        
        var style = Object.extend({
            color:    '#ffffff', 
            zIndex:   (element.style.zIndex) ? element.style.zIndex+1 : 5000, 
            position: 'absolute', 
            display:  'none', 
            opacity:  0.5
        }, arguments[1] || {});
        Object.extend(style, { backgroundColor: style.color });
        
        var blocker = null;
        if(element.blocker) {
            blocker = element.blocker;
        } else {
            var blockerId = 'blocker_' + new Date().getTime();
            while($(blockerId)) { blockerId = 'blocker_' + new Date().getTime(); }
            
            blocker = $(document.createElement('div'));
            blocker.id = $(blockerId);
            blocker.setStyle(style);
            document.body.appendChild(blocker);
        };

        new Position.clone(element, blocker);
        blocker.show();
        element.blocker = blocker;
        
        return element;
    },
    
    /** 
     * Unblock an element
     */
    unblock: function(element) {
        element = $(element);
        
        var blocker = element.blocker;
        if(blocker) {
            blocker.hide();
            blocker.remove();
            element.blocker = null;
        }
        
        return element;
    }
}
Element.addMethods(functions);

Object.extend(Array.prototype, {

    contains: function(value) { return(this.indexOf(value) != -1); }
	
});