var ClimateWatch = {
    servletName: 'ClimateWatch',
    
    init: function() {
        $$(".formerrorfield").each(function(i) {
            Event.observe(i, "change", function(fld) { fld.removeClassName("formerrorfield"); }.bind(ClimateWatch, i));
        });
    },
    
    openUrl: function(url) {
        window.location = "/" + ClimateWatch.servletName + url;
    }
}

ClimateWatch.DOM = {
    createElement: function(type, properties, attachTo) {
        var e = document.createElement(type);
        for (a in properties) {
            if (a == "clazz") {
                e.setAttribute("class", properties[a]);
            } else {
                e.setAttribute(a, properties[a]);
            }
        }
        if (attachTo) {
            attachTo.appendChild(e);
            return $(e);
        }
        return e;
    }
}

ClimateWatch.Calendar = Class.create();
ClimateWatch.Calendar.init = function() {
    Rico.loadModule("Calendar");
}
ClimateWatch.Calendar.prototype = {
    ele: null,
    btn: null,
    cal: null,
    
    initialize: function(inputElement) {
        this.ele = inputElement;
        this.btn = $(inputElement.id + "_cal");
        this.cal = new Rico.CalendarControl(inputElement.id + "_calendar");
        this.cal.returnValue = this.onChange.bind(this);
        this.cal.setDateFmt("dd mmm yyyy");
        this.cal.atLoad();
        Event.observe(this.btn, "click", this.show.bindAsEventListener(this));
    },
    
    show: function(e) {
        if (Element.visible(this.cal.container)) {
            return;
        }
        RicoUtil.positionCtlOverIcon(this.cal.container, this.btn);
        this.cal.open(this.ele.value);
        Event.stop(e);
    },
    
    onChange: function(newValue) {
        this.ele.value = newValue;
    }
}

ClimateWatch.Effect = {
    blindUpOrDown: function(e) {
        var queueScope = e.id + "_scope";
        if (e.visible()) {
            Effect.BlindUp(e, {queue: {position: 'end', scope: queueScope} });
        } else {
            Effect.BlindDown(e, {queue: {position: 'end', scope: queueScope} });
        }
    }
}

ClimateWatch.Wizard = Class.create();
ClimateWatch.Wizard.prototype = {
    wizardName: null,
    numberOfSteps: null,
    currentStep: null,
    postLoadCallback: null,
    iframeName: null,
    
    initialize: function(wizardName, numberOfSteps, postLoadFn, iframe) {
        this.wizardName = wizardName;
        this.numberOfSteps = numberOfSteps;
        this.postLoadCallback = postLoadFn;
        this.iframeName = iframe;
        this.currentStep = 0;
        
        for (var i = 1; i < this.numberOfSteps; i++) {
            var stepLink = $(this.wizardName + "_step" + i);
            if (stepLink != null) {
                Event.observe(stepLink, 'click', this.showStep.bind(this, i));
            }
        }
        
        if (this.iframeName != null) {
            Event.observe($(this.iframeName), "load", this.showNextStep.bind(this));
        }
        
        this.showStep(1);
    },
    
    fullSubmit: function() {
        var form = $(this.wizardName + "_form");
        form.submit();
    },
    
    serializeAndShowNext: function(stepNumber) {
        if (this.iframeName != null) {
            // IFRAME
            var form = $(this.wizardName + "_form");
            form.target = this.iframeName;
            if ((null == form.onsubmit) || (form.onsubmit()))
            	form.submit();
        } else {
            // AJAX
            var form = $(this.wizardName + "_form");
            var formValues = form.serialize(true);
            new Ajax.Request("step" + stepNumber + ".htm", 
                             {parameters: formValues, onComplete: this.showStep.bind(this, stepNumber + 1)});
        }
    },
    
    showNextStep: function() {
        this.showStep(this.currentStep + 1);
    },
    
    showStep: function(stepNumber) {
        this.currentStep = stepNumber;
        var div = $(this.wizardName + "_div");
        div.innerHTML = 'Loading...';
        new Ajax.Updater(div, "step" + stepNumber + ".htm", {method: "get", onComplete: this.addButton.bind(this)});
    },
    
    addButton: function() {
        var div = $(this.wizardName + "_div");
        //var controlDiv = ClimateWatch.DOM.createElement("div", {}, div);
        var buttonDiv = ClimateWatch.DOM.createElement("div", {style: "width: 400px; height: 30px; padding: 10px; "}, div);
        
        var prevButton = null;
        var nextButton = null;
        var submitButton = null;
        
        // Add the previous button
        if (this.currentStep > 1) {
            //prevButton = ClimateWatch.DOM.createElement("span", {clazz: "link"}, buttonDiv);
//            //prevButton.innerHTML = "<img style=\"vertical-align: middle; \" src=\"/ClimateWatch/images/icons/left.png\"/>&nbsp;Previous";
//            prevButton.innerHTML = "<input type=\"button\" value=\"Back\"/>"
//            Event.observe(prevButton, 'click', this.showStep.bind(this, this.currentStep - 1));
//            ClimateWatch.DOM.createElement("span", {}, buttonDiv).innerHTML = "&nbsp;&nbsp;";
            prevButton = ClimateWatch.DOM.createElement("input", {type: "button", value: "Back", clazz: "button", style: "float: left"}, buttonDiv);
            Event.observe(prevButton, 'click', this.showStep.bind(this, this.currentStep - 1));
        }
        if (this.currentStep == this.numberOfSteps) {
            // Add the save button
            button = ClimateWatch.DOM.createElement("input", {type: "submit", value: "Save", clazz: "button", style : "float: right"}, buttonDiv);
            Event.observe(button, 'click', this.fullSubmit.bind(this));
        } else {
            // Add the next button
            nextButton = ClimateWatch.DOM.createElement("input", {type: "button", value: "Continue", clazz: "button", style : "float: right"}, buttonDiv);
            //nextButton = ClimateWatch.DOM.createElement("span", {clazz: "link"}, buttonDiv);
//            //nextButton.innerHTML = "Next&nbsp<img style=\"vertical-align: middle; \" src=\"/ClimateWatch/images/icons/right.png\"/>";
            //nextButton.innerHTML = "<input type=\"button\" value=\"Continue\"/>"
            Event.observe(nextButton, 'click', this.serializeAndShowNext.bind(this, this.currentStep));
        }
        this.postLoadCallback();
    }
}

ClimateWatch.Popup = {
    popup: null,
    
    init: function() {
        this.popup = $("popup");
    },
    
    showAt: function(x, y) {
        this.popup.style.top = y + "px";
        this.popup.style.left = x + "px";
        this.popup.style.zIndex = 1000;
        this.popup.style.display = "block";
    },
    
    populate: function(url) {
        new Ajax.Updater($("popupcontent"), url, {method: "get"});
    },
    
    close: function() {
        this.popup.style.display = "none";
        $("popupcontent").innerHTML = "&nbsp;";
    }
}

Event.observe(window, 'load', ClimateWatch.Popup.init.bind(ClimateWatch.Popup));
Event.observe(window, 'load', ClimateWatch.init.bind(ClimateWatch));