var HytossUI = new Object();

HytossUI.core = function() {};
HytossUI.core.prototype = {};

HytossUI.core.Element = function() {
    var browser;                                                                // Complete user agent information
    var isOpera;                                                                // the browser "Opera"
    var isMSIE;                                                                 // the browser "Internet Explorer"
    var isOldMSIE;                                                              // this browser and older version of Internet Explorer ( by older, we refer to version 6.0 or lower)
    var isFirefox;                                                              // the browser "Firefox"
    var __selfhref;
    
    var documentWidth;
    var documentHeight;
    var fireEvent;
    
    this.documentWidth = document.documentElement.clientWidth;
    this.documentHeight = document.documentElement.clientHeight;
    this.fireEvent = false;
    
    this.browser = navigator.userAgent;
    this.isOpera = (this.browser.toLowerCase().indexOf('opera') >=0 ) ? true : false;
    this.isFirefox = (this.browser.toLowerCase().indexOf('firefox') >= 0) ? true : false;
    this.isMSIE = (this.browser.toLowerCase().indexOf('msie') >= 0) ? true : false;
    this.isOldMSIE = (this.browser.toLowerCase().match(/msie\s[0-6]/gi)) ? true : false;
    this.isSafari = (this.browser.toLowerCase().indexOf('safari') >= 0) ? true : false;
    this.__selfhref = (this.isOldMSIE) ? '#' : '';
    
    try {
        document.execCommand("BackgroundImageCache", false, true);
    } catch(err) {}
};

HytossUI.core.Element.prototype = {
    getEl : function(ref) {
        if ((typeof ref) == 'object') return ref;
        if (ref == 'body') return document.getElementsByTagName('body')[0];
        if (document.getElementById(ref)) return document.getElementById(ref);
        if (document.forms[ref]) return document.forms[ref];
        if (document[ref]) return document[ref];
        if (window[ref]) return window[ref];
        return ref;
    }
    ,
    getUniqueId : function() {
        return 'UID' + Math.round(Math.random()*10000) + Math.round(Math.random()*10000);
    }
    ,
    getX : function(ref) {
        var obj = this.getEl(ref);
        return (obj.offsetLeft) ? obj.offsetLeft : parseInt(obj.style.left.replace(/'px'/g, ''));
    }
    ,
    getY : function(ref) {
        var obj = this.getEl(ref);
        return (obj.offsetTop) ? obj.offsetTop : parseInt(obj.style.top.repalce(/'px'/g, ''));
    }
    ,
    getWidth : function(ref) {
        var obj = this.getEl(ref);
        var x;
        if (obj.offsetWidth) return obj.offsetWidth;
        if (obj.clientWidth) {
            x = obj.clientWidth + 
                parseInt(obj.style.borderLeftWidth.replace(/'px'/g,'')) +
                parseInt(obj.style.borderRightWidth.replace(/'px'/g,''));
            return x;
        }
        if (obj.style.width) {
            x = obj.clientWidth + 
                parseInt(obj.style.borderLeftWidth.replace(/'px'/g,'')) +
                parseInt(obj.style.borderRightWidth.replace(/'px'/g,''));
            return x;
        }
        return null;    
    }
    ,
    getHeight : function(ref) {
        var obj = this.getEl(ref);
        var y;
        if (obj.offsetHeight) return obj.offsetHeight;
        if (obj.clientHeight) {
            y = obj.clientHeight + 
                parseInt(obj.style.borderTopWidth.replace(/'px'/g,'')) +
                parseInt(obj.style.borderBottomWidth.replace(/'px'/g,''));
            return y;
        }
        if (obj.style.width) {
            y = obj.clientWidth + 
                parseInt(obj.style.borderTopWidth.replace(/'px'/g,'')) +
                parseInt(obj.style.borderBottomWidth.replace(/'px'/g,''));
            return y;
        }
        return null;    
    }
    ,
    getPosition : function(ref) {
        return {top : this.getY(ref), left : this.getX(ref)};
    }
    ,
    getSize : function(ref) {
        return {width : this.getWidth(ref), height : this.getHeight(ref)};
    }
    ,
    setPosition : function(ref, x, y) {
        var obj = this.getEl(ref);
        if (obj) {
            obj.style.top = y + 'px';
            obj.style.left = x + 'px';
        }
    }
    ,
    setSize : function(ref, x, y) {
        this.setWidth(ref, x);
        this.setHeight(ref, y);
    }
    ,
    setWidth : function(ref, x) {
        var obj = this.getEl(ref);
        obj.style.width = x + 'px';        
        var resize = 0;
       
        if (obj.offsetWidth > x) {
            resize = obj.offsetWidth - x;
            obj.style.width = (x - resize) + 'px';
        }
    }
    ,
    setHeight : function(ref, y) {
        var obj = this.getEl(ref);
        obj.style.height = y + 'px';        
        var resize = 0;    
        
        if (obj.offsetHeight > y) {
            resize = obj.offsetHeight - y;
            obj.style.height = (y - resize) + 'px';
        }
    }
    ,
    addEventListener : function(ref, e, fn) {
        var obj = this.getEl(ref);        
        if (coreEl.isOldMSIE) {
            obj.attachEvent('on'+ e, fn);
        } else {        
            var oldEvent = eval('obj.on' + e);
            var evalstr = '';
            if ((typeof oldEvent) == 'function') {
                evalstr = 'obj.on' + e + ' = function(ev) { oldEvent(ev); fn(ev); };';            
            } else {
                evalstr = 'obj.on' + e + ' = function(ev) { fn(ev); };';
            }
            eval(evalstr);
        }
    }
    ,
    getEventEl : function(e){
        if (!e) e = window.event;        
        var el;
        if (e.target) {
            el = e.target;
        } else if (e.srcElement) {
            el = e.srcElement;
        }
        if (el.nodeType == 3) {
            el = el.parentNode;
        }
        return el;
    }
    ,
    removeElement : function(el) {
        var gBin = document.getElementById('IELeakGBIN');
        if (!gBin) {
            gBin = document.createElement('DIV');
            gBin.id =  'IELeakGBIN';
            gBin.style.display = 'none';
            document.body.appendChild(gBin);
        }
        gBin.appendChild(el); 
        gBin.innerHTML = '';
    }
    ,
    getResizeEvent : function() {
        if(!this.isMSIE) return true;
        if ((this.documentWidth != document.documentElement.clientWidth) || (this.documentHeight != document.documentElement.clientHeight)) {
            if (this.documentWidth != document.documentElement.clientWidth) {
                this.documentWidth = document.documentElement.clientWidth;
            }
            if (this.documentHeight != document.documentElement.clientHeight) {
                this.documentHeight = document.documentElement.clientHeight;
            }
            this.fireEvent = true;
        } else {
            this.fireEvent = false;
        }
        return this.fireEvent;
    }
};

