/*********************************************************/
/***** Class to load a page in the admin area ************/
/*********************************************************/
var Pageloader = new Class({
    Implements: [Options, Events],
    //--- Options.
    options: {
        container: 'content',
        method: 'post',
        errorMessage: 'Det lykkedes ikke at loade siden, fortsætter dette problem bedes du kontakte udbyderen af systemet!'
    },

    //--- Initialize the class.
    initialize: function (options) {
        this.setOptions(options);
        $(this.options.container).set('text', '');
    },

    //--- Function to load the page.
    loadPage: function (url, rel) {
        var waiter = new Spinner($(this.options.container));
        var req = new Request.HTML({
            url: url,
            method: this.options.method,
            onRequest: function () {
                waiter.show();
            },
            onSuccess: function (html) {
                $(this.options.container).adopt(html);
                if ($(rel) != null) {
                    //--- Lav treeview
//                    var mytree = new Treeview();
//                    mytree.loadTree(rel);

                    //--- Laver højreklik menu på treeview
                    var context = new ContextMenu({
                        targets: '.link', //--- Menu kun tilgængelig på elementer med class=".link"
                        menu: 'contextmenu',
                        actions: {
                            copy: function (element, ref) { //--- copy action changes the element's color to red and disables the menu
                                element.setStyle('color', 'red');
                                //ref.disable();
                            },
                            edit: function (element, ref) {
                                document.id('iframe').setProperty('src', element.get('href'));
                            },
                            'delete': function (element, ref) {
//                                var urlToDelete = $$('ul#contextmenu li a').get('rel')[1] + element.get('href').split('/')[3]
//                                var req = new Request({
//                                    method: 'post',
//                                    url: urlToDelete,
//                                    onSuccess: function (resp) {
//                                        if (resp) {
//                                            var menuUrl = resp.split(',')[0];
//                                            var frontUrl = resp.split(',')[1];
//                                            var menuId = resp.split(',')[2];

//                                            $('iframe').setProperty('src', frontUrl);
//                                            loadMenu(menuUrl, frontUrl, menuId);
//                                        }
//                                    }
//                                })
//                                req.send();

                                //alert($$('ul#contextmenu li a').get('rel')[1] + element.get('href').split('/')[3]);
                                //$('iframe').setProperty('src', '/Admin/Front');
                                //loadMenu('/Admin/Sitemenu/1', '/admin/Front', 'sitetree');
                            }
                        },
                        offsets: { x: -5, y: -5 }
                    });
                }
                waiter.destroy();
            } .bind(this),

            onFailure: function () {
                $(this.options.container).set('text', this.options.errorMessage);
                waiter.destroy();
            } .bind(this)
        });
        req.send();
    }
});

/*****************************************/
/***** Class to generate tabs ************/
/*****************************************/

var Tabs = new Class({
    Implements: [Options, Events],
    options: {
        selectedTabCssClass: 'selectedTab',
        selectedSectionCssClass: 'selectedTabSection',
        firstShow: 0
        /*onShow: $empty,
        onHide: $empty*/
    },
    tabs: [],
    initialize: function(containers, tabs, options) {
        this.setOptions(options);
        $$(tabs).each(function(tab, index) {
            this.addSection(tab, $$(containers)[index]);
        }, this);
        this.show(this.options.firstShow);
    },

    addSection: function(tab, container) {
        this.tabs.include(tab);
        tab.store('container', container);
        this.attach(tab);
    },

    attach: function(tab) {
        tab.addEvent('click', function(event) {
            event.preventDefault();
            this.show(this.tabs.indexOf(tab));
        } .bind(this));
    },

    show: function(index) {
        if (this.current === index) return;
        this.tabs.each(function(tab, i) {
            var container = tab.retrieve('container');
            if (index === i) {
                tab.addClass(this.options.selectedTabCssClass);
                container.addClass(this.options.selectedSectionCssClass);
                container.setStyle('display', 'block');
                this.fireEvent('onShow', [i, tab, container]);
            }
            else {
                tab.removeClass(this.options.selectedTabCssClass);
                container.removeClass(this.options.selectedSectionCssClass);
                container.setStyle('display', 'none');
                if (this.current === i || this.current != null)
                    this.fireEvent('onHide', [i, tab, container]);
            }
        }, this);
        this.current = index;
    }
});

var AjaxTabs = new Class({
    Extends: Tabs,
    options: {
        cache: true,
        urls: []
    },

    show: function(index, force) {
        var tab = this.tabs[index];
        var url = this.options.urls[index] || tab.get('href');
        if (!url || force || (this.options.cache && tab.retrieve('loaded'))) {
            this.parent(index);
        }
        else {
            this.fetchTabContent(index, url);
        }
    },

    fetchTabContent: function(index, url) {
        var tab = this.tabs[index];
        var container = tab.retrieve('container');
        var request = tab.retrieve('tabAjax');
        if (!request) {
            request = new Request.HTML({
                update: container,
                method: 'get',
                url: url,
                onSuccess: function() {
                    this.show(index, true);
                    tab.store('loaded');
                } .bind(this)
            });
            tab.store('tabAjax', request);
        }
        request.send();
    }
});

