Slider = function(container) {
    this.container = container;
    this.containerBounds = this.getBounds(this.container);
    this.items = container.getElementsByTagName('span');

    this.diff = 2
    this.speed = 25;

    this.timer = null;
    
    this.start = this.bindAsListener(this.startSlide, this);
    this.stop = this.bindAsListener(this.stopSlide, this);

    this.addEventListener(container, 'mouseover', this.stop);
    this.addEventListener(container, 'mouseout', this.start);

    this.start();
}

Slider.prototype = {
    startSlide : function() {
        for(var i=0; i<this.items.length; i++) {
            
            var itemBounds = this.getBounds(this.items[i]);
            this.setXY(this.items[i], (itemBounds.x - this.diff));

            if(this.containerBounds.x > (itemBounds.x + itemBounds.width)) {
                this.setXY(this.items[i], this.containerBounds.x + this.containerBounds.width);
            }
        }
        this.timer = setTimeout(this.start, this.speed);
    },

    stopSlide : function() {
        if(this.timer) {
            clearTimeout(this.timer);
        }
    },
    

    getXY : function(el) {
        if(el.parentNode == null || el.style.display == 'none') {
            return false;
        }

        var parent = null;
        var pos = [];
        var box;
        
        if(document.getBoxObjectFor) { 
            box = document.getBoxObjectFor(el);
            pos = [box.x, box.y];
        } else { 
            pos = [el.offsetLeft, el.offsetTop];
            parent = el.offsetParent;
            if(parent != el) {
                while (parent) {
                    pos[0] += parent.offsetLeft;
                    pos[1] += parent.offsetTop;
                    parent = parent.offsetParent;
                }
            }

            var ua = navigator.userAgent.toLowerCase();
            if(ua.indexOf('opera') != -1 || ua.indexOf('safari') != -1 && this.getStyle(el, 'position') == 'absolute') {
                pos[1] -= document.body.offsetTop;
            }
        }

        if(el.parentNode) {
            parent = el.parentNode;
        } else {
            parent = null;
        }

        while(parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') {
            pos[0] -= parent.scrollLeft;
            pos[1] -= parent.scrollTop;

            if(parent.parentNode) {
                parent = parent.parentNode;
            } else {
                parent = null;
            }
        }
        return {x:pos[0], y:pos[1]};
    },


    setXY : function(el, x, y) {
        var pageXY = this.getXY(el);
        if(pageXY == false) {
            return false;
        }
        var position = this.getStyle(el, 'position');
        if(!position || position == 'static') {
            el.style.position = 'relative';
        }

        var delta = {
            x : parseInt(this.getStyle(el, 'left'), 10),
            y : parseInt(this.getStyle(el, 'top'), 10)
        };
        if(isNaN(delta.x)) {delta.x = 0;}
        if(isNaN(delta.y)) {delta.y = 0;}
        if(x != null) {el.style.left = (x - pageXY.x + delta.x) + 'px';}
        if(y != null) {el.style.top = (y - pageXY.y + delta.y) + 'px';} 
        return true;
    },


    getStyle : function(el, property) {
        var value = null;
        var dv = document.defaultView;

        if(property == 'opacity' && el.filters) {
            value = 1;
            try{
                value = el.filters.item('alpha').opacity / 100;
            } catch(e) {}
        } else if(el.style[property]) {
            value = el.style[property];
        } else if(el.currentStyle && el.currentStyle[property]) {
            value = el.currentStyle[property];
        } else if(dv && dv.getComputedStyle) {
            var converted = '';

            for(i=0, len=property.length; i<len; ++i) {
                if(property.charAt(i) == property.charAt(i).toUpperCase()) {
                    converted = converted + '-' + property.charAt(i).toLowerCase();
                } else {
                    converted = converted + property.charAt(i);
                }
            }

            if(dv.getComputedStyle(el, '').getPropertyValue(converted)) {
                value = dv.getComputedStyle(el, '').getPropertyValue(converted);
            }
        }
        return value;
    },


    getBounds : function(el) {
        var xy = this.getXY(el);
        return {
            x : xy.x,
            y : xy.y,
            width : el.offsetWidth,
            height : el.offsetHeight
        };
    },


    addEventListener : function(element, eName, eFunc, useCapture) {
        useCapture = useCapture || false;

        if(element.addEventListener) {
            element.addEventListener(eName, eFunc, useCapture);
        }else if(element.attachEvent){
            element.attachEvent("on" + eName, eFunc);
        }
    },


    bindAsListener : function(func, obj) {
        return function(){
            return func.apply(obj, arguments);
        }
    }
}

window.onload = function() {
    new Slider(document.getElementById('imgBox'));
}