var Selections = new Class({
    Implements: Options,
    options: {
        dataUrl: '/data/selections.aspx',
        container: 'container'
    },

    initialize: function(year, semester, grade, options) {
        this.setOptions(options);
        this.container = $(this.options.container);
        
        this.year = year;
        this.semester = semester;
        this.grade = grade;
        
        this.index = 0;
        this.load();
    },
    
    load: function() {
        var url = this.options.dataUrl + '?y=' + this.year + '&s=' + this.semester + '&g=' + this.grade;
        new Request.JSON({ 'url': url, 'method': 'get',
            'onSuccess': function(result) {
                this.pages = [];
                var page = -1;
                
                result.each(function(g) {
                    if (g.Page != page) {
                        page = g.Page;
                        var p = {};
                        p.Page = g.Page;
                        p.Groups = [];
                        this.pages[this.pages.length] = p;
                    }
                    this.pages[this.pages.length-1].Groups[this.pages[this.pages.length-1].Groups.length] = g;
                }.bind(this));
                
                this.showPage();
   
            }.bind(this)}).send();
    },
    
    showPage: function() {
        this.container.empty();
        
        var page = this.pages[this.index];
        switch (page.Page) {
            case 0: // intro
                this.showIntro(page); break;
            case 1: // compulsory
                this.showCompulsory(page); break;
            case 2: // elective
                this.showElective(page); break;
        }

        var btns = new Element('p', { 'styles': { 'text-align': 'right' }}).inject(this.container)
        if (this.index > 0) {
            new Element('input', { 'type': 'button', 'value': '< Back', 'events': { 'click': function() {
                    this.previousPage();
                }.bind(this) }}).inject(btns);
        }
        new Element('input', { 'type': 'button', 'value': 'Next >', 'events': { 'click': function() {
                if (this.validate())
                    this.nextPage();
            }.bind(this) }}).inject(btns);
    },

    showIntro: function(page) {
        for (var i=0; i<page.Groups.length; i++) {
            if (i>0) new Element('hr').inject(this.container);
            new Element('div').set('html', page.Groups[i].Instructions).inject(this.container);
        }
    },
    
    showCompulsory: function(page) {
        for (var i=0; i<page.Groups.length; i++) {
            if (i>0) new Element('hr').inject(this.container);
            
            var g = page.Groups[i];
            new Element('div').set('html', g.Instructions).inject(this.container);
            
            if (g.Options.length > 0) {
                var col = new Element('div', { 'styles': { 'float': 'left', 'width': '350px' }}).inject(this.container);
                for (var j=0; j<g.Options.length; j++) {
                    var o = g.Options[j];
                    
                    var el = new Element('div').inject(col);
                    var name = 'g-' + g.ID;
                    var id = 'c-' + o.ID;
                    if (o.element)
                        o.element.inject(el);
                    else
                        o.element = new Element('input', { 'type': 'radio', 'id': id, 'name': name }).inject(el);
                    new Element('label', { 'for': id }).set('text', o.CourseCode + ' (' + o.CourseName + ')').inject(el);
                    if (o.Prerequisite.length > 0) new Element('span', { 'class': 'prerequisite' }).set('text', 'Prerequisite: ' + o.Prerequisite).inject(el);
                }
                
                col = new Element('div', { 'styles': { 'float': 'left', 'width': '300px', 'margin-left': '20px' }}).inject(this.container);
                new Element('span').set('text', 'Enter any comments about your selections here:').inject(col);
                new Element('br').inject(col);
                if (g.element)
                    g.element.inject(col);
                else
                    g.element = new Element('textarea', { 'styles': { 'height': '60px', 'width': '200px' }}).inject(col);
                
                new Element('div', { 'class': 'clear' }).inject(this.container);
            }
        }
    },
    
    showElective: function(page) {
        var choices = this.electiveCredits();
        
        for (var i=0; i<page.Groups.length; i++) {
            if (i>0) new Element('hr').inject(this.container);
            
            var g = page.Groups[i];
            new Element('div').set('html', g.Instructions).inject(this.container);
            
            if (g.Options.length > 0) {
                var col = new Element('div', { 'styles': { 'float': 'left', 'width': '350px' }}).inject(this.container);
                for (var j=0; j<g.Options.length; j++) {
                    var o = g.Options[j];
                    
                    var el = new Element('div').inject(col);
                    var id = 'c-' + o.ID;
                    if (o.element) {
                        o.element.empty();
                        o.element.inject(el);
                    }
                    else
                        o.element = new Element('select', { 'id': id, 'events': { 'change': function() {
                                this.set('key', this.value);
                            }}}).inject(el);

                    new Element('option').inject(o.element);
                    for (var k=1; k<=choices; k++) {
                        new Element('option', { 'value': k }).set('text', k).inject(o.element);
                    }

                    var sel = parseInt(o.element.get('key'));
                        console.log(sel);
                    if (!isNaN(sel))
                        o.element.selectedIndex = sel;

                    new Element('span').set('text', o.CourseCode + ' (' + o.CourseName + ')').inject(el);
                    if (o.Prerequisite.length > 0) new Element('span', { 'class': 'prerequisite' }).set('text', 'Prerequisite: ' + o.Prerequisite).inject(el);
                }
                
                col = new Element('div', { 'styles': { 'float': 'left', 'width': '300px', 'margin-left': '20px' }}).inject(this.container);
                new Element('span').set('text', 'Enter any comments about your selections here:').inject(col);
                new Element('br').inject(col);
                if (g.element)
                    g.element.inject(col);
                else
                    g.element = new Element('textarea', { 'styles': { 'height': '60px', 'width': '200px' }}).inject(col);
                
                new Element('div', { 'class': 'clear' }).inject(this.container);
            }
        }
    },
        
    validate: function() {
        var page = this.pages[this.index];
        var result = true;
    
        page.Groups.each(function(g) {
            if (g.Options.length > 0) {
                var complete = false;
                if (g.element.value.length > 0)
                    complete = true;
                else {
                    g.Options.each(function(o) {
                        if (o.element.checked) complete = true;
                    }.bind(this));
                }
                if (!complete) {
                    result = false;
                    alert ('You have not filled in your selection in the ' + g.Name + ' section. If you do not select a course you must enter your reason in the comment box.');
                }
            }
        }.bind(this));
        
        return result;
    },
    
    previousPage: function() {
        if (this.index > 0) {
            this.index--;
            this.showPage();
        }
    },
    
    nextPage: function() {
        this.index++;
        this.index < this.pages.length ? this.showPage() : this.showConfirmation();
    },
    
    showConfirmation: function() {
    },
    
    electiveCredits: function() {
        switch (this.grade) {
            case 10:
                return 4;
            case 11:
                return 6;
            case 12:
                return 6;
            default:
                return 0;
        }
    }
});