/**
 * @author Fahrettin Kutyol
 * This is the rebuilt for dojo 1.2.x of the former 0.4 widget by Josip Delic.
 * This widget had to be coded from scratch, because the fundamental design of widgets
 * had been changed since dojo 0.9.x. Unlike to the old version this widget doesn't extend
 * a tooltip widget.
 *
 *  Summary:
 *  loads content via xhr and provides the content by a roll out and roll back animation.
 *
 *  Receiving tag attributes:
 *  'href' : The url where to fetch the information pane content
 *  'connectId': The node where to connect main actions
 */
dojo.provide("haufedojo.widget.mybar");

// debug now goes that way.
console.debug("providing haufe.widget.mybar");

// requirering the refactored widget superclass
dojo.require("dijit.z_Widget");
dojo.require("dojo.fx");
// building the widget class
dojo.declare("haufedojo.widget.mybar", //our subclass
 dijit.z_Widget, // superclasses
{
    href: "", // get information from this url
    connectId: "", // bind primary mouse events to this id - EOF receiving tag attributes
    connectNode: undefined, // node of the connectId
    endHeight: 0, // Height where the animation ends
    comingFromContent: false,// if a mouse over got fired this is how to test if it's reffering from the information pane
    rollBackTimer: undefined, // the timer to delay the roll back animation
    rollBackDelay: 200, // delay until roll back gets fired
    shadowNode: undefined, // shadow node
    shadowMargin: 3, // margin of the shadow

    // Called after Constructor
    postCreate: function(){
        this.importCss("/haufedojo/widget/mybarStyles.css");
        this.domNode.className = "dojoTooltipMyBar";
        this.connectNode = dojo.byId(this.connectId);
        this.animController = new AnimController();
        this.isLeftBoundContent = this.connectId == "myBaronlineAbos"; // quick and dirty check
        // creating the shadow element
        this.shadowNode = document.createElement("div");
        this.shadowNode.className = "myBarShadow"
        dojo.body().appendChild(this.shadowNode);

        // Callback function to set xhr response and adjust some boundings
        var callback = dojo.hitch(this, function(response, ioArgs){
            this.domNode.innerHTML = response;
            dojo.body().appendChild(this.domNode);
            this.setViewBounds();
            // binding event if window resize
            this.connect(window, "onresize", "windowResize");
            this.windowResize()
            this.connectMouseEvents();
        })
        // Loading the content using href
        dojo.xhrGet({
            url: this.href,
            load: callback,
            error: function(response, ioArgs){
                console.log("Failed XHR: ", response, ioArgs);
            }
        });

    },
    // Setting the position of the information pane and of the shadow box
    setViewBounds: function(){
        var connectBounds = dojo.coords(this.connectNode, true);
        var contentBounds = dojo.coords(this.domNode, true);
        if (contentBounds.w > 200) {
            var serviceStartNodes = dojo.query(".serviceStart");
            dojo.style(serviceStartNodes[0], {
                "overflowY": "auto",
                "overflowX": "hidden"
            });
        }
        this.endHeight =contentBounds.h
        this.shadowNode.style.width = contentBounds.w + "px";
        this.shadowNode.style.height = "0px";
        this.domNode.style.height = "0px";

    },
    connectMouseEvents: function() {
        this.connect(this.connectNode, "onmouseenter", "onMouseEnter");
        this.connect(this.connectNode, "onmouseleave", "onMouseLeave");
        this.connect(this.domNode, "onmouseenter", "onMouseEnter");
        this.connect(this.domNode, "onmouseleave", "onMouseLeave");
    },

    onMouseEnter: function() {
        if(typeof this.delayedCallback !="undefined") {
            window.clearTimeout(this.delayedCallback)
            delete this.delayedCallback
        }else {
            this.startRollDown()
        }
    },
    onMouseLeave: function() {
        this.delayedCallback = window.setTimeout(dojo.hitch(this,"startRollUp"),300);
    },
    // Internal widget css requirement doesn't exist anymore in dojo 1.x
    // This is a hack to import a css file
    importCss: function(fileName){
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", fileName);
        if (typeof fileref != "undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref);
    },

    // Connect node mouse over
    startRollDown: function() {
        var rollDownAnim = dojo.fx.combine([
            dojo.animateProperty({
                node: this.domNode,
                properties: {
                    height: {
                        end: this.endHeight,
                        unit: 'px'
                    }
                },
                onPlay: dojo.hitch(this, function(){
                    this.domNode.style.visibility = "visible";
                })
            }),
            // shadow roll out animation
            dojo.animateProperty({
                node: this.shadowNode,
                properties: {
                    height: {
                        end: this.endHeight + this.shadowMargin+ 8 ,
                        unit: 'px'
                    }
                },
                onPlay: dojo.hitch(this, function() {
                    this.shadowNode.style.visibility = "visible";
                })
            })
        ])
        this.animController.addAnimation(rollDownAnim)
    },
    startRollUp: function() {
        delete this.delayedCallback
        // content roll back animation
        var rollUpAnim = dojo.fx.combine([
            dojo.animateProperty({
                node: this.domNode,
                properties: {
                    height: {
                        end: '0',
                        unit: 'px'
                    }
                },
                onPlay: dojo.hitch(this, function(){
                }),
                onEnd: dojo.hitch(this, function(){
                    this.domNode.style.visibility = "hidden";
                })
            }),
            // shadow roll back animation
            dojo.animateProperty({
                node: this.shadowNode,
                properties: {
                    height: {
                        end: '0',
                        unit: 'px'
                    }
                },
                onPlay: dojo.hitch(this, function(){
                }),
                onEnd: dojo.hitch(this, function(){
                    this.shadowNode.style.visibility = "hidden";
                })
            })
        ])
        this.animController.addAnimation(rollUpAnim)
    },
    // fired if window resizes. adjusting the left position
    windowResize: function(evt) {
        var bounds = dojo.coords(this.connectNode,true);
        this.shadowNode.style.top = (bounds.y + bounds.h + this.shadowMargin) + "px";
        this.domNode.style.top = (bounds.y + bounds.h)-1 + "px";

        if(this.isLeftBoundContent) {
            this.domNode.style.left = bounds.x + "px";
            this.shadowNode.style.left = (bounds.x + this.shadowMargin) + "px";
        } else {
            this.domNode.style.left = bounds.x - (this.domNode.offsetWidth - bounds.w)+ "px";
            this.shadowNode.style.left = bounds.x + - (this.domNode.offsetWidth - bounds.w) + this.shadowMargin + "px";

        }
    }
});