/**************************************************/
/***** Class to to generate a treeview ************/
/**************************************************/
var Itl = {
    name: 'ITL A/S'
};

Itl.Tree = new Class({
    Implements: [Options, Events],
    options: {
        url: '',
        method: 'post',
        container: 'mytree',
        img: {
            imagePath: '/content/tree/',
            imageOpen: 'tree_open.png',
            imageClosed: 'tree_closed.png',
            imageNone: 'tree_none.gif',
            imageLoader: 'tree_loader.gif'
        },
        useContextmenu: false,
        useReordering: false,
        reorderPostUrl: ''
    },

    initialize: function (options) {
        this.setOptions(options);
        this.loadData(0, $(this.options.container));
    },

    loadData: function (parentId, injectTo) {
        var dataUrl = this.options.url;

        var request = new Request.JSON({
            url: dataUrl,
            method: this.options.method,
            onRequest: function () {
                if (parentId > 0) this.toggleLoader(injectTo);
            } .bind(this),
            onComplete: function (nodes) {
                this.requestReady(nodes, injectTo, parentId);
            } .bind(this)
        }, this).send('id=' + parentId);
    },

    //--- Data has been received, create treeview object and inject it into the container
    requestReady: function (nodes, injectTo, parentId) {
        var ul = this.createTree(nodes, injectTo, parentId);
        ul.inject(injectTo);

        //--- Tilføjer sortering til side menu.
        this.reorderMenu(this.options.reorderPostUrl, '#' + ul.get('id'));

        //--- Method was called from toggleNode, call it back so the node gets toggled
        if (parentId) {
            this.toggleNode(injectTo);
        }

        //--- Turn off the loader icon
        if (parentId > 0) this.toggleLoader(injectTo);

        //--- Tilføjer sortering til side menu.
        //        if (this.options.useReordering) {
        //            var ulId = '';
        //            document.id(this.options.container).getElements('ul').each(function (ulItem) {
        //                //ulId += ',#' + ulItem.getProperty('id');
        //                ulId = '#' + ulItem.getProperty('id');
        //            });

        //            this.reorderMenu(this.options.reorderPostUrl, ulId.substring(1, ulId.length));
        //        }
    },

    //--- Create the root of the treeview
    createTree: function (nodes, injectTo, parentId) {
        //if (parentId == 0) {
        //    var imgdiv = new Element('div', { 'styles': { 'margin': '5px 0 0 5px'} }).inject(injectTo);
        //    var homeImg = new Element('img', { 'src': '/content/icons/16x16/home.png', 'styles': { 'vertical-align': 'middle', 'padding-right': '2px'} }).inject(imgdiv);
        //    var link = new Element('a', { 'class': 'link', 'styles': { 'cursor': 'default'} }).set('text', 'Index').inject(imgdiv);
        //}
        var ul = new Element('ul', { 'id': 'tree' });

        nodes.each(function (node) {
            var li = this.createTreeNode(node);
            li.inject(ul);

            if (parentId > 0) {
                ul.setProperties({ 'class': 'sub', 'id': 'tree' + node.ItemId });
            }
        }, this);

        //--- Tilføjer context menu til treeview.
        //(function () {
        //    this.contextMenu();
        //} .bind(this)).delay(50);

        //--- Retunere den nyoprettede ul liste.
        return ul;
    },

    //--- Create a single treenode.
    createTreeNode: function (node) {
        var li = new Element('li', { 'alt': node.ItemId, 'class': 'context' });
        var imgArrow = new Element('img', { 'class': 'arrow' }).inject(li);
        var link = new Element('a', { 'href': node.Link, 'class': 'link' }).inject(li);
        var span = new Element('span').setProperty('id', 'item' + node.ItemId).set('text', node.Name).inject(link);
        var imgItem = new Element('div', { 'class': node.cssClass }).inject(span, 'top');

        //--- Hvis der findes undermenuer loades billed-pil.
        if (node.Childs != null) {
            imgArrow.setProperty('src', this.options.img.imagePath + this.options.img.imageClosed);
        }
        else {
            imgArrow.setProperty('src', this.options.img.imagePath + this.options.img.imageNone);
        }

        //--- Tilføjer click event til links
        link.addEvent('click', function (e) {
            e.stop();
            $$('li a').each(function (injectTo) {
                injectTo.setStyle('font-weight', '');
            });
            li.getElement('a').setStyle('font-weight', 'bold');

            this.loadContent(link.get('href'));
        } .bind(this));

        //--- Tilføj click event på billed pil.
        imgArrow.addEvent('click', function (e) {
            e.stop();
            this.toggleNode(li);
        } .bind(this));

        return li;
    },

    loadContent: function (href) {
        this.fireEvent('loadContent', [href], 50);
    },

    contextMenu: function () {
        var context = new ContextMenu({
            targets: '.context', //--- Menu kun tilgængelig på elementer med class="context"
            menu: 'contextmenu',
            actions: {
                add: function (element, ref) { //--- copy action changes the element's color to red and disables the menu
                    alert('oprettelse ' + element.getFirst('a').get('href'));
                },
                copy: function (element, ref) { //--- copy action changes the element's color to red and disables the menu
                    alert('kopiering');
                },
                edit: function (element, ref) {
                    alert('redigering');
                },
                'delete': function (element, ref) {
                    alert('sletning');
                    //alert('/' + element.getProperty('href').split('/')[1] + '/' + $(contextMenuId).getElement('.delete').getProperty('rel').split('/')[2] + '/' + element.getProperty('href').split('/')[3]);
                    //var urlToDelete = '/' + element.getProperty('href').split('/')[1] + '/' + $(contextMenuId).getElement('.delete').getProperty('rel').split('/')[2] + '/' + element.getProperty('href').split('/')[3]
                    //var req = new Request({
                    //    method: 'post',
                    //    url: urlToDelete,
                    //    onSuccess: function (resp) {
                    //        if (resp) {
                    //            element.getParent().dispose();
                    //            $('iframe').setProperty('src', '/' + element.get('href').split('/')[1] + '/Index');
                    //        }
                    //    }
                    //})
                    //req.send();
                }
            },
            offsets: { x: -5, y: -5 }
        });
    },

    //--- Reordering treeview
    reorderMenu: function (reorderPostUrl, ulId) {
        document.ondragstart = function () {
            return false;
        };
        var sb = new Sortables(ulId, {
            constrain: true,
            clone: true,
            revert: true,
            //handle: '.moveitem',

            onStart: function (elm) {
                elm.setStyles({ 'background': '#add8e6' });
            },

            onComplete: function (elm) {
                elm.setStyle('background', 'transparent');

                var sortorder = '';
                var parent = elm.getParent('ul');
                //alert(parent.get('id'));

                parent.getChildren('li').each(function (li) {
                    sortorder += li.get('alt') + ',';
                });

                var req = new Request({
                    url: reorderPostUrl,
                    method: 'post',
                    autoCancel: true,
                    data: 'sortorder=' + sortorder
                    /*onRequest: function () {
                    //$('message-box').set('text', 'Updating the sort order in the database.');
                    alert('Opdatere databasen');
                    },
                    onSuccess: function (resp) {
                    //$('message-box').set('text', 'Database has been updated.');
                    alert(resp);
                    }*/
                });
                req.send();
            }
        });
    },

    //--- Turn loader icon on/off
    toggleLoader: function (node) {
        var img = node.getFirst('a').getFirst('span').getFirst('div');
        if (img) {
            //img.setProperties({ 'src': this.options.img.imagePath + this.options.img.imageLoader });
            img.toggleClass('loader');
            //img.setProperties({ 'src': this.options.img.imagePath + this.options.img.imageOpen });
            img.toggleClass('folder');
        }
    },

    //--- Function to expand or collpase node.
    toggleNode: function (elm) {
        var ul = elm.getFirst("ul");

        if (!ul) {
            this.loadData(elm.get("alt"), elm);
        }

        if (ul) {
            if (ul.getStyle('display') == 'block') {
                ul.setStyle('display', 'none');
                elm.getFirst('img').setProperties({ 'src': this.options.img.imagePath + this.options.img.imageClosed });
            } else {
                ul.setStyle('display', 'block');
                elm.getFirst('img').setProperties({ 'src': this.options.img.imagePath + this.options.img.imageOpen });
            }
        }

        //if (ul.getStyle('display') == 'block') {
        //    this.collapseNode(ul, elm.getFirst('img'));
        //} else {
        //    this.expandNode(ul, elm.getFirst('img'));
        //}
    },

    //--- Function to expand node.
    expandNode: function (ul, img) {
        ul.setStyle('display', 'block');
        img.setProperties({ 'src': this.options.img.imagePath + this.options.img.imageOpen });
        Cookie.write(ul.getProperty('id'), true, { duration: 1, path: '/' });
    },

    //--- Function to collpase node.
    collapseNode: function (ul, img) {
        ul.setStyle('display', 'none');
        img.setProperties({ 'src': this.options.img.imagePath + this.options.img.imageClosed });
        Cookie.dispose(ul.getProperty('id'), { path: '/' });
    }
});

