var Solution = Class.create();

Object.extend(Object.extend(Solution.prototype, GliderBox.prototype), {
    initialize: function() {
        this.startProject = toolkit.getQuery() || undefined;
        this.currentProject = 0;
        this.container = 'solutions';
        this.noprevnextSlide = true;
        this.noquickjump = true;
        // solutions is a simple case because each project has 1 image and all
        // projects belong to 1 default set. hence, selectFx = loadProject and
        // nextProj = next and prevProj = prev
        this.selectFx = this.loadProject;
        this.nextProj = this.next;
        this.prevProj = this.prev;
        new Ajax.Request("php/solutions.php", {
            onSuccess: this.onResponse.bind(this)
        });
    },
    prev: function(e) {
        if (e) Event.stop(e);
        --this.currentProject;
        if (this.currentProject < 0)
            this.currentProject = this.images.length - 1;
        this.loadProject();
        this.updateControls();
    },
    next: function(e) {
        if (e) Event.stop(e);
        ++this.currentProject;
        if (this.currentProject == this.images.length)
            this.currentProject = 0;
        this.loadProject();
        this.updateControls();
    },
    onResponse: function(t) {
        this.set = t.responseText.evalJSON();
        this.makeSelectMenu();
        $$('form fieldset')[0].appendChild(this.select);
        this.images = this.loadImages(this.buildImagesArray());
        this.player = this.composePlayer();
        this.loadGliderBox();
        if (this.startProject) this.currentProject = this.startProject;
        this.loadProject();
    },
    makeSelectMenu: function() {
        var s = document.createElement('select');
        this.set.projects.each( function(p, index) {
            var o = document.createElement('option');
            o.value = index;
            var t = document.createTextNode(p.project.title);
            o.appendChild(t);
            s.appendChild(o);
        });
        Event.observe(s, "change",
            this.selectFx.bindAsEventListener(this), false);
        this.select = s;
    },
    buildImagesArray: function() {
        var a = this.set.projects.collect(function(s) {
            return s.project.slideImages.image;
        });
        return a;
    },
    loadProject: function(e) {
        if (e) { 
            Event.stop(e);
            var n = this.select.value;
        } else {
            var n = this.currentProject;
        }
        this.glideToProject(n);
        this.displayContent(n)
        $('solutionsControls').getElementsBySelector('select')[0].selectedIndex
            = n;
        this.updateControls();
    },
    displayContent: function(n) {
        this.composeContentObject();
        var p = this.set.projects[n].project;
        this.content.title.innerHTML = p.title;
        if (p.url) 
            this.content.url.innerHTML = '|&nbsp;&nbsp;' + p.url;
        if (p.body.section instanceof Array) {
            // 1+ sections
            for (var i = 0; i < p.body.section.length; ++i) {
                var w = this.content.section.div.cloneNode(true);
                if (p.body.section[i].title) {
                    w.childNodes[0].innerHTML = p.body.section[i].title;
                }
                w.childNodes[1].innerHTML = p.body.section[i].body;
                this.content.body.appendChild(w);
            }
        } else if (p.body.section instanceof Object) {
            // 1 section
            var w = this.content.section.div.cloneNode(true);
                if (p.body.section.title) {
                    w.childNodes[0].innerHTML = p.body.section.title;
                }
                w.childNodes[1].innerHTML = p.body.section.body;
                this.content.body.appendChild(w); 
        }
        if ($('projectContent')) {
            $(this.container).replaceChild(this.content.div, $('projectContent'));
        } else {
            $(this.container).appendChild(this.content.div);
        }
        postStyling();
    }
});