/** 
 * @projectDescription	User Interface class, a series of mostly static functions.
 *
 * @author 	Paul Bernhardt bernhardtpaul@gmail.com
 * @version 	0.4
 */
console.log("Parsing UIManager");
dojo.declare("UIManager", null, {

    mapDiv: "mapDiv",
    
    _upEvent: null,
    _mapBlocker: null,
    _timer: null,
    
    /**
     * @classDescription InterfaceManager.
     * @param {documentElement} node Node to set up blocker on. After setup, the blocker will remain inactive until block() is called.
     * @constructor
     */
    constructor: function(mapDiv){
        this.mapDiv = mapDiv;
        //this.taskManager = taskMgr;
        this._mapBlocker = new InvisiBlocker(this.mapDiv);
        this.makeUIEventConnections();
    },
    


    
    /**
     * makeEventConnections create event handlers for the usual dojo suspects.
     * NOTE: You are going to need to add all your UI elements which are going to conflict with the esri map object.
     * TODO: either handle more types, or just make this part of the application.
     */
    makeUIEventConnections: function(){
    
        console.log("makeUIEventConnections started.");
        
        dojo.connect(window, "resize", dojo.hitch(this, this.resizeOnce));
        
        // In case there are no other handlers for this. A good example is the firebug window opening and closing.
        dojo.connect(dijit.byId("mapDiv"), "onResize", dojo.hitch(this, this.resizeOnce));
        
        var x = this;
        dojo.query(".dijitSplitter").forEach(function(splitter){
            dojo.connect(splitter, "onmousedown", dojo.hitch(x, function(){
                console.log("executing splitterdown");
                console.log(this);
                this.draggingResize();
            }));
        });
        dojo.query(".dojoxExpandoTitle").forEach(function(splitter){
            dojo.connect(splitter, "onmousedown", dojo.hitch(x, function(){
                console.log("executing titlepaneclick");
                console.log(this);
                this.resizeOnce();
            }));
        });
        
        console.log("makeUIEventConnections completed.");
    },
    
    /**
     * displayUI function run when the setup has completed. make components visible, fade out loadingDiv.
     *
     */
    displayUI: function(){
    
        dojo.style(dojo.byId("bc"), "visibility", "visible");
        
        dojo.fadeOut({
            node: "loadingDiv",
            duration: 1000
        }).play();
        
        setTimeout(dojo.hitch(this, function(){
            this.blockMap(false);
            dojo.style("loadingDiv", "display", "none");
            console.log("application displayed.")
        }), 1000);
    },
    
    /**
     * makeStatusDiv loading message displayer.Create a display message (message) to the doc element (divNode) and place the spinner if desired (isLoading)
     *
     * TODO: Add blocking events.
     *
     * @param {Object,String} divNode Node to place message in
     * @param {String} message The text to appear in the node
     * @param {Boolean} isLoading If true includes a spinner
     */
    makeStatusDiv: function(divNode, message, isLoading){
    
        destDiv = dojo.byId(divNode);
        destDiv.innerHTML = "";
        dojo.style(destDiv, "display", "block");
        dojo.fadeIn({
            node: divNode,
            duration: 500
        }).play();
        console.log("making Loading Div: " + divNode + ":" + message + ". Spinner:" + isLoading);
        var loadingDiv = document.createElement("div");
        dojo.attr(loadingDiv, "class", "box");
        dojo.style(loadingDiv, "width", "220px");
        dojo.style(loadingDiv, "padding", "10px");
        loadingDiv.appendChild(document.createElement("br"));
        messageLabel = document.createElement("label");
        messageLabel.innerHTML = "<b style='font-size: 100%; '>" + message + "</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"; // ew.
        loadingDiv.appendChild(messageLabel);
        if (isLoading) {
            spinner = document.createElement("img")
            dojo.attr(spinner, "src", "images/loading.gif")
            dojo.style(spinner, "height", "16px");
            dojo.style(spinner, "padding", "0px");
            loadingDiv.appendChild(spinner);
        }
        loadingDiv.appendChild(document.createElement("br"));
        loadingDiv.appendChild(document.createElement("br"));
        dojo.byId(divNode).innerHTML = ""
        dojo.byId(divNode).appendChild(loadingDiv);
    },
    
    /**
     * Fade out, wipeout, null, and display none the div (divNode) passed in.
     * @param {Object,String} divNode to destroy
     */
    zapDiv: function(divNode){
        /* Insert your fancy fade and wipe functions here. Or Dont.. */
        dojo.style(dojo.byId(divNode), "display", "none");
    },
    
    /**
     * an Event has started which may pass over the map component which will override the over event. connects the onmousup event
     */
    draggingResize: function(){
        console.log("draggingResize started");
        this.blockMap(true);
        //this.upEvent = dojo.connect(window, "onmouseup", draggingStop);
        this._upEvent = dojo.connect(dojo.body(), "onmouseup", dojo.hitch(this, this.draggingStop));
        console.log("attachedwindowevent");
        
    },
    
    /**
     * the onmouseup event handler set up in draggingResize()
     */
    draggingStop: function(){
        console.log("draggingStop called");
        console.log(this);
        this.blockMap(false);
        dojo.disconnect(this._upEvent);
        console.log("disconnected");
        this.mapResize();
    },
    
    /**
     * Display the blocker if isBusy is true, or fade it out if false.
     * requires knowledge of the mapLoadingDiv.
     * @param {bool} isBusy if true disable map if false enable map
     */
    blockMap: function(isBusy){
    
        if (isBusy) {
            dojo.style(dojo.byId("mapLoadingDiv"), "display", "block");
            //esri.show(dojo.byId("mapLoadingDiv"));
            dojo.fadeIn({
                node: "mapLoadingDiv",
                duration: 300
            }).play();
            this._mapBlocker.block();
            console.log("map declared busy.");
            
        }
        else {
            dojo.fadeOut({
                node: "mapLoadingDiv",
                duration: 500
            }).play();
            setTimeout(function(){
                dojo.style(dojo.byId("mapLoadingDiv"), "display", "none");
            }, 800);
            
            try {
                this._mapBlocker.unblock();
            } 
            catch (e) {
                console.log("caught: it would appear map Blocker was closed prior to creation.");
            }
            console.log("map busy declaration dropped");
        }
    },
    
    /**
     * resize the map Object
     */
    mapResize: function(){
    try {
		map.reposition();
		map.resize();
		
	}catch(e) {
		alert(console.log('Resize Exception: ' + e));
	}
        console.log("map Resized");
    },
    
    /**
     * Use this event instead of mapResize, to make sure that you arent calling it over and over.
     */
    resizeOnce: function(){
        clearTimeout(this._timer);
        this._timer = setTimeout(dojo.hitch(this, function(){
            this.mapResize();
        }), 800);
    }
    
    
    
});
console.log("Succesfully Parsed UIManager");