toostis = {
    widget: function(options) {
        this.host = 'http://toostis.com';

        // Style
        this._css();
        this._options(options);

        var id = "t-widget-" + toostis.widget.num++;
        document.write('<div class="t-widget" id="' + id + '"></div>');
        this.widget = document.getElementById(id);
        this.widget.widget = this;

        // Callback
        var _this = this;
        if (typeof this.num == "undefined") {
            this.num = 0;
        } else {
            this.num += 1;
        }
        toostis.widget['_list_' + this.num] = function(events, page, count) {
            _this._list(events, page, count)
        };

        // Create header
        this.title = document.createElement('h1');
        this.title.innerHTML = this.options.title.replace(/<\/?[^>]+>/gi, '');
        this.title.style.color = this.style.header_color;
        this.title.style.background = this.style.header_back;
        this.widget.appendChild(this.title);
        this.widget.style.width = this.style.width;

        // Make a remote call
        this._get(1);

        // Create list element
        this.list = document.createElement('div');
        this.list.setAttribute('class', 'list');
        this.list.style.background = this.style.frame_back;
        this.widget.appendChild(this.list);

        // Create footer
        var footer = document.createElement('div');
        footer.setAttribute('class', 'footer');
        footer.style.background = this.style.header_back;
        var link = document.createElement('a');
        link.setAttribute('href', 'http://toostis.com');
        var img = document.createElement('img');
        img.setAttribute('src', this.host + '/gfx/newt/logo-tiny.png');
        img.setAttribute('alt', 'toostis');
        this.pages = document.createElement('div');
        this.pages.setAttribute('class', 'pages');
        link.appendChild(img);
        footer.appendChild(link);
        footer.appendChild(this.pages);
        this.widget.appendChild(footer);
    }
}

toostis.widget.num = 0;

toostis.widget.prototype = {
    _options: function(options) {
        this.options = {
            title: 'Events',
            name: '',
            code: '',
            lang: 'en',
            types: ['participated', 'observed']
        };

        for (var name in this.options) {
            if (typeof options[name] != "undefined") {
                this.options[name] = options[name];
            }
        }

        this.style = {
            width: '300px',
            header_back: '#C74419',
            header_color: '#FFF',
            frame_back: '#777',
            frame_color: '#FFF'
        };

        for (var name in this.style) {
            if (typeof options[name] != "undefined") {
                this.style[name] = options[name];
            }
        }
    },

    _list: function(days, page, numpages) {
        // Clean up
        this.list.innerHTML = '';
        this.pages.innerHTML = '';

        // Load days
        for (i=0; i<days.length; i++) {
            day = days[i];

            // Create day element
            var daytitle = document.createElement('div');
            daytitle.setAttribute('class', 'day-title');
            daytitle.style.color = this.style.frame_color;
            daytitle.innerHTML = day.title;
            this.list.appendChild(daytitle);

            // Events
            for (j=0; j<days[i].events.length; j++) {
                var event = this._event(days[i].events[j]);
                if (j == days[i].events.length-1) {
                    event.setAttribute('class', 'event last');
                }
                this.list.appendChild(event);
            }
        }
        
        // Page buttons
        if (page > 1) {
            var bckpage = document.createElement('img');
            bckpage.setAttribute('src', this.host + '/gfx/newt/icons/arrow-little-white-left.png');
            _this = this;
            bckpage.onclick = function() {_this._get(page-1)};
            this.pages.appendChild(bckpage);
        }
        if (numpages > page) {
            var fwdpage = document.createElement('img');
            fwdpage.setAttribute('src', this.host + '/gfx/newt/icons/arrow-little-white-right.png');
            _this = this;
            fwdpage.onclick = function() {_this._get(page+1)};
            this.pages.appendChild(fwdpage);
        }
    },

    _event: function(event) {
        var involveid = 'involve_' + event.id;
        var eventel = document.createElement('div');
        eventel.setAttribute('class', 'event');
        eventel.style.borderColor = this.style.frame_back;
        eventel.onmouseover = function() { document.getElementById(involveid).style.display = 'inline'; };
        eventel.onmouseout = function() { document.getElementById(involveid).style.display = 'none'; };
        var info = document.createElement('div');
        info.setAttribute('class', 'info');
        var title = document.createElement('a');
        title.setAttribute('href', event.url);
        title.setAttribute('class', 'title');
        title.innerHTML = event.title;
        var img = document.createElement('div');
        img.style.background = 'url(\'' + event.img + '\')';
        img.setAttribute('class', 'img');
        var spacetime = document.createElement('div');
        spacetime.setAttribute('class', 'spacetime');
        spacetime.innerHTML = event.spacetime;
        var part = document.createElement('a');
        part.setAttribute('id', involveid);
        part.setAttribute('href', this.host + '/event/' + event.id + '/participate?result=redirect&on=');
        part.setAttribute('class', 'involve');
        part.innerHTML = 'join';
        part.style.background = this.style.frame;
        info.appendChild(part);
        info.appendChild(img);
        info.appendChild(title);
        info.appendChild(spacetime);
        eventel.appendChild(info);
        return eventel;
    },

    _css: function() {
        var link = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', this.host + '/css/widget.css');
        document.getElementsByTagName('head')[0].appendChild(link);
    },

    _get: function(page) {
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', this.host + '/widget/' +
                                     '?name=' + this.options.name +
                                     '&code=' + this.options.code +
                                     '&types=' + this.options.types.join(', ') +
                                     '&lng=' + this.options.lang +
                                     '&page=' + page +
                                     '&num=' + this.num);
        document.getElementsByTagName('head')[0].appendChild(script);
    },
}