/**************************************************/
/***** Class to to generate a treeview ************/
/**************************************************/
var Treeview = new Class({
    Implements: [Options, Events],
    options: {
        url: '',
        method: 'post',
        container: 'mytree',
        rootName: '',
        img: {
            imagePath: '/content/tree/',
            imageOpen: 'tree_open.png',
            imageClosed: 'tree_closed.png',
            imageNone: 'tree_none.gif'
        },
        useJsonCall: false,
        useContextmenu: false,
        useReordering: false,
        reorderPostUrl: ''
    },

    initialize: function (url, controllerName, contextMenuId, options) {
        this.setOptions(options);
        this.loadData(url, controllerName, contextMenuId, this.options.container);
    },

    loadData: function (url, controllerName, contextMenuId, container) {
        var data;
        var request = new Request.JSON({
            url: url,
            method: this.options.method,
            onComplete: function (jsonObj) {
                this.buildTree(jsonObj, controllerName, contextMenuId, $(container));
                if (this.options.useReordering) {
                    var ulId = '';
                    document.id(container).getElements('ul').each(function (ulItem) {
                        ulId += ',#' + ulItem.getProperty('id');
                    });

                    this.reorderMenu(this.options.reorderPostUrl, ulId.substring(1, ulId.length));
                }
            } .bind(this)
        }, this).send();
    },

    buildTree: function (data, controllerName, contextMenuId, elm) {
        if (elm.get('tag') == 'div') {
            //elm.set('html', '');
        }

        var ul = new Element('ul', { 'id': 'tree' }).inject(elm);

        data.each(function (item) {
            var li = new Element('li', { 'alt': item.ItemId }).inject(ul);
            var imgArrow = new Element('img', { 'class': 'arrow' }).inject(li);
            var className = 'link';
            if (item.Link == '/data' || item.Link == 'javascript:void(0);') {
                className = 'linkno';
            }
            var link = new Element('a', { 'href': item.Link, 'class': className }).inject(li);
            var span = new Element('span').set('text', item.Name).inject(link);
            //var moveImg = new Element('img', { 'class': 'moveitem', 'styles': { 'cursor': 'move' }, 'class': 'item', 'src': '/Content/icons/16x16/move.png' }).inject(span, 'top');
            var imgItem = new Element('img', { 'class': 'item', 'src': '/Content/icons/16x16/' + item.Icon.Icon }).inject(span, 'top');

            if (elm.get('tag') == 'li') {
                ul.setProperties({ 'class': 'sub', 'id': 'tree' + item.ItemId });
            }

            //--- Hvis der findes undermenuer loades disse.
            if (item.Childs != null) {
                if (item.Childs.length > 0) {
                    this.buildTree(item.Childs, controllerName, contextMenuId, li);
                    var subul = li.getElement('ul');

                    if (Cookie.read(subul.getProperty('id')) == null) {
                        subul.setStyle('display', 'none');
                        imgArrow.setProperty('src', this.options.img.imagePath + this.options.img.imageClosed);
                    }
                    else {
                        subul.setStyle('display', 'block');
                        imgArrow.setProperty('src', this.options.img.imagePath + this.options.img.imageOpen);
                    }
                }
                else {
                    imgArrow.setProperty('src', this.options.img.imagePath + this.options.img.imageNone);
                }
            }
            else {
                imgArrow.setProperty('src', this.options.img.imagePath + this.options.img.imageNone);
            }

            //--- Tilføjer click event til links
            link.addEvent('click', function (e) {
                e.stop();
                $$('li a').each(function (elm) {
                    elm.setStyle('font-weight', '');
                });
                li.getElement('a').setStyle('font-weight', 'bold');

                //                $$('li a.link').each(function (elm) {
                //                    elm.removeClass('activeright');
                //                });
                //                $$('li a.link span').each(function (elm) {
                //                    elm.removeClass('activeleft');
                //                });
                //                li.getElement('.link').addClass('activeright');
                //                li.getElement('span').addClass('activeleft');

                //if (this.options.useJsonCall) {
                $('iframe').setProperty('src', link.getProperty('href'));
                //}
                //else {
                //    var request = new Request.JSON({
                //        url: link.getProperty('href'),
                //        method: this.options.method,
                //        onComplete: function (jsonObj) {
                //            return jsonObj;
                //        } .bind(this)
                //    }, this).send();
                //}
            });

            //--- Tilføj click event på billed pil.
            imgArrow.addEvent('click', function () {
                this.toggleNode(subul, imgArrow);
            } .bind(this));
        }, this);

        if (this.options.useContextmenu) {
            var context = new ContextMenu({
                targets: '.link', //--- Menu kun tilgængelig på elementer med class=".link"
                menu: contextMenuId,
                actions: {
                    copy: function (element, ref) { //--- copy action changes the element's color to red and disables the menu
                        element.setStyle('color', 'red');
                    },
                    edit: function (element, ref) {
                        document.id('iframe').setProperty('src', element.get('href'));
                    },
                    editprofile: function (element, ref) {
                        document.id('iframe').setProperty('src', $(contextMenuId).getElement('.editprofile').getProperty('rel') + element.getProperty('href').split('/')[3]);
                    },
                    'delete': function (element, ref) {
                        if (!confirm('Er du sikke på du vil slette?')) return false;
                        var urlToDelete = '/' + element.getProperty('href').split('/')[1] + '/' + $(contextMenuId).getElement('.delete').getProperty('rel').split('/')[2] + '/' + element.getProperty('href').split('/')[3]
                        var req = new Request({
                            method: 'post',
                            url: urlToDelete,
                            onSuccess: function (resp) {
                                if (resp) {
                                    element.getParent().dispose();
                                    $('iframe').setProperty('src', '/' + element.get('href').split('/')[1] + '/Index');
                                }
                            }
                        })
                        req.send();
                    }
                },
                offsets: { x: -5, y: -5 }
            });
        }
    },

    reorderMenu: function (reorderPostUrl, ulId) {
        document.ondragstart = function () {
            return false;
        };
        var sb = new Sortables(ulId, {
            constrain: true,
            clone: true,
            revert: true,
            handle: '.item',

            onStart: function (elm) {
                elm.setStyles({ 'background': '#add8e6' });
            },

            onComplete: function (elm) {
                elm.setStyle('background', 'transparent');

                var sortorder = '';
                var parent = elm.getParent('ul');

                parent.getChildren('li').each(function (li) {
                    sortorder += li.get('alt') + ',';
                });

                var req = new Request({
                    url: reorderPostUrl,
                    method: 'post',
                    autoCancel: true,
                    data: 'sortorder=' + sortorder
                    /*onRequest: function () {
                    //$('message-box').set('text', 'Updating the sort order in the database.');
                    alert('Opdatere databasen');
                    },
                    onSuccess: function (resp) {
                    //$('message-box').set('text', 'Database has been updated.');
                    alert(resp);
                    }*/
                });
                req.send();
            }
        });
    },

    //--- Function to expand or collpase node.
    toggleNode: function (ul, img) {
        if (ul.getStyle('display') == 'block') {
            this.collapseNode(ul, img);
        } else {
            this.expandNode(ul, img);
        }
    },

    //--- Function to expand node.
    expandNode: function (ul, img) {
        ul.setStyle('display', 'block');
        img.setProperties({ 'src': this.options.img.imagePath + this.options.img.imageOpen });
        Cookie.write(ul.getProperty('id'), true, { duration: 1, path: '/' });
    },

    //--- Function to collpase node.
    collapseNode: function (ul, img) {
        ul.setStyle('display', 'none');
        img.setProperties({ 'src': this.options.img.imagePath + this.options.img.imageClosed });
        Cookie.dispose(ul.getProperty('id'), { path: '/' });
    }
});