var coreEl = new HytossUI.core.Element();


HytossUI.ui = function() {};
HytossUI.ui.prototype = {};

HytossUI.ui.BoxFrame = function() {
    var boxObj;
    var contentObj;
    var barObj;
    var statusObj;
    var centerBox;
    var hmarginElement;
    var vmarginElement;
    var hsizeableElement;
    var vsizeableElement;
    
    this.hmarginElement = new Array();
    this.vmarginElement = new Array();
    this.hsizeableElement = new Array();
    this.vsizeableElement = new Array();
};

HytossUI.ui.BoxFrame.prototype = {
    createBox : function() {
        /* 전체 박스 html element */
        this.boxObj = document.createElement('div');
        this.boxObj.id = coreEl.getUniqueId();        
        
        /* Box의  상단 부분  생성*/
        var topObj = document.createElement('div');
        var topLeft = document.createElement('span');
        var topLine = document.createElement('span');
        var topRight = document.createElement('span');
        
        topLeft.className = 'top_left';
        topLine.className = 'top_line';
        topRight.className = 'top_right';
        
        topObj.appendChild(topLeft);
        topObj.appendChild(topLine);
        topObj.appendChild(topRight);
        
        this.hmarginElement[this.hmarginElement.length] = topLeft;
        this.hmarginElement[this.hmarginElement.length] = topRight;
        this.vmarginElement[this.vmarginElement.length] = topLeft;
        this.hsizeableElement[this.hsizeableElement.length] = topLine;
        this.barObj = topLine;
        
        /* Box의 중간부분 생성 , 다른 페이지 내용이 들어갈 부분 포함 */
        var centerObj = document.createElement('div');
        var centerLeft = document.createElement('span');
        var center = document.createElement('div');
        var centerRight = document.createElement('span');
        
        centerObj.className = 'sub';
        centerLeft.className = 'content_left';
        center.className = 'content_center';
        centerRight.className = 'content_right';
        
        centerObj.appendChild(centerLeft);
        centerObj.appendChild(center);
        centerObj.appendChild(centerRight);
        
        this.contentObj = center;
        this.hsizeableElement[this.hsizeableElement.length] = center;
        this.vsizeableElement[this.vsizeableElement.length] = centerLeft;
        this.vsizeableElement[this.vsizeableElement.length] = center;
        this.vsizeableElement[this.vsizeableElement.length] = centerRight;
        
        this.centerBox = centerObj;
        
        /* Box 하단부분 생성 */
        var bottomObj = document.createElement('div');
        var bottomLeft = document.createElement('span');
        var bottomLine = document.createElement('span');
        var bottomRight = document.createElement('span');
        
        bottomObj.className = 'sub';
        bottomLeft.className = 'bottom_left';
        bottomLine.className = 'bottom_line';
        bottomRight.className = 'bottom_right';
        
        bottomObj.appendChild(bottomLeft);
        bottomObj.appendChild(bottomLine);
        bottomObj.appendChild(bottomRight);
        
        this.vmarginElement[this.vmarginElement.length] = bottomLeft;
        this.hsizeableElement[this.hsizeableElement.length] = bottomLine;
        this.statusObj = bottomLine;
        
        /* Box 구성 */
        this.boxObj.appendChild(topObj);
        this.boxObj.appendChild(centerObj);
        this.boxObj.appendChild(bottomObj);
        
        return this.boxObj;
    }
    ,
    setCssClass : function(css) {
        this.boxObj.className = css;
    }
    ,
    setBoxSize : function(width, height) {
        var hmargin = 0;
        var vmargin = 0;
        for (i = 0; i < this.hmarginElement.length; i++) hmargin = hmargin + this.hmarginElement[i].offsetWidth;
        for (i = 0; i < this.hmarginElement.length; i++) vmargin = vmargin + this.vmarginElement[i].offsetHeight;
        
        for (i = 0; i < this.hsizeableElement.length; i++) {
            coreEl.setWidth(this.hsizeableElement[i], width - hmargin);
        }
        
        for (i = 0; i < this.vsizeableElement.length; i++) {
            coreEl.setHeight(this.vsizeableElement[i], height - vmargin);
        }        
    }
    ,
    setBoxWidth : function(width) {
        var hmargin = 0;
        for (i = 0; i < this.hmarginElement.length; i++) hmargin = hmargin + this.hmarginElement[i].offsetWidth;
        
        for (i = 0; i < this.hsizeableElement.length; i++) {
            coreEl.setWidth(this.hsizeableElement[i], width - hmargin);
        }
    }
    ,
    setPosition : function(x, y) {
        coreEl.setPosition(this.boxObj, x, y);
    }
    ,
    loadContentIframe : function(src) {
        var ifobj;
        if (coreEl.isMSIE) {
            ifobj = document.createElement('<iframe frameborder="0">');
        } else {
            ifobj = document.createElement('iframe');
            ifobj.style.border = '0px';
            ifobj.style.backgroundColor = 'white';
        }
        ifobj.className = 'hytoss_content_iframe';
        ifobj.src = src;        
        this.contentObj.appendChild(ifobj);
    }
    ,
    addObjectToBar : function(obj) {
        this.barObj.appendChild(obj);
    }
    ,
    addObjectToStatus : function(obj) {
        this.statusObj.appendChild(obj);
    }
    ,
    displayTitle : function(name, imgSrc) {
        var imageBox = document.createElement('span');
        imageBox.className = 'image';
        imageBox.style.background = "url('" + imgSrc + "')";
        this.addObjectToBar(imageBox);
        
        var textBox = document.createElement('span');
        textBox.className = 'text'
        var text = document.createTextNode(name);
        textBox.appendChild(text);
        this.addObjectToBar(textBox);
    }
    ,
    changeToBoxFrame : function(id) {
        this.boxObj = coreEl.getEl(id);
        
        var center = document.createElement('div');
        var topLine = document.createElement('span');
        
        var nodes = this.boxObj.childNodes;
        var loop = nodes.length;
        for (var i = 0; i < loop; i++) {
            if (nodes[0].className == 'buttonbar') {
                topLine.appendChild(nodes[0]);
            } else {
                center.appendChild(nodes[0]);
            }
        }
        
        /* Box의  상단 부분  생성*/
        var topObj = document.createElement('div');
        var topLeft = document.createElement('span');
        var topRight = document.createElement('span');
        
        topLeft.className = 'top_left';
        topLine.className = 'top_line';
        topRight.className = 'top_right';
        
        topObj.appendChild(topLeft);
        topObj.appendChild(topLine);
        topObj.appendChild(topRight);
        
        this.hmarginElement[this.hmarginElement.length] = topLeft;
        this.hmarginElement[this.hmarginElement.length] = topRight;
        this.vmarginElement[this.vmarginElement.length] = topLeft;
        this.hsizeableElement[this.hsizeableElement.length] = topLine;
        this.barObj = topLine;
        
        /* Box의 중간부분 생성 , 다른 페이지 내용이 들어갈 부분 포함 */
        var centerObj = document.createElement('div');
        var centerLeft = document.createElement('span');
        
        var centerRight = document.createElement('span');
        
        centerObj.className = 'sub';
        centerLeft.className = 'content_left';
        center.className = 'content_center';
        centerRight.className = 'content_right';
        
        centerObj.appendChild(centerLeft);
        centerObj.appendChild(center);
        centerObj.appendChild(centerRight);
        
        this.contentObj = center;
        this.hsizeableElement[this.hsizeableElement.length] = center;
        this.vsizeableElement[this.vsizeableElement.length] = centerLeft;
        this.vsizeableElement[this.vsizeableElement.length] = center;
        this.vsizeableElement[this.vsizeableElement.length] = centerRight;
        
        this.centerBox = centerObj;
        
        /* Box 하단부분 생성 */
        var bottomObj = document.createElement('div');
        var bottomLeft = document.createElement('span');
        var bottomLine = document.createElement('span');
        var bottomRight = document.createElement('span');
        
        bottomObj.className = 'sub';
        bottomLeft.className = 'bottom_left';
        bottomLine.className = 'bottom_line';
        bottomRight.className = 'bottom_right';
        
        bottomObj.appendChild(bottomLeft);
        bottomObj.appendChild(bottomLine);
        bottomObj.appendChild(bottomRight);
        
        this.vmarginElement[this.vmarginElement.length] = bottomLeft;
        this.hsizeableElement[this.hsizeableElement.length] = bottomLine;
        this.statusObj = bottomLine;
        
        /* Box 구성 */
        this.boxObj.appendChild(topObj);
        this.boxObj.appendChild(centerObj);
        this.boxObj.appendChild(bottomObj);
        
        return this.boxObj;        
    }
    ,
    showHideCenterBox : function (flag) {
        if (!flag) {
            if (this.centerBox.offsetWidth == 0) {
                this.centerBox.style.display = 'block';
            } else {
                this.centerBox.style.display = 'none';
            }
        } else if (flag == 'show') {
            this.centerBox.style.display = 'block';
        }
    }
    ,
    getHeight : function() {
        return this.boxObj.offsetHeight;
    }
    ,
    getWidth : function() {
        return this.boxObj.offsetWidth;
    }
};

