var Namespace = new function() {

    var draggables = new Object();
    var widgets = new Array();
    var widgets_by_name = new Object();
    var div_name = 'widgets';
    var X_SIZE = 4;
    var Y_SIZE = 2;
    var WIDGET_WIDTH = 254;
    var WIDGET_HEIGHT = 278;
    var ROOT_WIDTH = X_SIZE * WIDGET_WIDTH;
    var ROOT_HEIGHT = Y_SIZE * WIDGET_HEIGHT;
    var config = new Object();

    function WidgetLayout(div_name) {
        this.name = "WidgetLayout";
        this.div_name = div_name;
        this.widgets_div = document.getElementById(this.div_name);
        this.target_widget = null;
        this.temporarily_moved = null;
        this.drop_border_div = null;
    }

    WidgetLayout.prototype.add = function(widget) {
        var self = this;
        if (IE) {
            var draggable = new Draggable(widget.div_name, { revert: false,
                handle: widget.titlebar_div_name,
                onStart: function(draggable, event) { self.on_start(draggable, event); },
                onEnd: function(draggable, event) { self.on_end(draggable, event); },
                onDrag: function(draggable, event) { self.on_drag(draggable, event); },
                starteffect: function(){},
                endeffect: function(){} });
        } else {
            var draggable = new Draggable(widget.div_name, { revert: false,
                handle: widget.titlebar_div_name,
                onStart: function(draggable, event) { self.on_start(draggable, event); },
                onEnd: function(draggable, event) { self.on_end(draggable, event); },
                onDrag: function(draggable, event) { self.on_drag(draggable, event); } });
        }
        draggables[draggable] = widget;
        widgets.push(widget);
        widgets_by_name[widget.div_name] = widget;
        widget.set_size(WIDGET_WIDTH, WIDGET_HEIGHT);
    }

    WidgetLayout.prototype.on_start = function(draggable, event) {
        var div_name = draggable.element.id;
        var widget = widgets_by_name[div_name];
        this.create_drop_border(widget);
    }

    WidgetLayout.prototype.create_drop_border = function(target_widget) {
        this.destroy_drop_border();
        var target_div = document.getElementById(target_widget.div_name);
        var left = target_widget.left - 2;
        var top = target_widget.top - 2;
        var style = "position: absolute;";
        style += " width: " + WIDGET_WIDTH + "px;";
        style += " height: " + WIDGET_HEIGHT + "px;";
        style += " left: " + left + "px; top: " + top + "px;";
        style += " border: 2px dashed #cccccc;";
        var div = document.createElement("div");
        div.setAttribute("id", "widgets_drop_border");
        div.setAttribute("style", style);
        this.widgets_div.appendChild(div);
        this.drop_border_div = div;
    }

    WidgetLayout.prototype.destroy_drop_border = function() {
        if (this.drop_border_div) {
            this.widgets_div.removeChild(this.drop_border_div);
            this.drop_border_div = null;
        }
    }

    WidgetLayout.prototype.on_end = function(draggable, event) {
        var div_name = draggable.element.id;
        var widget = widgets_by_name[div_name];

        this.destroy_drop_border();

        if ((this.target_widget == widget) || (! this.target_widget)) {
            widget.move_to_place();
            this.target_widget = null;
            this.temporarily_moved = null;
            return;
        }
        var left = this.target_widget.left;
        var top = this.target_widget.top;
        widget.move_to(left, top);
        this.target_widget.settle();
        this.target_widget = null;
        this.temporarily_moved = null;
        this.save_layout();
    }

    WidgetLayout.prototype.save_layout = function() {
        // save layout to cookie
        save_widget_cookie('layout0.01', this.get_settings());
        save_widget_cookie('config', this.get_config());
    }

    WidgetLayout.prototype.on_drag = function(draggable, event) {
        var w = widgets[0];
        var div = document.getElementById(w.div_name);
        //new Effect.Highlight(div, { startcolor: '#ffff99', endcolor: '#ffffff' });
        this.invade(draggable, event);
    }

    WidgetLayout.prototype.invade = function(draggable, event) {
        var div_name = draggable.element.id;
        var widget = widgets_by_name[div_name];

        var rel_x = event.clientX - this.widgets_div.offsetLeft;
        var rel_y = event.clientY - this.widgets_div.offsetTop;

        target_widget = this.widget_collides(rel_x, rel_y);
        if (target_widget == this.target_widget)
            return;

        if (this.temporarily_moved) {
            this.create_drop_border(widget);
            this.temporarily_moved.move_to_place();
            this.temporarily_moved = null;
        }

        if (target_widget == widget) {
            this.debug('same');
            this.target_widget = target_widget;
            return;
        }
        this.debug(target_widget);
        if (target_widget) {
            this.create_drop_border(target_widget);
            target_widget.temporarily_move_to(widget.left, widget.top);
            this.temporarily_moved = target_widget;
        }
        this.target_widget = target_widget;
    }

    WidgetLayout.prototype.debug = function(text) {
        return;
        var div0 = document.getElementById(widgets[0].div_name);
        div0.innerHTML = text;
    }

    WidgetLayout.prototype.widget_collides = function(x, y) {
        for (var i=0; i<widgets.length; i++) {
            var widget = widgets[i];
            if ((x >= widget.left) && (y >= widget.top) &&
                (x < widget.left + widget.width) && (y < widget.top + widget.height))
                    return widget;
        }
        return null;
    }

    WidgetLayout.prototype.repos = function() {
        var xstart = 0;
        var ystart = 0;
        var xpos = 0;
        var ypos = 0;
        for (var i=0; i<widgets.length; i++) {
            var widget = widgets[i];
            if (xpos >= X_SIZE) {
                ypos ++;
                xpos = 0;
            }
            var x = xstart + xpos * WIDGET_WIDTH;
            var y = ystart + ypos * WIDGET_HEIGHT;
            widget.move_to(x, y);
            xpos ++;
        }
    }

    WidgetLayout.prototype.start = function() {
        timeservice_start();
        // load layout from cookie
        var data = load_widget_cookie('config');
        if (data) {
            this.set_config(data);
        }
        var data = load_widget_cookie('layout0.01');
        if (data) {
            this.set_settings(data);
        } else {
            this.repos();
        }
        for (var i=0; i<widgets.length; i++) {
            var widget = widgets[i];
            widget.start();
        }
        this.fireup_homepage_box();
    }

    WidgetLayout.prototype.create_widget_divs = function() {
        var count = Y_SIZE * X_SIZE;
        for (var i=0; i<count; i++) {
            var div_name = "widget_" + i;
            var div = document.createElement("div");
            div.setAttribute("id", div_name);
            set_class(div, "widget");
            this.widgets_div.appendChild(div);
        }
    }

    WidgetLayout.prototype.settings_changed = function(widget) {
        var data = widget.get_settings();
        save_widget_cookie(widget.div_name, data);
    }

    WidgetLayout.prototype.set_settings = function(data) {
        var parts = data.split("__", 2);
        if (parts.length < 2) return;
        if (parts[0] != "WidgetLayout") return;
        parts = unescape(parts[1]).split(":");

        for (var i=1; i<parts.length; i++) {
            var parts2 = parts[i].split(",");
            var div_name = parts2[0];
            var left = parts2[1];
            var top = parts2[2];
            var widget = widgets_by_name[div_name];
            widget.move_to(left, top);
            widget.settle();
        }
    }

    WidgetLayout.prototype.set_config = function(data) {
        var parts = unescape(data).split(':');
        for (var i=0; i<parts.length; i++) {
            var parts1 = jQuery.trim(parts[i]);
            if (! parts1) continue;
            var parts2 = parts[i].split('=');
            var name = parts2[0];
            var value = parts2[1];
            config[name] = value;
        }
    }

    WidgetLayout.prototype.get_config = function() {
        var arr = [];
        for (var name in config) {
            arr.push(name + '=' + config[name]);
        }
        var data = arr.join(':');
        return escape(data);
    }

    WidgetLayout.prototype.get_settings = function() {
        var data = "WidgetLayout__layout";
        for (var i=0; i<widgets.length; i++) {
            var widget = widgets[i];
            data += ":" + widget.div_name + "," + widget.left + "," + widget.top;
        }
        return escape(data);
    }

    WidgetLayout.prototype.init_widget = function(widget_name, div_name, dct) {
        var widget = widget_init(widget_name, div_name);
        var data = load_widget_cookie(div_name);
        if (data) {
            widget.set_settings(data);
        } else {
            if (dct) {
                widget.set_initial_values(dct);
            }
        }
        widget.add_settings_listener(callback(this.settings_changed, {bind: this}));
        return widget;
    }

    WidgetLayout.prototype.reset_all = function() {
        config = new Object();
        this.repos();
        this.save_layout();
        var widget;
        widget = widgets_by_name["widget_1"];
        widget.change_timezone("Bratislava", "Europe/Bratislava");
        widget = widgets_by_name["widget_4"];
        widget.change_timezone("Londýn", "Europe/London");
        widget = widgets_by_name["widget_5"];
        widget.change_timezone("Bratislava", "Europe/Bratislava");
        widget = widgets_by_name["widget_6"];
        widget.change_timezone("New York", "America/New_York");
        widget = widgets_by_name["widget_7"];
        widget.change_timezone("Sydney", "Australia/Sydney");
    }

    WidgetLayout.prototype.fireup_homepage_box = function() {
        if (config.hpbc) {
            return;
        }
        var div = document.createElement("div");
        jQuery(div).attr('id', 'homepage_div');
        var ahref = document.createElement("a");
        jQuery(ahref).text('Presný čas').attr('href', '/').click(function() { return false; });
        var span = document.createElement("span");

        if (jQuery.browser.mozilla) {
            jQuery(span).text(' - Potiahni tento rámček na ikonku domčeka na lište, ak chceš Presný Čas ako domácu stránku.');
        } else {
            jQuery(span).text(' - Ak chceš mať Presný Čas ako záložku, stlač CTRL+D.');
        }

        var img = document.createElement("img");
        var self = this;
        jQuery(img).attr('src', '/images/icon_x.png').click(function() {
            jQuery(div).hide('slow');
            config['hpbc'] = 1;         // homepage box closed
            self.save_layout();
            });
        div.appendChild(ahref);
        div.appendChild(span);
        div.appendChild(img);
        this.widgets_div.appendChild(div);
    }

    WidgetLayout.prototype.load = function() {
        //cookie_magic();

        this.create_widget_divs();

        timeservice_init();

        var widget0 = this.init_widget("Advert", "widget_0");
        //var widget1 = this.init_widget("PFCountdown", "widget_1");
        var widget1 = this.init_widget("AnalogClock", "widget_1", {'timezone_name': "Bratislava", 'timezone_tzname': "Europe/Bratislava"});
        var widget2 = this.init_widget("Calendar", "widget_2");
        var widget3 = this.init_widget("Community", "widget_3");
        var widget4 = this.init_widget("DigitalClock", "widget_4", {'timezone_name': "Londýn", 'timezone_tzname': "Europe/London"});
        var widget5 = this.init_widget("DigitalClock", "widget_5", {'timezone_name': "Bratislava", 'timezone_tzname': "Europe/Bratislava"});
        var widget6 = this.init_widget("DigitalClock", "widget_6", {'timezone_name': "New York", 'timezone_tzname': "America/New_York"});
        var widget7 = this.init_widget("DigitalClock", "widget_7", {'timezone_name': "Sydney", 'timezone_tzname': "Australia/Sydney"});

        this.add(widget0);
        this.add(widget1);
        this.add(widget2);
        this.add(widget3);
        this.add(widget4);
        this.add(widget5);
        this.add(widget6);
        this.add(widget7);

        var self = this;
        jQuery('#reset_button span.clickable').bind('click', function(event) {
            self.reset_all();
            });
    }

    return {
        WidgetLayout: WidgetLayout
    }

}

var WidgetLayout = Namespace.WidgetLayout;