/*********************************************************/
/***** Class to generate layout for admin pages **********/
/*********************************************************/
var PageLayout = new Class({
    Implements: [Options, Events],

    options: {
        containerElm: '',
        headerElm: '',
        footerElm: '',
        contentContainerElm: '',
        indexElm: '',
        splitterElm: '',
        draggerElm: '',
        contentElm: '',
        indexWidth: 200
    },

    initialize: function (options) {
        this.setOptions(options);
        if (!this.container) {
            this.render();
            this.dragBorder();
        }
        window.addEvent('resize', this.resize.bind(this));

        $('panel-header-open').addEvent('click', function (e) {
            e.stop();
            $('left-collapsed').setStyle('display', 'block');
            $('left').setStyle('display', 'none');
            this.toggleIndex(false);
        } .bind(this));

        $('panel-header-closed').addEvent('click', function (e) {
            e.stop();
            $('left').setStyle('display', 'block');
            $('left-collapsed').setStyle('display', 'none');
            this.toggleIndex(true);
        } .bind(this));
    },

    dragBorder: function () {
        var dragElement = $(this.options.draggerElm);
        //var overlay = new Spinner('iframe');
        this.dragSplitter = new Drag.Move(dragElement, {
            snap: 0,
            limit: { x: [this.options.indexWidth, (window.getSize().x / 2)] },
            modifiers: { x: 'left', y: false },
            onBeforeStart: function (el) {
                el.set('opacity', '.50');
                $('ifarmeOverlay').setStyle('display', 'block');
            },
            onComplete: function (el) {
                var newXvalue = dragElement.getCoordinates().left
                $(this.options.indexElm).setStyle('width', newXvalue - 7);
                $(this.options.contentElm).setStyles({ left: $(this.options.draggerElm).getCoordinates().right }).setBoxWidth(window.getWidth() - 5 - (newXvalue));
                el.set('opacity', '1');
                $('ifarmeOverlay').setStyle('display', 'none');
            } .bind(this)
        });
    },

    toggleIndex: function (indexOpen) {
        if (!indexOpen) {
            this.oldIndexWidth = $(this.options.indexElm).getCoordinates().right;
            //--- Sætter bredde på index container
            $(this.options.indexElm).setStyle('background', 'transparent url(/Content/admin/panel-closed-bg.png) repeat-y').setBoxWidth(30);
            //--- Sætter venstre afstand på dragger
            $(this.options.draggerElm).setStyles({ 'left': 30, 'cursor': 'default' });
            //--- Sætter bredde på indholds container
            $(this.options.contentElm).setStyle('left', 35).setBoxWidth(window.getSize().x - 35);
            //--- Sætter top på panel-icon
            $$('.panel-icon').setStyle('top', $(this.options.indexElm).getBoxSize()[1] / 2 - 50);
            this.dragSplitter.detach();
        } else {
            //--- Sætter bredde på index container
            $(this.options.indexElm).setStyle('background', '#fff').setBoxWidth(this.oldIndexWidth);
            //--- Sætter venstre afstand på dragger
            $(this.options.draggerElm).setStyles({ 'left': this.oldIndexWidth, 'cursor': 'e-resize' });
            //--- Sætter bredde på indholds container
            $(this.options.contentElm).setStyle('left', this.oldIndexWidth + 5).setBoxWidth(window.getSize().x - this.oldIndexWidth - 5);
            this.dragSplitter.attach();
        }
    },

    render: function () {
        //--- Størelse på browser vindue.
        var ws = window.getSize();
        //--- Størelse på header div.
        if (this.options.headerElm)
            var hs = $(this.options.headerElm).getSize();
        //--- Størelse på footer div.
        if (this.options.footerElm)
            var fs = $(this.options.footerElm).getSize();
        //--- Størelse på index div.
        var is = $(this.options.indexElm).getSize();

        //--- Sætter styles på container.
        $(this.options.containerElm).setBoxSize(ws.x, ws.y);
        //--- Sætter styles på header.
        if (this.options.headerElm)
            $(this.options.headerElm).setBoxSize(ws.x, hs.y);
        //--- Sætter styles på footer.
        if (this.options.footerElm)
            $(this.options.footerElm).setBoxSize(ws.x, fs.y);

        var hfHeight = 0;
        if (this.options.headerElm || this.options.footerElm)
            hfHeight = hs.y + fs.y

        //--- Sætter styles på indholds container.
        $(this.options.contentContainerElm).setBoxSize(ws.x, ws.y - hfHeight);
        //--- Sætter styles på index.
        $(this.options.indexElm).setBoxSize(this.options.indexWidth, ws.y - hfHeight);
        //--- Sætter styles på menu-container felt i index
        $('menu-container').setBoxHeight(ws.y - hfHeight - 150);
        $('menu').setBoxHeight(ws.y - hfHeight - 185);
        //--- Sætter styles på dragger
        $(this.options.draggerElm).setStyles({
            left: $(this.options.indexElm).getStyle('width').toInt() + 7,
            top: (hs) ? hs.y:0
        }).setBoxHeight(ws.y - hfHeight);
        //--- Sætter styles på indhold
        $(this.options.contentElm).setStyles({
            left: $(this.options.indexElm).getStyle('width').toInt() + 12,
            top: (hs) ? hs.y:0
        }).setBoxSize(ws.x - ($(this.options.indexElm).getStyle('width').toInt() + 12), ws.y - hfHeight);
        //--- Sætter styles på indholds felt i indhold
        $(this.options.contentElm).getElementById('iframe').setBoxHeight(ws.y - hfHeight);
    },

    resize: function () {
        //--- Størelse på browser vindue.
        var ws = window.getSize();
        //--- Størelse på header div.
        if (this.options.headerElm)
            var hs = $(this.options.headerElm).getSize();
        //--- Størelse på footer div.
        if (this.options.footerElm)
            var fs = $(this.options.footerElm).getSize();
        //--- Størelse på index div.
        var is = $(this.options.indexElm).getSize();

        //--- Sætter størrelse på container
        $(this.options.containerElm).setBoxSize(ws.x, ws.y);
        //--- Sætter størrelse på header
        if (this.options.headerElm)
            $(this.options.headerElm).setBoxSize(ws.x, hs.y);
        //--- Sætter størrelse på footer
        if (this.options.footerElm)
            $(this.options.footerElm).setBoxSize(ws.x, fs.y);

        var hfHeight = 0;
        if (this.options.headerElm || this.options.footerElm)
            hfHeight = hs.y + fs.y

        //--- Sætter størrelse på indholds container
        $(this.options.contentContainerElm).setBoxSize(ws.x, ws.y - hfHeight);
        //--- Sætter størrelse på index
        $(this.options.indexElm).setBoxHeight(ws.y - hfHeight);
        //--- Sætter størrelse på indholds felt i index
        $('menu-container').setBoxHeight(ws.y - hfHeight - 150);
        $('menu').setBoxHeight(ws.y - hfHeight - 185);
        //--- Sætter størrelse på dragger
        $(this.options.draggerElm).setBoxHeight(ws.y - hfHeight);
        //--- Sætter størrelse på indhold
        $(this.options.contentElm).setBoxSize(ws.x - (is.x + 5), ws.y - hfHeight);
        //--- Sætter størrelse på indholds felt i indhold
        $(this.options.contentElm).getElementById('iframe').setBoxHeight(ws.y - hfHeight);
        //--- Kalder drag funktion.
        this.dragBorder();
    }
});