HytossUI.ui.TabFrame = function() {
    var parentObj;
    var frameArea;
    var tabArea;
    var arrayOfPage;
    
    this.arrayOfPage = new Array();
};

HytossUI.ui.TabFrame.prototype = {
    createTabFrame : function(ref) {
        this.parentObj = coreEl.getEl(ref);
        this.frameArea = document.createElement('div');
        this.tabArea = document.createElement('div');
        
        this.frameArea.className = 'hytoss_tabframe_framearea';
        this.tabArea.className = 'hytoss_tabframe_tabarea';
        
        this.parentObj.appendChild(this.frameArea);
        this.parentObj.appendChild(this.tabArea);
        this.resize();        
    }
    ,
    resize : function() {
        var width = this.parentObj.clientWidth;
        var height = this.parentObj.clientHeight;
        coreEl.setSize(this.tabArea, width, this.tabArea.offsetHeight);
        coreEl.setSize(this.frameArea, width, height - this.tabArea.offsetHeight);
    }
    ,
    addPage : function(id, src) {
        var page = document.createElement('div');
        page.id = 'frpage_' + id;
        page.refid = id;
        page.className = 'hytoss_tabpage_div';
        
        var ifobj;
        if (coreEl.isMSIE) {
            ifobj = document.createElement('<iframe frameborder="0">');
        } else {
            ifobj = document.createElement('iframe');
            ifobj.style.border = '0px';
            ifobj.style.backgroundColor = 'white';
        }
        ifobj.id = 'ifrpage_'+ id;      // By Her
        ifobj.name = 'ifrpage_'+ id;    // By Her
        page.appendChild(ifobj);
        this.frameArea.appendChild(page);
        ifobj.src = src;
        return page;
    }
    ,
    addTab : function(id, title) {
        var tab = document.createElement('span');
        tab.className = 'hytoss_tabframe_active';
        tab.id = 'frtab_' + id;
        tab.refid = id;
        tab.title = title;
        
        var left = document.createElement('span');
        left.className = 'left';
        
        var line = document.createElement('span');
        line.className = 'line';
        
        var textBox = document.createElement('span');
        textBox.className = 'text';
        
        var text = document.createTextNode(title)
        textBox.appendChild(text);
        
        line.appendChild(textBox);
        
        var right = document.createElement('span');
        right.className = 'right';
        
        tab.appendChild(left);
        tab.appendChild(line);
        tab.appendChild(right);
        this.tabArea.appendChild(tab);
        return tab;
    }    
    ,
    addTabPage : function(id, title, src) {
        var tab = this.addTab(id, title);
        var page = this.addPage(id, src);        
        this.repaintTabArea();
        this.selectTab(id);        
    }
    ,
    repaintTabArea : function() {
        var tabs = this.tabArea.childNodes;
        var left = 10;
        var width = 0;
        if (tabs.length <= 0) return;
        
        width = Math.floor((this.tabArea.clientWidth - 20) / (tabs.length));
        for (var i = 0; i < tabs.length; i++) {
            coreEl.setWidth(tabs[i].childNodes[1], width - tabs[i].childNodes[0].offsetWidth -tabs[i].childNodes[2].offsetWidth);
            tabs[i].style.left = left + 'px';
            left = left + width;
            if (tabs[i].childNodes[1].childNodes.length > 1) { 
                coreEl.setWidth(tabs[i].childNodes[1].childNodes[0], tabs[i].childNodes[1].offsetWidth - tabs[i].childNodes[1].childNodes[1].offsetWidth - 7);
            } else {
                coreEl.setWidth(tabs[i].childNodes[1].childNodes[0], tabs[i].childNodes[1].offsetWidth - 10);
            }
        }
    }
    ,
    selectTab : function(id) {
        var tabs = this.tabArea.childNodes;
        for (var i = 0; i < tabs.length; i++) {
            if (tabs[i].refid == id) {
                tabs[i].className = 'hytoss_tabframe_active';
            } else {
                tabs[i].className = 'hytoss_tabframe_inactive';
            }
        }
        this.repaintTabArea();
    }
    ,
    selectPage : function(id) {
        var pages = this.frameArea.childNodes;
        for (var i = 0; i < pages.length; i++) {
            if (pages[i].refid == id) {
                pages[i].style.zIndex = 1000;
            } else {
                pages[i].style.zIndex = 100;
            }
        }
    }
    ,
    getActivePage : function() {
        var tabs = this.tabArea.childNodes;
        var rtnid;
        var rtntitle;
        for (var i = 0; i < tabs.length; i++) {
            if (tabs[i].className == 'hytoss_tabframe_active') {
                rtnid = tabs[i].refid;
                rtntitle = tabs[i].title;
            }
        }
        return {id : rtnid, title : rtntitle};
    }
    ,
    getActivePageObj : function() { // By Her
        var pages = this.frameArea.childNodes;
        var rtnid;
        var rtnobj;
        for (var i = 0; i < pages.length; i++) {
            if (pages[i].style.zIndex == 1000) {
                rtnid = pages[i].refid;
                rtnobj = pages[i];
            }
        }
        return {id : rtnid, obj : rtnobj};
    }
    ,
    getActivePageIFrame : function() { // By Her
        var pages = this.frameArea.childNodes;
        var rtnid;
        var rtnname;
        var rtnobj;
        for (var i = 0; i < pages.length; i++) {
            if (pages[i].style.zIndex == 1000) {
                rtnid = pages[i].childNodes[0].id;
                rtnname = pages[i].childNodes[0].name;
                rtnobj = pages[i].childNodes[0];
            }
        }
        return {id : rtnid, name : rtnname, obj : rtnobj};
    }
    ,
    closeTabPage : function(id) {
        var pages = this.frameArea.childNodes;
        var tabs = this.tabArea.childNodes;        
        var i = 0;
        for (i = 0; i < pages.length; i++) {
            if (pages[i].refid == id) {
                coreEl.removeElement(pages[i]);
            }
        }
        for (i = 0; i < tabs.length; i++) {
            if (tabs[i].refid == id) {
                coreEl.removeElement(tabs[i]);
            }
        }        
        if (tabs.length > 0) {
            this.selectTab(tabs[tabs.length - 1].refid);
            this.selectPage(tabs[tabs.length - 1].refid);
        }
    }    
};

