/**
 * User Interface Widgets
 *
 * Copyright: (c)2007 CK Web Technologies - http://www.ckweb.com.au/
 * Author:    Chris Knowles <chris.knowles@ckweb.com.au>
 * Version:   $Id: Widgets.js 33 2007-10-12 00:57:45Z Chris $
 */

if (!CKW) {
    var CKW = function(){};
}

CKW.Widgets = function(){};

CKW.Widgets.Tooltip = function(elm, text, params)
{
    this.elm = CKW.DOM.getElement(elm);
    this.fadeInTime = 100;
    this.fadeOutTime = 100;
    this.offsetTop = 20;
    this.offsetLeft = 0;
    if (params) {
        for (p in params) {
            this[p] = params[p];
        }
    }
    var self = this;
    this.html = CKW.DOM.create('div');
    this.html.className = "ckw-tooltip";
    this.html.style.position = 'absolute';  
    CKW.DOM.setContent(this.html, text);  
    this.timer = null;
    this.visible = false;
    CKW.Event.listen(this.elm, 'mouseover', function(e){self.show(e)});
    CKW.Event.listen(this.elm, 'mouseout', function(){self.remove()});
};

CKW.Widgets.Tooltip.prototype = 
{    
    show: function(e)
    {
        clearTimeout(this.timer);
        if (!this.visible) {
            //var coords = CKW.Event.getCoordinates(e);
            this.elm.position = CKW.Element.getPosition(this.elm);
            this.html.style.display = 'none';
            this.html.style.left = this.elm.position.left + this.offsetLeft + "px";
            this.html.style.top = this.elm.position.top + this.offsetTop + "px";
            this.elm.parentNode.appendChild(this.html);
            this.timer = setTimeout(function(){CKW.FX.fadeIn(self.html)}, this.fadeInTime);
            var self = this;
            CKW.Event.listen(self.html, 'mouseover', function(){
                clearTimeout(self.timer);
                self.visible = true;
            });
            CKW.Event.listen(self.html, 'mouseout', function(){self.remove()});
        }
        
    },
        
    remove: function()
    {
        var self = this;
        clearTimeout(self.timer)
        this.timer = setTimeout(function(){CKW.FX.fadeOut(self.html); self.visible = false;}, this.fadeOutTime);
    }
};

CKW.Widgets.Tooltips = 
{
    params: null,
    
    setParams: function(params)
    {
        this.params = params;
    },
    
    set: function(elm, text)
    {
        if (typeof(elm) == 'object') {
            for (tooltip in elm) {
                new CKW.Tooltip(tooltip, elm[tooltip], this.params);
            }
        } else {
            new CKW.Tooltip(elm, text, this.params);
        }
    }
};

CKW.Widgets.TabbedContentPanel = function(elm, tabTag, selected)
{    
    this.elm = CKW.DOM.getElement(elm);
    this.tabTag = tabTag;
    this.selected = selected;
    if (!this.elm) {
        //throw new Error("Trying to create a tabset on a non-existent id");
        return;
    }
    this.load();
};

CKW.Widgets.TabbedContentPanel.prototype = 
{
    load: function()
    {
        this.elm.id = this.elm.id + '-tabs';
        this.elm.style.position = 'relative';
        CKW.DOM.appendClass(this.elm, 'tabSet');
        
        this.tabs = [];
        this.panes = [];
        var div, tmpElm, i = -1, content = [];
        
        for(var child = this.elm.firstChild; child != null; child = child.nextSibling) {
           if (child.nodeType == 1) {
               if (child.tagName.toLowerCase() == this.tabTag) {
                   CKW.DOM.appendClass(child, 'tab');
                   if (child.title) {
                       var heading = CKW.DOM.create(this.tabTag);
                       CKW.DOM.setContent(heading, CKW.DOM.getContent(child));
                       CKW.DOM.setContent(child, child.title);
                   }
                   this.tabs.push(child);
                   if (i != -1) {
                       this.panes[i] = div;
                   }
                   div = CKW.DOM.create('div');
                   div.className = 'pane';
                   if (heading) {
                       div.appendChild(heading);
                   }
                   i++;
                } else {
                    if (child.className.toString() != 'panel') {
                        tmpElm = child.cloneNode(true);
                        div.appendChild(tmpElm);
                        content.push(child);
                    }
                }
            }
        }
        this.panes[i] = div;
        for (var i = 0; i < content.length; i++) {
            CKW.DOM.remove(content[i]);
        }
        
        CKW.DOM.appendClass(this.tabs[0], 'first-tab');
        CKW.DOM.appendClass(this.tabs[this.tabs.length - 1], 'last-tab');
        
        this.panel = CKW.DOM.create('div');
        CKW.DOM.appendClass(this.panel, 'panel');
        this.elm.appendChild(this.panel);
        this.panel.style.clear = 'both';
        
        this.curTab = null;
        this.curPane = null;
        
        var self = this;
        CKW.Event.listen(this.elm, 'click', function(e){self.togglePanes(e)});
        this.setPanel(this.selected - 1);
    },

    togglePanes: function(e)
    {
        var tab = e.target || e.srcElement;
        if (CKW.DOM.hasClass(tab, 'tab') && !CKW.DOM.hasClass(tab, 'tabSet')) {
            var index = -1;
            for (var i = 0; i < this.tabs.length; i++) {
                if (this.tabs[i] == tab) {
                    index = i;
                    break;
                }
            }
            this.setPanel(index);
        }
        CKW.Event.kill(e);
    },
    
    setPanel: function(index)
    {
        if (index >= 0 && index <= this.tabs.length - 1) {
            if (this.curTab) {
                CKW.DOM.removeClass(this.curTab, 'selected');
            }
            this.curTab = this.tabs[index];
            CKW.DOM.appendClass(this.curTab, 'selected');
            this.curPane = this.panes[index];
            var div = this.curPane.cloneNode(true);
            
        }  else {
            var div = CKW.DOM.create('div');
            div.className = 'pane';
        }
        this.panel.innerHTML = "";
        this.panel.appendChild(div);
    }
};