/*********************************************************/
/***** Class to generate context menu ********************/
/*********************************************************/
var ContextMenu = new Class({
    //implements
    Implements: [Options, Events],

    //options
    options: {
        actions: {},
        menu: 'contextmenu',
        stopEvent: true,
        targets: 'body',
        trigger: 'contextmenu',
        offsets: { x: 0, y: 0 },
        /*onShow: $empty,
        onHide: $empty,
        onClick: $empty,*/
        fadeSpeed: 200
    },

    //initialization
    initialize: function (options) {
        //set options
        this.setOptions(options)

        //option diffs menu
        this.menu = $(this.options.menu);
        this.targets = $$(this.options.targets);

        //fx
        this.fx = new Fx.Tween(this.menu, { property: 'opacity', duration: this.options.fadeSpeed });

        //hide and begin the listener
        this.hide().startListener();

        //hide the menu
        this.menu.setStyles({ 'position': 'absolute', 'top': '-900000px', 'display': 'block' });
    },

    //get things started
    startListener: function () {
        /* all elemnts */
        this.targets.each(function (el) {
            /* show the menu */
            el.addEvent(this.options.trigger, function (e) {
                //enabled?
                if (!this.options.disabled) {
                    //prevent default, if told to
                    if (this.options.stopEvent) { e.stop(); }
                    //record this as the trigger
                    this.options.element = $(el);
                    //position the menu
                    this.menu.setStyles({
                        top: (e.page.y + this.options.offsets.y),
                        left: (e.page.x + this.options.offsets.x),
                        position: 'absolute',
                        'z-index': '2000'
                    });
                    //show the menu
                    this.show();
                }
            } .bind(this));
        }, this);

        /* remove click events from menu items */
        this.menu.getElements('a').each(function(item){
            item.removeEvents();
        });

        /* add click events from menu items */
        this.menu.getElements('a').each(function (item) {
            item.addEvent('click', function (e) {
                if (!item.hasClass('disabled')) {
                    this.execute(item.get('href').split('#')[1], $(this.options.element));
                    this.fireEvent('click', [item, e]);
                }
            } .bind(this));
        }, this);

        //hide on body click
        $(document.body).addEvent('click', function () {
            this.hide();
        } .bind(this));
    },

    //show menu
    show: function () {
        this.fx.start(1);
        this.fireEvent('show');
        this.shown = true;
        return this;
    },

    //hide the menu
    hide: function () {
        if (this.shown) {
            this.fx.start(0);
            this.fireEvent('hide');
            this.shown = false;
        }
        return this;
    },

    //disable an item
    disableItem: function (item) {
        this.menu.getElements('a[href$=' + item + ']').addClass('disabled');
        return this;
    },

    //enable an item
    enableItem: function (item) {
        this.menu.getElements('a[href$=' + item + ']').removeClass('disabled');
        return this;
    },

    //diable the entire menu
    disable: function () {
        this.options.disabled = true;
        return this;
    },

    //enable the entire menu
    enable: function () {
        this.options.disabled = false;
        return this;
    },

    //execute an action
    execute: function (action, element) {
        if (this.options.actions[action]) {
            this.options.actions[action](element, this);
        }
        return this;
    }

});

