//=========================================================================================
//    Tooltips
//=========================================================================================
ayondo.ToolTip = function() {
    ayondo.ToolTip.initializeBase(this);
    this.initialize();
}
ayondo.ToolTip.prototype = {
    initialize: function() {
        ayondo.ToolTip.callBaseMethod(this, 'initialize');
        this.Text = "";

        // Preloaded Images
        this.left_top = new Image();
        this.left_top.src = "Images/GuidedTour/left_top.gif";
        this.left_bottom = new Image();
        this.left_bottom.src = "Images/GuidedTour/left_bottom.gif";
        this.right_top = new Image();
        this.right_top.src = "Images/GuidedTour/right_top.gif";
        this.right_bottom = new Image();
        this.right_bottom.src = "Images/GuidedTour/right_bottom.gif";
        this.south = new Image();
        this.south.src = "Images/GuidedTour/arrow_bottom.gif";
        this.west = new Image();
        this.west.src = "Images/GuidedTour/arrow_left.gif";
        this.north = new Image();
        this.north.src = "Images/GuidedTour/arrow_top.gif";
        this.east = new Image();
        this.east.src = "Images/GuidedTour/arrow_right.gif";
 
    },
    /// <summary>
    //  show tooltip
    /// </summary>
    show: function(e) {
        // second part of id is text label
        var idTags = e.target.id.split('_');
        var textTag = idTags[1];

        var toolTipObj = $get("ToolTip");
        toolTipObj.style.visibility = "visible";

        var xmlNode = Loc.Dat.login;
        TOOLTIP.Text = xmlNode[textTag];

        var c = "<div id='TT1' class='TooltipDiv1'>" + TOOLTIP.Text + "</div>";
        c += "<div id='TT2' class='TooltipDiv2'></div>"; ;
        toolTipObj.innerHTML = c;

        var _h = Sys.UI.DomElement.getBounds($get("ToolTip")).height + 4;
        var _w = 20;

        toolTipObj.style.top = (e.clientY + 0) - _h + "px";
        toolTipObj.style.left = e.clientX - _w + "px";
    },
    /// <summary>
    //  hide tooltip
    /// </summary>
    hide: function() {
        $get("ToolTip").style.visibility = "hidden";
        $get("ToolTip").innerHTML = "";
        TOOLTIP.Text = "";
    },

    addDisplayWidget: function(id, x, y, dir, out_text) {
        var c = this.createDisplayWidget(id, x, y, dir, out_text);
        $get("GuidedTour").innerHTML += c;
    },
    createDisplayWidget: function(id, x, y, dir, out_text) {
        var c = "<div id='" + "_div_" + id + "' style='color:#fff;position:absolute; left:" + x + "px; top:" + y + "px;width: 200px; height:100px;'>";
        c += "<table id='" + "_table_" + id + "'  style='background-color:transparent;font-size:11px;border-collapse:collapse;' width='155' height='50' border='0' cellpadding='0' cellspacing='0'>";
        if (dir == "n") {
            c += "<tr><td></td><td  width='7' style='background-color:transparent;'></td><td align='center'><img src='" + this.north.src + "' alt=''></td> <td  width='7'></td><td></td></tr>";
        }
        c += "<tr><td  style='height:7px;'></td><td  style='width:7px;height:7px;'><img src='" + this.left_top.src + "' height='7' alt=''></td>";
        c += "<td style='background-color:#000;height:7px;'></td>";
        c += "<td style='height:7px;'><img src='" + this.right_top.src + "' width='7' height='7' alt=''></td><td></td></tr>";
        c += "<tr><td valign='middle'>";
        if (dir == "w") {
            c += "<img src='" + this.west.src + "' alt=''>";
        }
        c += "</td><td style='background-color:#000;width:7px;'></td>";
        c += "<td id='" + "_td_" + id + "' align='left' style='background-color:#000;'>" + out_text + "</td>";
        c += "<td style='background-color:#000;width:7px;'></td><td valign='center'  style='width:7px;'><img src='" + this.east.src + "' alt=''></td></tr>";
        c += "<tr><td></td><td style='height:7px;'><img src='" + this.left_bottom.src + "' width='7' height='7' alt=''></td>";
        c += "<td style='background-color:#000;height:7px;'></td>";
        c += "<td style='height:7px;'><img src='" + this.right_bottom.src + "' width='7' height='7' alt=''></td><td></td></tr>";
        if (dir == "s") {
            c += "<tr><td></td><td  width='7' style='background-color:transparent;'></td><td align='center'><img src='" + this.south.src + "' alt=''></td> <td  width='7'></td><td></td></tr>";
        }
        c += "</table>";
        c += "</div>";

      
        return c;
    },


    dispose: function() {
        ayondo.ToolTip.callBaseMethod(this, 'dispose');
    }
}
ayondo.ToolTip.registerClass('ayondo.ToolTip', Sys.Component);