var dotEditorObj = {} 
var dotEditorUtil = {

    // Add event
    addEvent: function(object, eventName, fn) {
        if (document.addEventListener) object.addEventListener(eventName, fn, false);
        else object.attachEvent('on' + eventName, fn);
    },

    // Get the computed style stypeProperty of element
    getStyle: function (element,styleProperty)
    {
        var result = null;
	    if (element.currentStyle)
		    result = element.currentStyle[styleProperty];
	    else if (window.getComputedStyle)
		    result = window.getComputedStyle(element,null).getPropertyValue(styleProperty);
		if(result == 'undefined') result = null;
	    return result;
    },

    // Set cookie. Expires defaults to 24 hours.
    setCookie: function(name, value, expires) {
        if (!expires) {
            expires = new Date();
            expires.setDate(expires.getDate() + 1);
        }
        var curCookie = name + "=" + escape(value) + "; path=/; " +
            (expires == 'session' ? '' : "expires=" + expires.toGMTString() + "; ");
        document.cookie = curCookie;
    },

    // Get cookie
    getCookie: function(name) {
        var dc = document.cookie;
        var prefix = name + "=";
        var begin = dc.indexOf("; " + prefix);
        if (begin == -1) { begin = dc.indexOf(prefix); if (begin != 0) return null; }
        else begin += 2;
        var end = document.cookie.indexOf(";", begin);
        if (end == -1) end = dc.length;
        return unescape(dc.substring(begin + prefix.length, end));
    },
    
    //Get's the top left co-ordinate of an element
    getPosition: function(element) {
        var curleft = curtop = 0;
        if (element.offsetParent) {
            curleft = element.offsetLeft;
            curtop = element.offsetTop;
            while (element = element.offsetParent) {
                curleft += element.offsetLeft;
                curtop += element.offsetTop;
            }
        }
        return { left: curleft, top: curtop };
    },
    
    // Get's the current domain name
    currentDomain: function() {
        var d = document.location + '';
        return d.substr(0, 8 + d.substr(8).indexOf('/'));
    }
}