/************************************************************/
/***** Class to generate overlay on page ********************/
/************************************************************/
var Overlay = new Class({
    Implements: [Options, Events],

    options: {
        id: 'overlay',
        color: '#000',
        duration: 500,
        opacity: 0.5,
        zIndex: 5000/*,
		onClick: $empty,
		onClose: $empty,
		onHide: $empty,
		onOpen: $empty,
		onShow: $empty
		*/
    },

    initialize: function (container, options) {
        this.setOptions(options);
        this.container = document.id(container);
        this.overlay = new Element('div', {
            id: this.options.id,
            opacity: 0,
            styles: {
                position: 'absolute',
                background: this.options.color,
                left: 0,
                top: 0,
                'z-index': this.options.zIndex
            },
            events: {
                click: function () {
                    this.fireEvent('click');
                } .bind(this)
            }
        }).inject(this.container);

        this.tween = new Fx.Tween(this.overlay, {
            duration: this.options.duration,
            link: 'cancel',
            property: 'opacity',
            onStart: function () {
                var size = this.container.getScrollSize();
                this.overlay.setStyles({
                    width: size.x,
                    height: size.y
                });
            } .bind(this),
            onComplete: function () {
                this.fireEvent(this.overlay.get('opacity') == this.options.opacity ? 'show' : 'hide');
            } .bind(this)
        });
    },
    open: function () {
        this.fireEvent('open');
        this.tween.start(this.options.opacity);
    },
    close: function () {
        this.fireEvent('close');
        this.tween.start(0);
    }
});