CKW.Widgets.FloatingPanel = function(attributes)
{
    for (att in attributes) {
        this[att] = attributes[att];
    }
    this.build();
};

CKW.Widgets.FloatingPanel.prototype =
{
    showLoading: function(imgSrc)
    {
        CKW.DOM.setContent(this.elm, "");
        var img = CKW.DOM.create('img');
        img.src = imgSrc;
        img.style.position = 'absolute';
        img.style.left = '48%';
        img.style.top = '48%';
        this.elm.appendChild(img);
    },
    
    show: function()
    {
        if (this.fadeIn) {
            CKW.FX.fadeIn(this.elm);
        } else {
            this.elm.style.display = 'block';
        }
    },
    
    hide: function(func)
    {
        if (this.fadeOut) {
            CKW.FX.fadeOut(this.elm);
        } else {
            this.elm.style.display = 'none';
        }
        func();
    },
    
    build: function()
    {
        this.elm = CKW.DOM.create('div');
        this.elm.id = this.id;
        this.elm.style.position = 'absolute';
        this.elm.style.display = 'none';
        this.elm.style.width = this.width;
        this.elm.style.height = this.height;
        this.elm.style.top = this.top;
        this.elm.style.zIndex = 100;
        if (this.left) {
            this.elm.style.left = this.left;
        }
        if (this.right) {
            this.elm.style.right = this.right;
        }
        CKW.DOM.id(this.parentId).appendChild(this.elm);
    }
    
};

/**
 *  TO DO:
 *  1. change listener to the whole menu if not too hard
 *     and doesn't require different method 
 *  2. add delay to mouseout
 */
CKW.Widgets.Menu = function(nav)
{
    nav = CKW.DOM.getElement(nav);
    var navItems = CKW.DOM.tags('li', nav);
    for (var i = 0; i < navItems.length; i++) {
        if (navItems[i].parentNode != nav) {
            navItems[i].className += " hideNav";
        }
        navItems[i].onmouseover = function()
        {
            CKW.DOM.removeClass(this, 'hideNav');
            CKW.DOM.appendClass(this, 'showNav');
            var atag = CKW.DOM.tags('a', this)[0];
            if (atag) {
                CKW.DOM.appendClass(atag, 'selected');
            }
            var span = CKW.DOM.tags('span', this)[0];
            if (span) {
                CKW.DOM.appendClass(span, 'selected');
            }
        };
        navItems[i].onmouseout = function()
        {
            CKW.DOM.removeClass(this, 'showNav');
            CKW.DOM.appendClass(this, 'hideNav');
            var atag = CKW.DOM.tags('a', this)[0];
            if (atag) {
                CKW.DOM.removeClass(atag, 'selected');
            }
            var span = CKW.DOM.tags('span', this)[0];
            if (span) {
                CKW.DOM.removeClass(span, 'selected');
            }
            //var self = this;
            //this.timer = window.setTimeout(function(){CKW.Util.hideNav(self)}, 600);
        };
        /*
        navItems[i].onclick = function()
        {
            CKW.DOM.removeClass(this, 'showNav');
            CKW.DOM.appendClass(this, 'hideNav');
            var atag = CKW.DOM.tags('a', this)[0];
            if (atag) {
                CKW.DOM.removeClass(atag, 'selected');
            }
            var span = CKW.DOM.tags('span', this)[0];
            if (span) {
                CKW.DOM.removeClass(span, 'selected');
            }
        };
        */
    }
    // find the width of the widest submenu item
    // and set the submenu a tag widths from it
    if (CKW.IE && nav) {
        var submenus = CKW.DOM.tags('ul', nav);
        if (submenus) {
            for (var i = 0, len = submenus.length; i < len; i++) {
                var parentWidth = submenus[i].parentNode.clientWidth;
                var width = parentWidth;
                var items = CKW.DOM.tags('a', submenus[i]);
                for (var j = 0, len2 = items.length; j < len2; j++) {
                    if (items[j].clientWidth > width) {
                        width = items[j].clientWidth;
                    }
                }
                
                for (var j = 0, len2 = items.length; j < len2; j++) {
                
                    items[j].style.width = width + 'px';
                    if (width > parentWidth) {
                        CKW.DOM.appendClass(items[j], 'autoWidth');
                    }
                    
                    
                }
            }
        }
    }
        
    /*
      this.hideNav = function(elm)
    {
        CKW.DOM.removeClass(elm, 'showNav');
        CKW.DOM.appendClass(elm, 'hideNav');
        window.clearTimeout(elm.timer);
    };
      */

};

var $W = CKW.Widgets;