dotEditorObj.devToolbar = function() {
    var self = this;
    this.container = null;
    this.innerContainer = null;
    this.maxButton = null;
    this.states = { visible: 0, hidden: 1 }
    this.state = this.states.visible;
    this.timeout = false;
    this.size = 0;
    this.fullHeight = 0;
    
    // Calcualte body background position (oritentation = string: x, y).  Return result object with px or % - y-value must be px!!!
    this.getBackgroundPosition = function(orientation) {
        var result = dotEditorUtil.getStyle(document.body, 'backgroundPosition' + orientation.toUpperCase());
        if(result == '' || result == null) result = dotEditorUtil.getStyle(document.body, 'background-position-' + orientation);
        if(result == '') result = '0px';
        return { value: result.replace(/(px|%)/gi, '') * 1, type: result.indexOf('px') > -1 || orientation == 'y' ? 'px' : '%' };
    }
    
    // Calculte body margin top
    this.getBackgroundMarginTop = function() {
        var result = dotEditorUtil.getStyle(document.body, 'marginTop');
        if(result == '' || result == null) result = dotEditorUtil.getStyle(document.body, 'margin-top');
        return { value: result.replace(/(px|%)/gi, '') * 1, type: result.indexOf('px') > -1 ? 'px' : '%' };
    }
    
    // Set the initial style values for background position and body top margin
    this.setStyles = function() {
        this.bgPosX = this.getBackgroundPosition('x');
        this.bgPosY = this.getBackgroundPosition('y');
        this.bgMarginTop = this.getBackgroundMarginTop();
    }

    // Set the body of the document to account for the toolbar
    this.setBodyState = function(offset) {
        if(offset == null) offset = this.state == this.states.visible ? this.fullHeight : 0;
        document.body.style.marginTop = (this.bgMarginTop.value + offset) + this.bgMarginTop.type;
        document.body.style.backgroundPosition = this.bgPosX.value + this.bgPosX.type + ' ' + (this.bgPosY.value + offset) + this.bgPosY.type;
        //alert(document.body.style.marginTop + ", " + document.body.style.backgroundPosition);
    }

    // Initialise the object
    this.init = function() {
        this.container = document.getElementById('dePI_xcontainer');
        
        if(this.container != null) {
            this.innerContainer = document.getElementsByTagName('div')[0];
            
            this.container.style.display = 'block';
            
            this.fullHeight = self.container.offsetHeight;
            this.setStyles();
            if(dotEditorUtil.getCookie('de_toolbarstate') != null) this.state = dotEditorUtil.getCookie('de_toolbarstate') * 1;
            
            if(dotEditorUtil.getCookie('de_insession') == null && this.state == this.states.visible) {
                this.size = 1;
                this.container.style.display = 'none';
                this.timeout = setTimeout(function(){self.animate();self.createMinMax();self.setButtonStyle();}, 750);
            } else {
                this.createMinMax();
                this.setButtonStyle();
                this.animate();
            }
            
            dotEditorUtil.setCookie('de_insession', true, 'session');
            
            //this.smallGraph = document.getElementById('dePI_FreqStats_Small');
            //document.body.appendChild(this.largeGraph = document.createElement('div'));
            //this.largeGraph.appendChild(document.getElementById('dePI_FreqStats_Large'));
            //this.largeGraph.className = 'dePI_xlargegraph';
            //this.largeGraph..style.display = 'none';
            //if(this.smallGraph) this.smallGraph.onclick = this.largeGraph.onclick = this.toggleLargeGraph;
        }
    }

    // Toggle the larger graph on and off
    /*this.toggleLargeGraph = function() {
        self.largeGraph.style.display = (self.largeGraph.style.display == 'block') ? 'none' : 'block';
        var p = dotEditorUtil.getPosition(self.smallGraph);
        self.largeGraph.style.left = (p.left - 294) + 'px';
    }*/
    
    // Set up expand/collapse button
    this.createMinMax = function() {
        document.body.appendChild(this.minMaxBG = document.createElement('div'));
        this.minMaxBG.className = 'dePI_xminmax dePI_xmaxbg';
        
        document.body.appendChild(this.maxButton = document.createElement('div'));
        this.maxButton.className = 'dePI_xminmax dePI_xmax';
        this.maxButton.onclick = this.minMaxClick;
        self.setMinMaxPos();
        dotEditorUtil.addEvent(window, 'resize', self.setMinMaxPos);
    }
    
    this.setMinMaxPos = function() {
        var l = dotEditorUtil.getPosition(document.getElementById('dePI_xedit')).left;
        self.minMaxBG.style.left = (l - 30) + 'px';
        self.maxButton.style.left = (l - 33) + 'px';
    }
    
    // Set the min/max button style, depending on state
    this.setButtonStyle = function() {
        this.maxButton.className = 'dePI_xminmax ' + (this.state == this.states.visible ? 'dePI_xmin' : ' dePI_xmax');
        if(this.state == this.states.visible) {
            this.maxButton.className = 'dePI_xminmax ' + 'dePI_xmin';
            this.maxButton.innerHTML = 'Collapse'
        } else {
            this.maxButton.className = 'dePI_xminmax ' + 'dePI_xmax';
            this.maxButton.innerHTML = 'Expand'
        }
    }

    // Min/max button clicked;    
    this.minMaxClick = function() {
        self.state = self.state == self.states.visible ? self.states.hidden : self.states.visible;
        self.setButtonStyle();
        clearTimeout(self.timeout);
        self.size = 1;
        dotEditorUtil.setCookie('de_toolbarstate', self.state + '');
        self.timeout = setTimeout(self.animate, 10);
        return false;
    }
    
    // Animate open/close of toolbar
    this.animate = function() {
        self.container.style.display = 'block';
        self.size = self.size - 0.1;
        if(self.size < 0) self.size = 0;
        
        var y = Math.sin((1-self.size) * (Math.PI/2));
        y = Math.sin(y * (Math.PI/2));
        
        if(self.state != self.states.visible) y = 1 - y;

        var y2 = y;
        y = Math.round(self.fullHeight * y);
                
        self.container.style.opacity = (y2);
        self.container.style.marginTop = (-(self.fullHeight - y)) + 'px';
        self.setBodyState(y);
        
        if(self.size != Math.round(self.size)) self.timeout = setTimeout(self.animate, 20);
    }
    
    this.init();
}

dotEditorUtil.addEvent(window, 'load', function() { new dotEditorObj.devToolbar() });