/*********************************************************/
/***** Class to generate popup window ********************/
/*********************************************************/
var Popup = new Class({
    Implements: [Options, Events],
    options: {
        width: 800,
        height: 500,
        top: 0,
        left: 0,
        headline: 'Overskrift',
        overlayId: 'pageOverlay',
        fullpageId: 'pageFullpage',
        popupId: 'windowContainer',
        url: ''
    },

    initialize: function (options) {
        this.setOptions(options);
        this.hidePopup();
        //this.createOverlay(this.options.overlayId, 'darken');
        //this.createFullPage(this.options.fullpageId);
    },

    create: function (html) {
        this.windowContainer = new Element('div', {
            'id': this.options.popupId,
            'class': 'resizeWindow',
            'styles': {
                'width': this.options.width,
                'display': 'block',
                'text-align': 'left',
                'display': 'none',
                'z-index': '1000000000'
            }
        }).inject(document.body); //.inject($(this.options.overlayId));

        //this.windowTop = new Element('div', { 'id': 'windowTop' }).inject(this.windowContainer);
        //this.topSpan = new Element('span').set({ 'text': this.options.headline }).inject(this.windowTop);
        this.windowTop = new Element('div', { 'id': 'windowTop' }).inject(this.windowContainer);
        this.windowClose = new Element('div', { 'id': 'windowClose' }).inject(this.windowContainer).addEvent('click', this.hidePopup.bind(this));
        this.windowMiddle = new Element('div', { 'id': 'windowMiddle', 'class': 'resizeWindow' }).inject(this.windowContainer);
        this.myIFrame = new IFrame({
            id: 'iframe_content',
            src: this.options.url,
            width: '100%',
            height: this.options.height,
            frameborder: '0'
        }).inject(this.windowMiddle);
        //this.windowMiddle.adopt(html);
        //this.resizeHandle = new Element('div', { 'id': 'windowResize' }).inject(this.windowContainer);
        var ws = window.getSize();
        if (this.options.top > 0 || this.options.left > 0) {
            this.windowContainer.setPosition({ x: this.options.left, y: this.options.top });
        }
        else {
            this.windowContainer.setPosition({ x: ws.x / 2 - (this.options.width / 2), y: ws.y / 2 - (this.options.height / 2) });
        }
        this.windowContainer.makeDraggable({ handle: this.windowTop, limit: { 'x': [0, 3000], 'y': [0, 3000]} });
        //$$('.resizeWindow').makeResizable({ handle: this.resizeHandle });

        this.windowContainer.setStyle('display', 'block');
    },

    showPopup: function (html) {
        this.create(html);
    },

    hidePopup: function () {
        if ($(this.options.popupId) != null) {
            $(this.options.popupId).dispose();
        }

        $(this.options.overlayId).setStyle('visibility', 'hidden');

        //if ($(this.options.overlayId) != null)
        //    $(this.options.overlayId).dispose();
        //if ($(this.options.fullpageId) != null)
        //    $(this.options.fullpageId).dispose();
        //this.removeOverlay();
    }
});