HytossUI.ui.TreeMenu = function() {
    var rootNode;
};

HytossUI.ui.TreeMenu.prototype = {
    setRootNode : function(id) {
        this.rootNode = coreEl.getEl(id);        
    }
    ,
    addGroupNode : function(parentId, groupId, name, imgSrc, func) {
        var parentObj = coreEl.getEl(parentId);
        var groupNode = document.createElement('ul');
        var groupList = document.createElement('li');
        groupList.nodetype = 'group';
        groupList.id = groupId;
        groupList.className = 'hytoss_tree_group';
        groupNode.appendChild(groupList);
        parentObj.appendChild(groupNode);
        
        var marker = document.createElement('span');
        marker.className = 'marker_plus';
        groupList.appendChild(marker);
        
        var img = document.createElement('span');
        img.className = 'image';
        img.style.background = "url('" + imgSrc + "')";
        groupList.appendChild(img);
        
        var textBox = document.createElement('span');
        textBox.className = 'text';
        
        var text = document.createTextNode(name);
        textBox.appendChild(text);
        groupList.appendChild(textBox);
        
        coreEl.addEventListener(marker, 'click', func);
        coreEl.addEventListener(img, 'click', func);
        coreEl.addEventListener(textBox, 'click', func);
    }
    ,
    addExecutableNode : function(groupId, pgmId, name, imgSrc, func) {
        var parentObj = coreEl.getEl(groupId);
        var groupNode = document.createElement('ul');
        var groupList = document.createElement('li');
        groupList.id = pgmId;
        groupList.className = 'hytoss_tree_excuteNode';
        groupNode.appendChild(groupList);
        parentObj.appendChild(groupNode);
        
        var img = document.createElement('span');
        img.className = 'image';
        img.style.background = "url('" + imgSrc + "')";
        groupList.appendChild(img);
        
        var textBox = document.createElement('span');
        textBox.className = 'text';
        
        var text = document.createTextNode(name);
        textBox.appendChild(text);
        groupList.appendChild(textBox);
        
        coreEl.addEventListener(img, 'click', func);
        coreEl.addEventListener(textBox, 'click', func);
    }
};

