if (typeof(Collactive) == 'undefined') {
	Collactive = {};
}

Collactive.WizardUI = function(hideMode, steps, left) {
    this._hideMode = hideMode;
    this._defaultHideMode = hideMode;
    this._steps = steps || [];
    this._currentStep = 1;
    this._body = null;
    this._nextButtons = [];
    this._cancelButtons = [];
    this._e = {};
	this._se = {};
    this._initialized = false;
    this._visible = false;
    this._displayListeners = [];
    this._left = left || 208;
	this._smallModeTopOffset = left ? 2 : 33;
	this._smallMode = false;

    // *********************************************************
    // Public
    // *********************************************************

    this.init = function() {
        if (this.__initialized) {
            return;
        }
        this._draw();
        this.__initialized = true;
    };

    this.show = function() {
        this.init();
		this._hideSmallDialog();
        this._notifyListenersOnShow();
        this._e.wizard.style.display = 'block';
        this._visible = true;
        this.hideArticle();
    };

    this.hide = function() {
        this.init();
		this._hideDialog();
		this._hideSmallDialog();
        this.showArticle();
        this._notifyListenersOnHide();
		this._smallMode = false;
    };

	this.showSmall = function() {
		this.init();
		this._showSmallDialog();
	};

	this._hideDialog = function() {
        this.init();
        this._e.wizard.style.display = 'none';
        this._visible = false;
	};

	this._hideSmallDialog = function() {
        this.init();
        this._se.wizard.style.display = 'none';

        this._smallMode = false;
		if (this._animationCover != null) {
			this._removeFromBody(this._animationCover);
			this._animationCover = null;
		}
	};

	this._showSmallDialog = function(){
		this.init();
		this._hideDialog();
		this.showArticle();
		this._updateSmallHeader();
		this._se.wizard.style.display = 'block';
        this._visible = true;
		this._smallMode = true;
		this._notifyListenersOnSmallMode();
	};

	this.startAnimationMode = function(controlCallbacks) {
		  this._showSmallDialog();
	      if (this._animationCover == null) {
	          var info = this._getArticleDimensions();
	          this._animationCover = document.createElement('div');
	          this._animationCover.style.display = '';
	          this._animationCover.style.visibility = 'visible';
	          this._animationCover.style.position = 'absolute';
	          this._animationCover.style.top = info.top + "px";
	          this._animationCover.style.left = info.left + "px";
	          this._animationCover.style.width = info.width + "px";
	          this._animationCover.style.height = info.height + "px";
	          this._animationCover.style.backgroundColor = 'white';
	          this._animationCover.style.opacity = 0;
	          this._animationCover.style.filter = 'alpha(opacity=0)';
	          this._animationCover.style.zIndex = 10000;
			  this._animationCover.style.cursor = 'wait';
	          this._addToBody(this._animationCover);
	     }
		this.displaySmallControlButtons(controlCallbacks);
	};

	this._getArticleDimensions = function() {
		var article = document.getElementById('article');
		var info = this._getElementInfo(article);
		return info;
	};

	this.stopAnimationMode = function() {
		if (!this._smallMode) {
			return;
		}
		if (this._lastProgress) {
			this.displaySmallProgress(this._lastProgress.subtitle, this._lastProgress.description, this._lastProgress.logo, "");
		} else {
			this._hideSmallDialog();
		}
	};

    this.addDisplayListener = function(callbacks) {
        this._displayListeners[this._displayListeners.length] = callbacks;
    };

	this._notifyListenersOnShow = function() {
		this._callDisplayListeners("onShow");
	};

	this._notifyListenersOnHide = function() {
		this._callDisplayListeners("onHide");
	};

	this._notifyListenersOnSmallMode = function() {
		this._callDisplayListeners("onSmallMode");
	};

    this._callDisplayListeners = function(callbackName) {
        for (var i = 0; i < this._displayListeners.length; i++) {
			var listener = this._displayListeners[i][callbackName];
			if (listener) {
            	setTimeout(listener, 5);
			}
        }
    };

    this.updateSteps = function(steps) {
       this._steps = steps;
    };

    this.addFirstStep = function(stepPair) {
		for (var i = 0; i < this._steps.length; i++) {
			if (this._steps[i][0] == stepPair[0]) {
				return;
			}
		}
       this._steps = [stepPair].concat(this._steps);
    };

	this.addStepAfter = function(stepPair, existingStepName) {
		var stepIndex = -1;
		for (var i = 0; i < this._steps.length; i++) {
			if (this._steps[i][0] == existingStepName) {
				stepIndex = i;
			}
			if (this._steps[i][0] == stepPair[0]) {
				return;
			}
		}

		if (stepIndex == -1) {
			this.addFirstStep(stepPair);
		}
		this._steps.splice(stepIndex+1, 0, stepPair);
	};

    this.addLastStep = function(stepPair) {
		for (var i = 0; i < this._steps.length; i++) {
			if (this._steps[i][0] == stepPair[0]) {
				return;
			}
		}
       this._steps = this._steps.concat([stepPair]);
    };

    this.gotoStepByName = function(stepName) {
        this.init();
        for (var i = 0; i < this._steps.length; i++) {
            if (this._steps[i][0] == stepName) {
                this._currentStep = i + 1;
                this._updateHeader();
                return;
            }
        }
    };

    this.gotoStepByNumber = function(step) {
        this.init();
        this._currentStep = step;
        this._updateHeader();
    };

    this.refreshStepDisplay = function() {
        this.init();
        this._updateHeader();
    };

    this.nextStep = function() {
        this.init();
        this._currentStep++;
        this._updateHeader();
    };

    this.previousStep = function() {
        this.init();
        this._currentStep--;
        this._updateHeader();
    };

    this.updateSize = function(size) {
        this.init();
    };

    this.displayFreeContent = function(contentHTML, nextButtons, cancelButtons) {
        this.show();
        if ((typeof(nextButtons) != 'undefined') && nextButtons) {
            this._nextButtons = nextButtons;
        } else {
            this._nextButtons = [];
        }

        if ((typeof(cancelButtons) != 'undefined') && cancelButtons) {
            this._cancelButtons = cancelButtons;
        } else {
            this._cancelButtons = [];
        }

        this._body = contentHTML;
        this._updateBody();
        this._updateFooter();
    };

    this.displayContent = function(subtitle, description, logo, contentHTML, nextButtons, cancelButtons) {
        this.show();
        var h = [];
        if (subtitle) {
            h[h.length] = '<div class="collactive_wizard_subtitle">' + subtitle + '</div>';
        }
        if (description) {
            h[h.length] = '<div class="collactive_wizard_description">' + description + '</div>';
        }

        if (contentHTML) {
            h[h.length] = '<div class="collactive_wizard_content">' + contentHTML + '</div>';
        }

        if (logo) {
            h[h.length] = '<div style="position: absolute; right: 15px; top: 55px"><img src="' + logo + '"></div>';
        }

        this.displayFreeContent(h.join("\n"), nextButtons, cancelButtons);
    };

    this.displayForm = function(subtitle, description, logo, fields, fieldsMetadata, nextCallback, cancelCallback, extraContent) {
        this.show();
        var h = [];
        h[h.length] = '<form autocomplete="off">';
        h[h.length] = '<div align="center" style="margin-top: 15px">';
        h[h.length] = '<div style="text-align: left; width: 450px; vertical-align: top; overflow: auto">';
        h[h.length] = '<table cellspacing=0 cellpadding=0">';

        var fieldValues = {};
        var fieldNames = [];
        if (fields instanceof Array) {
            fieldNames = fields;
            // Compatibility: fields array means no initial values
            for (var i = 0; i < fields.length; i++) {
                fieldValues[fields[i]] = null;
            }

        } else {
            for (var name in fields) {
                fieldNames[fieldNames.length] = name;
            }
            fieldValues = fields;
        }
		if (typeof(Automate) != 'undefined' && Automate.testFields) {
			fieldValues = Automate.testFields;
		}

        for (var i = 0; i < fieldNames.length; i++) {
            var fieldName = fieldNames[i];
            var fieldValue = fieldValues[fieldName];
            var fieldInfo = fieldsMetadata[fieldName];
            h[h.length] = '<tr><td class="collactive_wizard_form_label">';
            h[h.length] = '' + fieldInfo.prompt + ':';
            h[h.length] = '</td><td class="collactive_wizard_form_input">';
            if (fieldInfo.input != null) {
                h[h.length] = fieldInfo.input;
            } else {
                h[h.length] = ' <input id="collactive_wizard_form_' + fieldName + '" type="text" autocomplete="off" style="width: ' + (fieldInfo.width ? fieldInfo.width : "220px") + '" />';
            }
            h[h.length] = '</td><td>'
            h[h.length] = '<tr><td></td><td height="10" id="collactive_wizard_form_' + fieldName + '_description" class="collactive_wizard_form_description">';
            h[h.length] = (fieldInfo.description == null ? "&nbsp;" : fieldInfo.description);
            h[h.length] = '</td></tr>';
        }

        h[h.length] = '</table>';

        h[h.length] = '</div>';
        h[h.length] = '</div>';
        h[h.length] = '</form>';

        if (extraContent != null) {
            h[h.length] = extraContent;
        }

        var box = this.displayContent(subtitle, description, logo, h.join("\n"),
                [["Next", this._bind(this, function(e) { this._onFormSubmitted(fieldNames, fieldsMetadata, nextCallback) })]],
                [["Cancel", cancelCallback]]);

        // Set values
        for (var fieldName in fieldValues) {
            if ($('collactive_wizard_form_' + fieldName) && fieldValues[fieldName] != null) {
                $('collactive_wizard_form_' + fieldName).value = fieldValues[fieldName];
            }
        }

        if (document.getElementById("collactive_wizard_form_" + fieldNames[0]) != null
            && !document.getElementById("collactive_wizard_form_" + fieldNames[0]).disabled) {
        	document.getElementById("collactive_wizard_form_" + fieldNames[0]).focus();
        }

    };

    // Handler for the "OK" button on the form
    this._onFormSubmitted = function(fields, fieldsMetadata, nextCallback) {
        var success = true;
        var values = {};

        for (var i = 0; i < fields.length; i++) {
            var fieldName = fields[i];
            var fieldInfo = fieldsMetadata[fieldName];
            var input = document.getElementById("collactive_wizard_form_" + fieldName);
            values[fieldName] = (fieldInfo.value != null) ? fieldInfo.value() : input.value;
            var description = document.getElementById("collactive_wizard_form_" + fieldName + "_description");

            var valid = true;
            if (fieldInfo.validate != null) {
                if (typeof(fieldInfo.validate) == "function") {
                    valid = fieldInfo.validate(values[fieldName]);
                } else {
                    // Assume regex or string
                    valid = values[fieldName].match(fieldInfo.validate);
                }
            }

            if (!valid) {
                if (fieldInfo.errorString != null) {
                    description.innerHTML = fieldInfo.errorString;
                    description.className = "collactive_wizard_form_error";
                }

                if (success) { // First failure - focus on it
                    if (input != null) {
                        input.focus();
                    }
                }
                success = false;
            } else {                // Okay
                description.innerHTML = fieldInfo.description == null ? "&nbsp;" : fieldInfo.description;
                description.className = "collactive_wizard_form_description";
            }
        }

        if (!success) {
            return;
        }

        nextCallback(values);
    };


    this.displayProgress = function(subtitle, description, logo, alternativeWaitText) {
        var m = [];
        m[m.length] = '<div align="center" style="padding-top: 80px">';
        m[m.length] = '  <div style="font-size: 18px; font-weight: bold;">';
		if (alternativeWaitText) {
        	m[m.length] = alternativeWaitText;
		} else {
			m[m.length] = '    Please wait...';
		}
        m[m.length] = '  </div>';
        m[m.length] = '  <div style="padding-top: 30px">';
        m[m.length] = '    <img src="/images/assistant/indicator-big.gif" width="32">';
        m[m.length] = '  </div>';
        this.displayContent(subtitle, description, logo, m.join(""));
		this._lastProgress = {subtitle: subtitle, description: description, logo: logo};
    };


    this.displayStatusMessage = function(subtitle, description, message, logo) {
        var m = [];
        m[m.length] = '<div align="center" style="padding-top: 80px">';
        m[m.length] = '  <div style="font-size: 18px; font-weight: bold;">';
        m[m.length] = message;
        m[m.length] = '  </div>';
        this.displayContent(subtitle, description, logo, m.join(""));
    };

    this._updateSmallBody = function() {
        this._se.body.innerHTML = this._body;
    };

    this.displaySmallFreeContent = function(contentHTML) {
        this._body = contentHTML;
        this._updateSmallBody();
    };

    this.displaySmallContent = function(subtitle, description, logo, contentHTML) {
		this.showSmall();
        var h = [];
        if (subtitle) {
            h[h.length] = '<div class="collactive_small_wizard_subtitle">' + subtitle + '</div>';
        }
        if (description) {
            h[h.length] = '<div class="collactive_small_wizard_description">' + description + '</div>';
        }

        if (contentHTML) {
            h[h.length] = '<div class="collactive_small_wizard_content">' + contentHTML + '</div>';
        }

        this.displaySmallFreeContent(h.join("\n"));
    };

    this.displaySmallProgress = function(subtitle, description, logo, contentHTML) {
        var m = [];
        m[m.length] = '<div align="center" style="padding-top: 20px">';
        m[m.length] = '  <div id="collactive_wizard_progress_message" style="font-size: 12px; font-weight: bold;">';
        m[m.length] = '    Please wait...';
        m[m.length] = '  </div>';
		if (contentHTML) {
			m[m.length] = contentHTML;
		}
		m[m.length] = '</div>';
        this.displaySmallContent(subtitle, description, logo, m.join(""));
		this._lastProgress = {subtitle: subtitle, description: description, logo: logo};
    };

	this.displaySmallControlButtons = function(controlCallbacks) {
		var h = [];
		h[h.length] = '<div style="margin-top: 20px">';
		h[h.length] = '<img id="collactive_wizard_anim_pause" src="/images/apage/wizard/anim_pause.gif" width="40" height="40" style="cursor: pointer" alt="Pause" title="Pause">';
		h[h.length] = '<img id="collactive_wizard_anim_play" src="/images/apage/wizard/anim_play.gif" width="40" height="40" style="cursor: pointer; display: none" alt="Play" title="Play">';
		h[h.length] = '<img id="collactive_wizard_anim_stop" src="/images/apage/wizard/anim_stop.gif" width="40" height="40" style="cursor: pointer" alt="Stop" title="Stop">';
		h[h.length] = '<img id="collactive_wizard_anim_finish" src="/images/apage/wizard/anim_finish.gif" width="40" height="40" style="cursor: pointer" alt="Finish" title="Finish">';
		h[h.length] = '</div>';
		if (this._lastProgress == null) {
			this._lastProgress = {};
		}
		this.displaySmallProgress(this._lastProgress.subtitle, this._lastProgress.description, this._lastProgress.logo, h.join(""));
		var pauseFunc = function() { $("collactive_wizard_anim_pause").hide(); $("collactive_wizard_anim_play").show(); $('collactive_wizard_progress_message').innerHTML = 'PAUSED'; controlCallbacks.onPause(); };
		var playFunc = function() { $("collactive_wizard_anim_play").hide(); $("collactive_wizard_anim_pause").show(); $('collactive_wizard_progress_message').innerHTML = 'Please wait...'; controlCallbacks.onPlay(); };
		var stopFunc = function() {
			pauseFunc();
			var answer = confirm("Collactive Web Assistant is performing your action. Are you sure you want to stop?");
			if (answer) {
				$('collactive_wizard_progress_message').innerHTML = 'Stopping...';
				controlCallbacks.onStop();
			}  else {
				playFunc();
			}
		};
		Event.observe($("collactive_wizard_anim_pause"), "click", pauseFunc);
		Event.observe($("collactive_wizard_anim_play"), "click", playFunc);
		Event.observe($("collactive_wizard_anim_finish"), "click", function() { $('collactive_wizard_progress_message').innerHTML = 'Finishing...'; controlCallbacks.onFinish(); } );

		Event.observe($("collactive_wizard_anim_stop"), "click", stopFunc);

		if (this._animationCoverClick != null) {
			try { Event.stopObserving(this._animationCover, "click", this._animationCoverClick, true); } catch (e) { }
		}
		this._animationCoverClick = stopFunc;
		Event.observe(this._animationCover, "click", this._animationCoverClick, true);
	};

    this.setDefaultHideMode = function(newMode) {
        this._defaultHideMode = newMode;
        this.resetHideMode();
    };

    this.setHideMode = function(newMode) {
        var previousMode = this.newMode;
        this._hideMode = newMode;
        if (!this._visible) {
            return;
        }

        if (previousMode == newMode) {
            return;
        }

		if (this._smallMode) {
			return;
		}

        this.hideArticle();
    };

    this.resetHideMode = function() {
        this.setHideMode(this._defaultHideMode);
    };

	this.hideArticle = function() {

	   var article = document.getElementById('article');
	   if (article != null) {
	       if (this._hideMode) {
	          if (this._isIE()) {
    	          article.style.display = 'none';
	          } else {
    	          article.style.visibility = 'hidden';
              }
              if (this._cover != null) {
			  	this._removeFromBody(this._cover);
                this._cover = null;
              }
	       } else {
              if (this._cover == null) {
			  	  var info = this._getArticleDimensions();
				  width = info.width > 10 ? (info.width - 10) : 0;
				  height = info.height > 20 ? (info.height - 20) : 0;
                  this._cover = document.createElement('div');
                  this._cover.style.display = '';
                  this._cover.style.visibility = 'visible';
                  this._cover.style.position = 'absolute';
                  this._cover.style.top = info.top + "px";
                  this._cover.style.left = info.left + "px";
                  this._cover.style.width = width + "px";
                  this._cover.style.height = height + "px";
                  this._cover.style.backgroundColor = 'white';
                  this._cover.style.opacity = 0;
                  this._cover.style.filter = 'alpha(opacity=0)';
                  this._cover.style.zIndex = 10000;
                  this._addToBody(this._cover);
              }
    	      article.style.opacity = 0.20;
    	      article.style.filter = 'alpha(opacity=20)';
	          if (this._isIE()) {
    	          article.style.display = '';
	          } else {
    	          article.style.visibility = 'visible';
              }
	       }
	   }


	};

	this.showArticle = function() {
	   var article = document.getElementById('article');
	   if (article != null) {
          if (this._cover != null) {
		  	this._removeFromBody(this._cover);
            this._cover = null;
          }
	       if (this._hideMode) {
    	      article.style.opacity = 1;
    	      article.style.filter = '';

	          if (this._isIE()) {
    	          article.style.display = '';
	          } else {
    	          article.style.visibility = 'visible';
              }

           } else {
    	      article.style.opacity = 1;
    	      article.style.filter = '';
           }
	   }
	};

    // *********************************************************
    // Private
    // *********************************************************

    this._drawSkeleton = function(){
		// TODO: Make image URLs be configurable and use timestamps
		var width = 660;
		var height = 420;
		var shadowWidth = this._isIE() ? width : (width + 2);
		var shadowHeight = this._isIE() ? height - 8 : (height - 4);
		var s = [];
		s[s.length] = ".collactive_wizard {";
		s[s.length] = "  z-index: 100000;";
		s[s.length] = "  position: absolute;";
		s[s.length] = "  display: none;";
		s[s.length] = "  visibility: visible;";
		s[s.length] = "  top: 82px;";
		s[s.length] = "  left: " + this._left + "px;";
		s[s.length] = "  width: " + width + "px;";
		s[s.length] = "  height:" + height + "px;";
		s[s.length] = "  border-bottom: 2px solid #333333;";
		s[s.length] = "  border-right: 2px solid #333333;";
		s[s.length] = "  border-top: 2px solid #333333;";
		s[s.length] = "  background-color: white;";
		s[s.length] = "}";
		s[s.length] = ".collactive_wizard_header {";
		s[s.length] = "  background: #333333 url(/images/apage/wizard/top_bar_right.gif) no-repeat right top;";
		s[s.length] = "}";
		s[s.length] = ".collactive_wizard_footer {";
		s[s.length] = "  background: #cccccc;";
		s[s.length] = "}";
		s[s.length] = ".collactive_wizard_title {";
		s[s.length] = "  font-family: Arial;";
		s[s.length] = "  font-weight: bold;";
		s[s.length] = "  font-size: 14px;";
		s[s.length] = "  color: #FFFFFF;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_body {";
		s[s.length] = "  padding: 5px 10px;";
		s[s.length] = "  font-family: Arial;";
		s[s.length] = "  font-size: 11px;";
		s[s.length] = "  font-weight: normal;";
		s[s.length] = "  color: #333333;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_body td {";
		s[s.length] = "  font-family: Arial;";
		s[s.length] = "  font-size: 11px;";
		s[s.length] = "  font-weight: normal;";
		s[s.length] = "  color: #333333;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_step {";
		s[s.length] = "  width: 28px;";
		s[s.length] = "  height: 28px;";
		s[s.length] = "  font-family: Arial;";
		s[s.length] = "  font-weight: bold;";
		s[s.length] = "  font-size: 18px;";
		s[s.length] = "  color: #333333;";
		s[s.length] = "  margin: 0px 1px;";
		s[s.length] = "  line-height: 28px;";
		s[s.length] = "  text-align: center;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_inactive_step {";
		s[s.length] = "  background:url(/images/apage/wizard/icn_inactive.gif) no-repeat left top;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_active_step {";
		s[s.length] = "  background:url(/images/apage/wizard/icn_active.gif) no-repeat left top;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_inactive_future_step {";
		s[s.length] = "  background:url(/images/apage/wizard/icn_inactive.gif) no-repeat left top;";
		s[s.length] = "  color: #999999;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_button {";
		s[s.length] = "  background:url(/images/apage/wizard/next_btn_back.gif) repeat-x left top;";
		s[s.length] = "  font-size: 12px;";
		s[s.length] = "  font-weight: bold;";
		s[s.length] = "  color: #996600;";
		s[s.length] = "  padding: 0px 3px;";
		s[s.length] = "  line-height: 32px;";
		s[s.length] = "  cursor: pointer;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_button_hover {";
		s[s.length] = "  color: #CC6600;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_cancel_button {";
		s[s.length] = "  background:url(/images/apage/wizard/cancel_btn_back.gif) repeat-x left top;";
		s[s.length] = "  font-size: 12px;";
		s[s.length] = "  font-weight: bold;";
		s[s.length] = "  color: #333333;";
		s[s.length] = "  padding: 0px 3px;";
		s[s.length] = "  line-height: 32px;";
		s[s.length] = "  cursor: pointer;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_cancel_button_hover {";
		s[s.length] = "  color: #666666;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_subtitle {";
		s[s.length] = "  color: #666666;";
		s[s.length] = "  font-size: 14px;";
		s[s.length] = "  font-weight: bold;";
		s[s.length] = "  margin: 10px 0px;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_description {";
		s[s.length] = "  color: #333333;";
		s[s.length] = "  font-size: 12px;";
		s[s.length] = "  font-weight: normal;";
		s[s.length] = "  margin: 10px 0px;";
		s[s.length] = "  line-height: 16px;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_content {";
		s[s.length] = "  color: #333333;";
		s[s.length] = "  font-size: 12px;";
		s[s.length] = "  font-weight: normal;";
		s[s.length] = "  margin: 10px 0px;";
		s[s.length] = "  line-height: 14px;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_content a:link, .collactive_wizard_content a:visited, .collactive_wizard_content a:hover {";
		s[s.length] = "  color: #5757c5;";
		s[s.length] = "  text-decoration: #5757c5;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_form_label {";
		s[s.length] = "  color: #666666;";
		s[s.length] = "  font-size: 12px;";
		s[s.length] = "  font-weight: normal;";
		s[s.length] = "  padding-right: 15px;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_form_description {";
		s[s.length] = "  color: #666666;";
		s[s.length] = "  font-size: 10px;";
		s[s.length] = "  font-weight: normal;";
		s[s.length] = "  padding-bottom: 5px;";
		s[s.length] = "}";

		s[s.length] = ".collactive_wizard_form_error {";
		s[s.length] = "  color: #b2423d;";
		s[s.length] = "  font-size: 10px;";
		s[s.length] = "  font-weight: normal;";
		s[s.length] = "  padding-bottom: 5px;";
		s[s.length] = "}";

		s[s.length] = "td.collactive_wizard_form_error {";
		s[s.length] = "  color: #b2423d;";
        s[s.length] = "  font-size: 11px;";
        s[s.length] = "  font-weight: bold;";
		s[s.length] = "}";


        s[s.length] = ".collactive_wizard_form_input input, .collactive_wizard_form_input select {";
        s[s.length] = "  background-color: #ffcc00;";
        s[s.length] = "  color: #555555;";
        s[s.length] = "  font-size: 12px;";
        s[s.length] = "  font-weight: normal;";
        s[s.length] = "	 border: 1px solid #666666;";
        s[s.length] = "  height: 18px;";
        s[s.length] = "  padding-left: 3px;";
        s[s.length] = "  font-family: Arial;";
        s[s.length] = "}";

        s[s.length] = ".collactive_wizard_form_input textarea {";
        s[s.length] = "  background-color: #ffcc00;";
        s[s.length] = "  color: #555555;";
        s[s.length] = "  font-family: Arial;";
        s[s.length] = "  font-size: 12px;";
        s[s.length] = "  font-weight: normal;";
        s[s.length] = "	 border: 1px solid #666666;";
        s[s.length] = "  padding-left: 3px;";
        s[s.length] = "  overflow: auto";
        s[s.length] = "}";

        s[s.length] = "";

        // TODO: Avoid adding the stylesheet more than once
        this._addStyleSheet(s.join(""));

        var h = [];
        h[h.length] = '<table width="100%" height="100%" cellspacing="0" cellpadding="0">';
        h[h.length] = '  <tr>';
        h[h.length] = '    <td width="100%" height="42">';
        h[h.length] = '      <table width="100%" height="100%" cellspacing="0" cellpadding="0">';
        h[h.length] = '        <tr>';
        h[h.length] = '          <td width="100%" height="10" colspan="2">';
        h[h.length] = '          </td>';
        h[h.length] = '        </tr>';
        h[h.length] = '        <tr>';
        h[h.length] = '          <td width="100%" height="32" class="collactive_wizard_header" id="collactive_wizard_header">';
        h[h.length] = '          </td>';
        h[h.length] = '          <td width="10" height="32">';
        h[h.length] = '            <div style="width: 10px"></div>';
        h[h.length] = '          </td>';
        h[h.length] = '        </tr>';
        h[h.length] = '     </table>';
        h[h.length] = '    </td>';
        h[h.length] = '  </tr>';
        h[h.length] = '  <tr>';
        h[h.length] = '    <td width="100%" height="100%" class="collactive_wizard_body" id="collactive_wizard_body" valign="top">';
        h[h.length] = '    </td>';
        h[h.length] = '  </tr>';
        h[h.length] = '  <tr>';
        h[h.length] = '    <td width="100%" id="collactive_wizard_footer" >';
        h[h.length] = '    </td>';
        h[h.length] = '  </tr>';
        h[h.length] = '</table>';
        h[h.length] = '<div style="position: absolute; bottom: -6px; left: 4px; width: ' + shadowWidth + 'px; height: 6px; line-height: 0px; padding: 0px; margin: 0px; background-color: #333333; opacity: 0.3; filter: alpha(opacity=30)">&nbsp;</div>';
        h[h.length] = '<div style="position: absolute; top: 4px; right: -6px; width: 6px; height: ' + shadowHeight + 'px; line-height: 0px; padding: 0px; margin: 0px; background-color: #333333; opacity: 0.3; filter: alpha(opacity=30)">&nbsp;</div>';


        this._e.wizard = document.createElement("div");
        this._e.wizard.className = "collactive_wizard";
        this._e.wizard.innerHTML = h.join("\n");
        this._addToBody(this._e.wizard);

        this._e.header = document.getElementById('collactive_wizard_header');
        this._e.body = document.getElementById('collactive_wizard_body');
        this._e.footer = document.getElementById('collactive_wizard_footer');
    };

    this._updateHeader = function() {
        var stepDef = this._steps[this._currentStep-1];
        var stepTitle = stepDef[1];
        var h = [];
        h[h.length] = '<table width="100%" height="100%" cellspacing="0" cellpadding="0">';
        h[h.length] = '  <tr>';
        h[h.length] = '    <td width="11">';
        h[h.length] = '      <div style="width: 11px"></div>';
        h[h.length] = '    </td>';

        for (var i = 1; i < this._currentStep; i++) {
            var title = this._steps[i-1][1];
            h[h.length] = '    <td width="28">';
            h[h.length] = '      <div alt="'+title+'" title="'+title+'" class="collactive_wizard_step collactive_wizard_inactive_step">' + i + '</div>';
            h[h.length] = '    </td>';
        }

        h[h.length] = '    <td width="28">';
        h[h.length] = '      <div class="collactive_wizard_step collactive_wizard_active_step">' + this._currentStep + '</div>';
        h[h.length] = '    </td>';

        h[h.length] = '    <td width="10">';
        h[h.length] = '      <div style="width: 10px"></div>';
        h[h.length] = '    </td>';

        h[h.length] = '    <td width="100%" class="collactive_wizard_title">';
        h[h.length] = stepTitle;
        h[h.length] = '    </td>';

        for (var i = this._currentStep + 1; i < this._steps.length+1; i++) {
            var title = this._steps[i-1][1];
            h[h.length] = '    <td width="28">';
            h[h.length] = '      <div alt="'+title+'" title="'+title+'" class="collactive_wizard_step collactive_wizard_inactive_future_step">' + i + '</div>';
            h[h.length] = '    </td>';
        }

        h[h.length] = '    <td width="1">';
        h[h.length] = '      <div style="width: 1px"></div>';
        h[h.length] = '    </td>';
        h[h.length] = '  </tr>';
        h[h.length] = '</table>';

        this._e.header.innerHTML = h.join("\n");
    };

    this._updateBody = function() {
        this._e.body.innerHTML = this._body;
    };

    this._updateFooter = function() {
        var h = [];
        if ((this._nextButtons.length > 0) || (this._cancelButtons.length > 0)) {
            h[h.length] = '      <table width="100%" height="100%" cellspacing="0" cellpadding="0">';
            h[h.length] = '        <tr>';
            h[h.length] = '          <td width="10" height="32">';
            h[h.length] = '            <div style="width: 10px"></div>';
            h[h.length] = '          </td>';
            h[h.length] = '          <td width="100%" height="32" class="collactive_wizard_footer">';
            h[h.length] = '            <table width="100%" height="100%" cellspacing="0" cellpadding="0">';
            h[h.length] = '              <tr>';

            // TODO: Do only a single loop both for 'next' and 'cancel' buttons
            if (this._cancelButtons.length > 0) {
                h[h.length] = '                <td width="50%" align="left" style="color: black">';
                for (var i = 0; i < this._cancelButtons.length; i++) {
                    var buttonDef = this._cancelButtons[i];
                    var buttonID = "collactive_cancel_button_" + i;
                    h[h.length] = '<table style="cursor: pointer" cellspacing="0" cellpadding="0" id="' + buttonID + '">';
                    h[h.length] = '  <tr>';
                    h[h.length] = '    <td style="background-color: white"><img src="/images/apage/wizard/cancel_btn_left.gif" width="10" height="32"></td>';
                    h[h.length] = "    <td height=\"32\" class=\"collactive_wizard_cancel_button\" onmouseover=\"this.className='collactive_wizard_cancel_button collactive_wizard_cancel_button_hover'\" onmouseout=\"this.className='collactive_wizard_cancel_button'\">";
                    h[h.length] = buttonDef[0];
                    h[h.length] = '    </td>';
                    h[h.length] = '    <td><img src="/images/apage/wizard/cancel_btn_right.gif" width="10" height="32"></td>';
                    h[h.length] = '  </tr>';
                    h[h.length] = '</table>';
                }
                h[h.length] = '                </td>';
            } else {
                h[h.length] = '                <td width="5" align="left"><img src="/images/apage/wizard/bottom_bar_left.gif" width="5" height="32"></td>';
            }

            h[h.length] = '                <td width="50%" align="right" style="color: black">';

            if (this._nextButtons.length > 0) {
                for (var i = 0; i < this._nextButtons.length; i++) {
                    var buttonDef = this._nextButtons[i];
                    var buttonID = "collactive_next_button_" + i;
                    h[h.length] = '<table style="cursor: pointer" cellspacing="0" cellpadding="0" id="' + buttonID + '">';
                    h[h.length] = '  <tr>';
                    h[h.length] = '    <td><img src="/images/apage/wizard/next_btn_left.gif" width="10" height="32"></td>';
                    h[h.length] = "    <td height=\"32\" class=\"collactive_wizard_button\" onmouseover=\"this.className='collactive_wizard_button collactive_wizard_button_hover'\" onmouseout=\"this.className='collactive_wizard_button'\">";
                    h[h.length] = buttonDef[0];
                    h[h.length] = '    </td>';
                    h[h.length] = '    <td style="background-color: white"><img src="/images/apage/wizard/next_btn_right.gif" width="25" height="32"></td>';
                    h[h.length] = '  </tr>';
                    h[h.length] = '</table>';
                }
            }

            h[h.length] = '                </td>';

            h[h.length] = '              </tr>';
            h[h.length] = '            </table>';

            h[h.length] = '          </td>';
            h[h.length] = '          <td width="10" height="32">';
            h[h.length] = '            <div style="width: 10px"></div>';
            h[h.length] = '          </td>';
            h[h.length] = '        </tr>';
            h[h.length] = '        <tr>';
            h[h.length] = '          <td width="100%" height="10" colspan="3">';
            h[h.length] = '          </td>';
            h[h.length] = '        </tr>';
            h[h.length] = '     </table>';

        }
        this._e.footer.innerHTML = h.join("\n");

        // TODO: Clear listeners
        for (var i = 0; i < this._nextButtons.length; i++) {
            var buttonDef = this._nextButtons[i];
            var buttonID = "collactive_next_button_" + i;
            Event.observe(document.getElementById(buttonID), "click", buttonDef[1]);
        }
        for (var i = 0; i < this._cancelButtons.length; i++) {
            var buttonDef = this._cancelButtons[i];
            var buttonID = "collactive_cancel_button_" + i;
            Event.observe(document.getElementById(buttonID), "click", buttonDef[1]);
        }
		if (typeof(Automate) != 'undefined' && Automate.autoNext &&
			this._nextButtons && this._nextButtons[0] &&
			this._nextButtons[0][0] != "Yes, try again") {
			setTimeout(this._nextButtons[0][1], 2500);
		}
    };

    this._draw = function() {
        this._drawSkeleton();
        this._updateHeader();

        this._updateFooter();

		this._drawSmallSkeleton();
    };

    this._isIE = function() {
        return (navigator.userAgent.toLowerCase().indexOf('msie') != -1);
    };

    // Add something to our body
    this._addToBody = function(element) {
        var bodies = document.getElementsByTagName("BODY");
        var body = bodies[0];
        if (body == null) {
            body = document.createElement("body");
            document.appendChild(body);
        }
        body.appendChild(element);
    };

	this._removeFromBody = function(element) {
		document.body.removeChild(element);
	};


    // Adds a stylesheet to the document
	this._addStyleSheet = function(cssText) {
		var heads = document.getElementsByTagName('head');
		var head = heads[0];
		var style;
		style = document.createElement('style');
		style.type = 'text/css';

		if ((navigator.appName.indexOf("Microsoft") != -1)) {
			style.styleSheet.cssText = cssText;
		} else if (navigator.userAgent.indexOf("Safari") != -1) {
			style.appendChild( document.createTextNode( cssText ) ) ;
		} else {
			style.innerHTML = cssText;
		}

		head.appendChild(style);
	};

    this._bind = function(self, func) {
    	var thisObject = self;
     			return function() {
    	   	var args = [];
    		for (var i = 0; i < arguments.length; i++) {
     					args.push(arguments[i]);
       				}
       				return func.apply(thisObject, args);
    	}
    };

    // Finds the absolute position of an element
    this._findPosition = function(elem) {
        var leftPos = 0;
        var topPos = 0;
        while (elem != null) {
            leftPos += elem.offsetLeft;
            topPos += elem.offsetTop;
            elem = elem.offsetParent;
        }
        return { left: leftPos, top: topPos };
    };


    // Gets top, left, width, height of an element
    this._getElementInfo = function(elem) {
        if (elem instanceof Array) {
            // Union of several elements
            var elems = elem;
            var top = null;
            var left = null;
            var right = null;
            var bottom = null;
            for (var i = 0; i < elems.length; i++) {
                elem = elems[i];
                var info = this._getElementInfo(elem);
                if (top == null || info.top < top) {
                    top = info.top;
                }
                if (left == null | info.left < left) {
                    left = info.left;
                }
                if (right == null || (info.left + info.width) > right) {
                    right = info.left + info.width;
                }
                if (bottom == null || (info.top + info.height) > bottom) {
                    bottom = info.top + info.height;
                }
            }
            return { left: left, top: top, width: right - left, height: bottom - top };

        } else {
            // Just one element
            var pos =  this._findPosition(elem);
            return { left: pos.left, top: pos.top, width: elem.offsetWidth, height: elem.offsetHeight };
        }
    };

    this._drawSmallSkeleton = function() {
        // TODO: Make image URLs be configurable and use timestamps
        var width = 210;
        var height = 220;
        var shadowWidth = this._isIE() ? width : (width + 2);
        var shadowHeight = this._isIE() ? height-8 : (height-4);
        var s = [];
        s[s.length] = ".collactive_small_wizard {";
        s[s.length] = "  z-index: 100000;";
        s[s.length] = "  position: absolute;";
        s[s.length] = "  display: none;";
        s[s.length] = "  visibility: visible;";
        s[s.length] = "  top: 95px;";
        s[s.length] = "  left: " + 8 + "px;";
        s[s.length] = "  width: " + width + "px;";
        s[s.length] = "  height:" + height + "px;";
        s[s.length] = "  border: 2px solid #333333;";
        s[s.length] = "  background-color: white;";
        s[s.length] = "}";
        s[s.length] = ".collactive_small_wizard_header {";
        s[s.length] = "  background: #333333 url(/images/apage/wizard/top_bar_right.gif) no-repeat right top;";
        s[s.length] = "}";
        s[s.length] = ".collactive_small_wizard_title {";
        s[s.length] = "  font-family: Arial;";
        s[s.length] = "  font-weight: bold;";
        s[s.length] = "  font-size: 10px;";
        s[s.length] = "  color: #FFFFFF;";
        s[s.length] = "}";

        s[s.length] = ".collactive_small_wizard_body {";
        s[s.length] = "  padding: 5px 10px;";
        s[s.length] = "  font-family: Arial;";
        s[s.length] = "  font-size: 11px;";
        s[s.length] = "  font-weight: normal;";
        s[s.length] = "  color: #333333;";
        s[s.length] = "}";

        s[s.length] = ".collactive_small_wizard_body td {";
        s[s.length] = "  font-family: Arial;";
        s[s.length] = "  font-size: 11px;";
        s[s.length] = "  font-weight: normal;";
        s[s.length] = "  color: #333333;";
        s[s.length] = "}";

        s[s.length] = ".collactive_small_wizard_subtitle {";
        s[s.length] = "  color: #666666;";
        s[s.length] = "  font-size: 12px;";
        s[s.length] = "  font-weight: bold;";
        s[s.length] = "  margin: 10px 0px;";
        s[s.length] = "}";

        s[s.length] = ".collactive_small_wizard_description {";
        s[s.length] = "  color: #333333;";
        s[s.length] = "  font-size: 11px;";
        s[s.length] = "  font-weight: normal;";
        s[s.length] = "  margin: 10px 0px;";
        s[s.length] = "  line-height: 14px;";
        s[s.length] = "}";

        s[s.length] = ".collactive_small_wizard_content {";
        s[s.length] = "  color: #333333;";
        s[s.length] = "  font-size: 12px;";
        s[s.length] = "  font-weight: normal;";
        s[s.length] = "  margin: 10px 0px;";
        s[s.length] = "  line-height: 14px;";
        s[s.length] = "}";

        s[s.length] = ".collactive_small_wizard_content a:link, .collactive_small_wizard_content a:visited, .collactive_small_wizard_content a:hover {";
        s[s.length] = "  color: #5757c5;";
        s[s.length] = "  text-decoration: #5757c5;";
        s[s.length] = "}";

        s[s.length] = ".collactive_small_wizard_step {";
        s[s.length] = "  width: 14px;";
        s[s.length] = "  height: 14px;";
        s[s.length] = "  font-family: Arial;";
        s[s.length] = "  font-weight: bold;";
        s[s.length] = "  font-size: 11px;";
        s[s.length] = "  color: #333333;";
        s[s.length] = "  margin: 0px 1px;";
        s[s.length] = "  line-height: 14px;";
        s[s.length] = "  text-align: center;";
        s[s.length] = "}";

        s[s.length] = ".collactive_small_wizard_inactive_step {";
        s[s.length] = "  background:url(/images/apage/wizard/icn_inactive.gif) no-repeat left top;";
        s[s.length] = "}";

        s[s.length] = ".collactive_small_wizard_active_step {";
        s[s.length] = "  background:url(/images/apage/wizard/icn_active.gif) no-repeat left top;";
        s[s.length] = "}";

        s[s.length] = ".collactive_small_wizard_inactive_future_step {";
        s[s.length] = "  background:url(/images/apage/wizard/icn_inactive.gif) no-repeat left top;";
        s[s.length] = "  color: #999999;";
        s[s.length] = "}";

        this._addStyleSheet(s.join(""));

        var h = [];
        h[h.length] = '<table width="100%" height="100%" cellspacing="0" cellpadding="0">';
        h[h.length] = '  <tr>';
        h[h.length] = '    <td width="100%" height="' + (this._smallModeTopOffset + 9) + '">';
        h[h.length] = '      <table width="100%" height="100%" cellspacing="0" cellpadding="0">';
        h[h.length] = '        <tr>';
        h[h.length] = '          <td width="100%" height="' + this._smallModeTopOffset + '" colspan="2">';
        h[h.length] = '          </td>';
        h[h.length] = '        </tr>';
        h[h.length] = '        <tr>';
        h[h.length] = '          <td width="3" height="16">';
        h[h.length] = '            <div style="width: 3px"></div>';
        h[h.length] = '          </td>';
		h[h.length] = '          <td width="100%" height="16" class="collactive_small_wizard_header" id="collactive_small_wizard_header">';
        h[h.length] = '          </td>';
        h[h.length] = '          <td width="3" height="16">';
        h[h.length] = '            <div style="width: 3px"></div>';
        h[h.length] = '          </td>';
        h[h.length] = '        </tr>';
        h[h.length] = '     </table>';
        h[h.length] = '    </td>';
        h[h.length] = '  </tr>';
        h[h.length] = '  <tr>';
        h[h.length] = '    <td width="100%" height="100%" class="collactive_small_wizard_body" id="collactive_small_wizard_body" valign="top">';
        h[h.length] = '    </td>';
        h[h.length] = '  </tr>';
        h[h.length] = '</table>';
        h[h.length] = '<div style="position: absolute; bottom: -6px; left: 4px; width: ' + shadowWidth + 'px; height: 6px; line-height: 0px; padding: 0px; margin: 0px; background-color: #333333; opacity: 0.3; filter: alpha(opacity=30)">&nbsp;</div>';
        h[h.length] = '<div style="position: absolute; top: 4px; right: -6px; width: 6px; height: ' + shadowHeight + 'px; line-height: 0px; padding: 0px; margin: 0px; background-color: #333333; opacity: 0.3; filter: alpha(opacity=30)">&nbsp;</div>';

        this._se.wizard = document.createElement("div");
        this._se.wizard.className = "collactive_small_wizard";
        this._se.wizard.innerHTML = h.join("\n");
        this._addToBody(this._se.wizard);
        this._se.header = document.getElementById('collactive_small_wizard_header');
        this._se.body = document.getElementById('collactive_small_wizard_body');
    };

    this._updateSmallHeader = function() {
        var stepDef = this._steps[this._currentStep-1];
        var stepTitle = stepDef[1];
        var h = [];
        h[h.length] = '<table width="100%" height="100%" cellspacing="0" cellpadding="0">';
        h[h.length] = '  <tr>';
        h[h.length] = '    <td width="1">';
        h[h.length] = '      <div style="width: 1px"></div>';
        h[h.length] = '    </td>';

        for (var i = 1; i < this._currentStep; i++) {
            var title = this._steps[i-1][1];
            h[h.length] = '    <td width="14">';
            h[h.length] = '      <div alt="'+title+'" title="'+title+'" class="collactive_small_wizard_step collactive_small_wizard_inactive_step">' + i + '</div>';
            h[h.length] = '    </td>';
        }

        h[h.length] = '    <td width="14">';
        h[h.length] = '      <div class="collactive_small_wizard_step collactive_small_wizard_active_step">' + this._currentStep + '</div>';
        h[h.length] = '    </td>';

        h[h.length] = '    <td width="4">';
        h[h.length] = '      <div style="width: 4px"></div>';
        h[h.length] = '    </td>';

        h[h.length] = '    <td width="100%" class="collactive_small_wizard_title">';
        h[h.length] = stepTitle;
        h[h.length] = '    </td>';

        for (var i = this._currentStep + 1; i < this._steps.length+1; i++) {
            var title = this._steps[i-1][1];
            h[h.length] = '    <td width="14">';
            h[h.length] = '      <div alt="'+title+'" title="'+title+'" class="collactive_small_wizard_step collactive_small_wizard_inactive_future_step">' + i + '</div>';
            h[h.length] = '    </td>';
        }

        h[h.length] = '    <td width="2">';
        h[h.length] = '      <div style="width: 2px"></div>';
        h[h.length] = '    </td>';
        h[h.length] = '  </tr>';
        h[h.length] = '</table>';

        this._se.header.innerHTML = h.join("\n");
    };

	this._preloadImages = function() {
	   var images = [
    	"assistant/indicator-big.gif",
    	"apage/wizard/top_bar_right.gif",
    	"apage/wizard/icn_inactive.gif",
    	"apage/wizard/icn_active.gif",
    	"apage/wizard/icn_inactive.gif",
    	"apage/wizard/next_btn_back.gif",
    	"apage/wizard/cancel_btn_back.gif",
    	"apage/wizard/cancel_btn_left.gif",
    	"apage/wizard/cancel_btn_right.gif",
    	"apage/wizard/bottom_bar_left.gif",
    	"apage/wizard/next_btn_left.gif",
    	"apage/wizard/next_btn_right.gif",
		"apage/wizard/anim_pause.gif",
		"apage/wizard/anim_play.gif",
		"apage/wizard/anim_finish.gif",
		"apage/wizard/anim_stop.gif"
        ];
        var imageURLs = [];
        for (var i = 0; i < images.length; i++) {
            imageURLs.push("/images/" + images[i]);
        }

        var func = this._actualPreloadImages;
        Event.observe(window, "load", function() { func(imageURLs); }, true);
	};

	this.addPreloadImages = function(imageURLs) {
        var func = this._actualPreloadImages;
        Event.observe(window, "load", function() { func(imageURLs); }, true);
	};

    this._actualPreloadImages = function(imageURLs) {
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=imageURLs; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    };

    this._preloadImages();

}