Element.implement({
    getBorderSizes: function() {
        var s = [];
        s[0] = this.getStyle('border-top-width').toInt();
        s[1] = this.getStyle('border-right-width').toInt();
        s[2] = this.getStyle('border-bottom-width').toInt();
        s[3] = this.getStyle('border-left-width').toInt();
        return s;
    },
    getMarginSizes: function() {
        var s = [];
        s[0] = this.getStyle('margin-top').toInt();
        s[1] = this.getStyle('margin-right').toInt();
        s[2] = this.getStyle('margin-bottom').toInt();
        s[3] = this.getStyle('margin-left').toInt();
        return s;
    },
    getBoxSize: function(el) {
        var size = [0, 0];
        var m = this.getMarginSizes();
        size[1] = this.offsetHeight + (m[0] + m[2]);
        size[0] = this.offsetWidth + (m[1] + m[3]);
        return size;
    },
    setBoxHeight: function(h) {
        var b = this.getBorderSizes();
        var m = this.getMarginSizes();
        h = (h - (b[0] + b[2]) - (m[0] + m[2]));
        this.setStyle('height', h);
    },
    setBoxWidth: function(w) {
        var b = this.getBorderSizes();
        var m = this.getMarginSizes();
        w = (w - (b[1] + b[3]) - (m[1] + m[3]));
        this.setStyle('width', w);
    },
    setBoxSize: function(w, h) {
        var b = this.getBorderSizes();
        var m = this.getMarginSizes();
        h = (h - (b[0] + b[2]) - (m[0] + m[2]));
        w = (w - (b[1] + b[3]) - (m[1] + m[3]));
        this.setStyle('height', h);
        this.setStyle('width', w);
    }
});