HytossUI.ui.TabSheet = function() {
    var parentObj;
    var tabArea;
    var sheetArea;    
};

HytossUI.ui.TabSheet.prototype = {
    createArea : function(ref) {
        this.parentObj = coreEl.getEl(ref);        
        this.tabArea = document.createElement('div');
        this.tabArea.className = 'hytoss_tabSheet_tabArea';
        this.sheetArea = document.createElement('div');
        this.sheetArea.className = 'hytoss_tabSheet_sheetArea';
        
        this.parentObj.appendChild(this.tabArea);
        this.parentObj.appendChild(this.sheetArea);
        
        return this.parentObj;
    }
    , 
    addTab : function(id, name) {
        var obj = document.createElement('div');
        obj.id = 'tab_' + id;
        obj.refid = id;
        obj.className = 'hytoss_tabsheet_active_tab';
        var left = document.createElement('span');
        left.className = 'left'
        var line = document.createElement('span');
        line.className = 'line';
        var right = document.createElement('span');
        right.className = 'right';
        
        var text = document.createTextNode(name);
        line.appendChild(text);
        
        obj.appendChild(left);
        obj.appendChild(line);
        obj.appendChild(right);
        
        this.tabArea.appendChild(obj);
        var ref = this;        
        coreEl.addEventListener(obj, 'click', function(){ref.setActiveID(obj.refid);});
        return obj;
    }
    ,
    addSheet : function(id, src) {
        var sheet = document.createElement('div');
        sheet.id = 'sheet_' + id;
        sheet.refid = id;
        sheet.className = 'hytoss_tabsheet_div';
        
        var ifobj;
        if (coreEl.isMSIE) {
            ifobj = document.createElement('<iframe frameborder="0">');
        } else {
            ifobj = document.createElement('iframe');
            ifobj.style.border = '0px';
            ifobj.style.backgroundColor = 'white';
        }
        ifobj.id = 'ifrsheet_'+ id;      // By Her
        ifobj.name = 'ifrsheet_'+ id;    // By Her
        ifobj.clasName = 'hytoss_content_iframe';
        sheet.appendChild(ifobj);
        this.sheetArea.appendChild(sheet);
        ifobj.src = src;
        return sheet;
    }
    ,
    addTabPanel : function(name, src, id) {
        this.addTab(id, name);
        this.addSheet(id, src);
        this.selectTab(id);
        this.selectSheet(id);
    }
    ,
    selectTab : function(id) {
        var nodes = this.tabArea.childNodes;
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].refid == id) {
                nodes[i].className = 'hytoss_tabsheet_active_tab';
            } else {
                nodes[i].className = 'hytoss_tabsheet_inactive_tab';
            }
        }
    }
    ,
    selectSheet : function(id) {
        var sheets = this.sheetArea.childNodes;
        for (var i = 0; i < sheets.length; i++) {
            if (sheets[i].refid == id) {
                sheets[i].style.zIndex = 100000;
            } else {
                sheets[i].style.zIndex = 10000;
            }
        }
    }
    ,
    getActiveIndex : function() {
        var nodes = this.tabArea.childNodes;
        var idx = 0;
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].className == 'hytoss_tabsheet_active_tab') {
                idx = i;
            }
        }
        return idx;
    }
    ,
    getActiveSheet : function() { // By Her
        var sheets = this.sheetArea.childNodes;
        var rtnid;
        var rtnname;
        var rtnobj;
        for (var i = 0; i < sheets.length; i++) {
            if (sheets[i].style.zIndex = 100000) {
                rtnid = sheets[i].childNodes[0].id;
                rtnname = sheets[i].childNodes[0].name;
                rtnobj = sheets[i].childNodes[0];
            }
        }
        return {id : rtnid, name : rtnname, obj : rtnobj};
    }
    ,
    setActiveIndex : function(idx) {
        var nodes = this.tabArea.childNodes;
        for (var i = 0; i < nodes.length; i++) {
            if (i == idx) {
                nodes[i].className = 'hytoss_tabsheet_active_tab';
            } else {
                nodes[i].className = 'hytoss_tabsheet_inactive_tab';
            }
        }        
        var sheets = this.sheetArea.childNodes;
        for (var j = 0; j < sheets.length; j++) {
            if (j == idx) {
                sheets[j].style.zIndex = 100000;
            } else {
                sheets[j].style.zIndex = 10000;
            }
        }
    }
    ,
    setActiveID : function(id) {
        this.selectTab(id);
        this.selectSheet(id);
    }
    ,
    movePanelIndex : function(idx, src) {
        this.setActiveIndex(idx);
        var sheets = this.sheetArea.childNodes;
        for (var j = 0; j < sheets.length; j++) {
            if (j == idx) {
                sheets[j].childNodes[0].src = src;
            }
        }        
    }
    ,
    movePanelID : function(id, src) {
        this.setActiveID(id);
        var sheets = this.sheetArea.childNodes;
        for (var j = 0; j < sheets.length; j++) {
            if (sheets[j].refid == id) {
                sheets[j].childNodes[0].src = src;
            }
        }
    }
    ,
    repaintSheet : function() {
        var width = document.documentElement.clientWidth;
        var height = document.documentElement.clientHeight;
        
        coreEl.setHeight(this.sheetArea, height - this.tabArea.offsetHeight);
    }
};