//
// Constants
//

// Scale directions
var SCALE_HORIZONTAL = 1;
var SCALE_VERTICAL = 2;

// Scale types
var SCALE_CONTINUES = 1;
var SCALE_DISCRETE = 2;
var SCALE_TEXT = 3;

// Text positions
var SCALE_ABOVE_TEXTPOS = 1;
var SCALE_LEFT_RIGHT_TEXTPOS = 2;
var SCALE_BELOW_TEXTPOS = 3;
var SCALE_NONE_TEXTPOS = 4;

// Visibility
var SCALE_SHOW_MARKER = "visible";
var SCALE_HIDE_MARKER = "hidden";

// Marker area
MARKER_X_MINIMUM = 9;
MARKER_X_MAXIMUM = 200;
MARKER_Y_MINIMUM = 0;
MARKER_Y_MAXIMUM = 0;

function scale()
{
   //
   // Properties
   //
   this.name = null;
   this.type = SCALE_DISCRETE;
   this.step = 1;
   this.size = null;
   this.maxlength = null;
   this.minimum = 0;
   this.maximum = 9;
   this.minimumtext = "";
   this.maximumtext = "";
   this.textposition = SCALE_LEFT_RIGHT_TEXTPOS;
   this.width = 236;
   this.height = 34;
   this.marker_width = 25;
   this.marker_height = 34;
   this.marker_x_position = (this.width / 2) - (this.marker_width / 2);
   this.marker_y_position = 0;
   this.precision = 14;
   this.value = null;
   this.reverse = false;
   this.direction = SCALE_HORIZONTAL;
   this.visibility = SCALE_HIDE_MARKER;
   this.single = false;

   //
   // Events
   //
   scale.prototype.onmouseclick = function(e)
   {
       var x, y, width, height, marker_width, marker_height, ref;
      if (navigator.appName.indexOf("Microsoft") != -1)
      {
         e = window.event;

         if (e.x || e.y)
         {
            x = e.offsetX;
            y = e.offsetY;
         }

         ref = e.srcElement.name;
      }
      else
      {
         if (e.clientX || e.clientY)
         {
             x = e.clientX - $(document.getElementById(e.target.id)).offset().left; //e.offsetX;
             y = e.clientY - $(document.getElementById(e.target.id)).offset().top; //e.offsetX;
         }

         ref = e.target.name;
      }

      width = parseInt(document.getElementById(ref + "_scale").style.width.replace("px", ""));
      height = parseInt(document.getElementById(ref + "_scale").style.height.replace("px", ""));
      marker_width = parseInt(document.getElementById(ref + "_marker").style.width.replace("px", ""));
      marker_height = parseInt(document.getElementById(ref + "_marker").style.height.replace("px", ""));

      x -= (marker_width / 2);

      if (x < MARKER_X_MINIMUM) { x = MARKER_X_MINIMUM; }
      else if (x > MARKER_X_MAXIMUM) { x = MARKER_X_MAXIMUM; }

      document.getElementById(ref + "_marker").style.left = x;
      document.getElementById(ref + "_marker").style.visibility = "visible";
   }

   scale.prototype.ontoggle = function(e)
   {
      var x, y, width, height, marker_width, marker_height, ref;

      if (navigator.appName.indexOf("Microsoft") != -1)
      {
         e = window.event;

         if (e.x || e.y)
         {
            x = e.offsetX;
            y = e.offsetY;
         }

         ref = e.srcElement.name.replace("_pic", "");
      }
      else
      {
         if (e.clientX || e.clientY)
         {
            x = e.offsetX;
            y = e.offsetX;
         }

         ref = e.target.name.replace("_pic", "");
      }

      document.getElementById(ref).style.visibility = "hidden";
   }

   //
   // Methods
   //
   scale.prototype.init = function()
   {
      var val, i;
      switch (this.type)
      {
         case SCALE_CONTINUES:
            // Calculate factor
            this.nominator = MARKER_X_MAXIMUM - MARKER_X_MINIMUM;
            this.denominator = this.maximum - this.minimum;

            if (this.denominator != 0)
            {
               this.factor = this.nominator / this.denominator;
            }
            else
            {
               this.factor = 0;
            }

            // Set value
            if (this.value != null && this.value != "" && !isNaN(this.value))
            {
               if (this.direction == SCALE_HORIZONTAL)
               {
                  if (this.factor > 0)
                  {
                     if (this.reverse)
                     {
                        val = this.factor * (this.maximum - this.value + this.minimum) + (MARKER_X_MINIMUM - this.factor * this.minimum);
                     }
                     else
                     {
                        val = this.factor * this.value + (MARKER_X_MINIMUM - this.factor * this.minimum);
                     }
                  }
                  else
                  {
                     val = MARKER_X_MINIMUM;
                  }

                  if (val < MARKER_X_MINIMUM)
                  {
                     val = MARKER_X_MINIMUM;
                  }
                  else if (val > MARKER_X_MAXIMUM)
                  {
                     val = MARKER_X_MAXIMUM;
                  }

                  document.getElementById(this.name + "_marker").style.left = val; // + (this.marker_width / 2);
               }
               else
               {
                  if (this.factor > 0)
                  {
                     val = (parseFloat(this.value) / this.factor) + MARKER_Y_MINIMUM;
                  }
                  else
                  {
                     val = 0;
                  }

                  if (val < MARKER_Y_MINIMUM)
                  {
                     val = MARKER_Y_MINIMUM;
                  }
                  else if (val > MARKER_Y_MAXIMUM)
                  {
                     val = MARKER_Y_MAXIMUM;
                  }

                  document.getElementById(this.name + "_marker").style.top = val;
               }

               this.visibility = SCALE_SHOW_MARKER;
            }
            document.getElementById(this.name).onclick = this.onmouseclick;
            document.getElementById(this.name + "_marker").onclick = this.ontoggle;
            document.getElementById(this.name + "_marker").style.visibility = this.visibility;

            break;
         case SCALE_DISCRETE:
             if (typeof(document.getElementsByName(this.name).length) != "undefined")
            {
                for (i = 0; i < document.getElementsByName(this.name).length; i++)
               {
                   if (document.getElementsByName(this.name)[i].value == this.value)
                  {
                      document.getElementsByName(this.name)[i].checked = true;
                     break;
                  }
               }
            } else
            {
               if (document.getElementById(this.name).value == this.value)
               {
                  document.getElementById(this.name).checked = true;
                  break;
               }
            }

            break;
         case SCALE_TEXT:
            break;
      }
   }

   scale.prototype.isChecked = function()
   {
      var chk, i;

      switch (this.type)
      {
         case SCALE_CONTINUES:
            chk = (document.getElementById(this.name + "_marker").style.visibility == SCALE_SHOW_MARKER);

            break;
         case SCALE_DISCRETE:
            chk = false;

            if (typeof(document.getElementsByName(this.name).length) != "undefined")
            {
                for (i = 0; i < document.getElementsByName(this.name).length; i++)
               {
                   chk |= document.getElementsByName(this.name)[i].checked;
               }
            } else
            {
               chk = document.getElementById(this.name).checked;
            }

            break;
      }

      return chk;
   }

   scale.prototype.getValue = function()
   {
      var denom, nom, fac;
      var val = "";

      switch (this.type)
      {
         case SCALE_CONTINUES:
            // Calculate factor
            this.nominator = this.maximum - this.minimum;
            this.denominator = MARKER_X_MAXIMUM - MARKER_X_MINIMUM;

            if (this.denominator != 0)
            {
               this.factor = this.nominator / this.denominator;
            }
            else
            {
               this.factor = 0;
            }

            if (document.getElementById(this.name + "_marker").style.visibility == SCALE_SHOW_MARKER)
            {
               //					if (this.direction == SCALE_HORIZONTAL)
               //					{
               val = parseInt(document.getElementById(this.name + "_marker").style.left.replace("px", ""));
               val = toFixed(this.factor * val + (this.minimum - this.factor * MARKER_X_MINIMUM), this.precision);

               if (this.reverse)
               {
                  val = this.maximum - val + this.minimum;
               }
               //					}
               //					else
               //					{
               //						val = parseInt(document.all[this.name+"_marker"].style.top.replace("px", "")) - MARKER_Y_MINIMUM;
               //					}
            }

            break;
         case SCALE_DISCRETE:
             if (typeof document.getElementsByName(this.name).length != "undefined")
            {
                for (i = 0; i < document.getElementsByName(this.name).length; i++)
               {
                   if (document.getElementsByName(this.name)[i].checked)
                  {
                      val = document.getElementsByName(this.name)[i].value;
                  }
               }
            } else
            {
               if (document.getElementById(this.name).checked)
               {
                  val = document.getElementById(this.name).value;
               }
            }

            break;
         case SCALE_TEXT:

            break;
      }

      return val;
   }

   scale.prototype.getScaleHTML = function()
   {
      var res, i;

      switch (this.type)
      {
         case SCALE_CONTINUES:
            res =
					"<table>" +
						"<tr>" +
							"<td align=\"center\">" +
								"<div " +
									"id=\"" + this.name + "_scale\" " +
									"style=\"overflow : auto; " +
											"width : " + this.width + "px; " +
											"height : " + this.height + "px;\">" +

									"<div " +
										"style=\"position : relative; " +
												"top : 0px; " +
												"left : 0px;\">" +

										"<img " +
											"id=\"" + this.name + "\" " +
											"name=\"" + this.name + "\" " +
											"valign=\"center\" " +
											"src=\"../../Images/Questionnaire/Viewer/Scale/slider_horizontal.gif\" " +
											"width=" + this.width + " " +
											"height=" + this.height + " " +
										"/>" +

										"<div " +
											"id=\"" + this.name + "_marker\" " +
											"style=\"position : absolute; " +
													"top : " + this.marker_y_position + "px; " +
													"left : " + this.marker_x_position + "px; " +
													"width : " + this.marker_width + "; " +
													"height : " + this.marker_height + ";visibility:hidden"  + ";\">" +
											"<img " +
												"id=\"" + this.name + "_marker_pic\" " +
												"name=\"" + this.name + "_marker_pic\" " +
												"src=\"../../Images/Questionnaire/Viewer/Scale/black_cross.gif\" " +
												"width=" + this.marker_width + " " +
												"height=" + this.marker_height + " " +
											"/>" +
										"</div>" +
									"</div>" +
								"</div>" +
							"</td>" +
						"</tr>" +
					"</table>";

            break;
         case SCALE_DISCRETE:
            res =
					"<table border=0>" +
						"<tr>";

            if (this.reverse)
            {
               for (i = this.maximum; i >= this.minimum; i -= this.step)
               {
                  res += "<td><input type=\"radio\" name=\"" + this.name + "\" value=" + i + "></td>";
               }
            }
            else
            {
               for (i = this.minimum; i <= this.maximum; i += this.step)
               {
                  res += "<td><input type=\"radio\" name=\"" + this.name + "\" value=" + i + "></td>";
               }
            }

            res +=
						"</tr>" +
					"</table>";

            break;
         case SCALE_TEXT:
            res =
					"<table border=0>" +
						"<tr>" +
							"<td>" +
								"<input type=\"text\" name=\"" + this.name + "\" value=\"\"" +
								((this.size != null) ? " size=" + this.size : "") +
								((this.maxlength != null) ? " maxlength=" + this.maxlength : "") +
								">" +
							"</td>" +
						"</tr>" +
					"</table>";

            break;
      }

      return res;
   }

   scale.prototype.toHTML = function()
   {
      var res, i;

      if (this.type == SCALE_TEXT)
      {
         this.textposition = SCALE_NONE_TEXTPOS;
      }

      switch (this.textposition)
      {
         case SCALE_ABOVE_TEXTPOS:
            res =
					"<table border=0 cellspacing=0>" +
						"<tr>" +
							"<td>" +
								"<table border=0 width=100% cellspacing=0>" +
									"<tr>";

            if (this.reverse)
            {
               res +=
										   "<td width=50% align=\"left\">" + this.maximumtext + "</td>" +
										   "<td width=50% align=\"right\">" + this.minimumtext + "</td>";
            }
            else
            {
               res +=
										   "<td width=50% align=\"left\">" + this.minimumtext + "</td>" +
										   "<td width=50% align=\"right\">" + this.maximumtext + "</td>";
            }

            res +=
									"</tr>" +
								"</table>" +
							"</td>" +
						"</tr>" +
						"<tr>" +
							"<td align=\"center\">" + this.getScaleHTML() + "</td>" +
						"</tr>" +
					"</table>";

            break;
         case SCALE_LEFT_RIGHT_TEXTPOS:
            if (this.reverse)
            {
               res =
					   "<table border=0 cellspacing=0>" +
						   "<tr>" +
							   "<td>" + this.maximumtext + "</td>" +
							   "<td>" + this.getScaleHTML() + "</td>" +
							   "<td>" + this.minimumtext + "</td>" +
						   "</tr>" +
					   "</table>";
            }
            else
            {
               res =
					   "<table border=0 cellspacing=0>" +
						   "<tr>" +
							   "<td>" + this.minimumtext + "</td>" +
							   "<td>" + this.getScaleHTML() + "</td>" +
							   "<td>" + this.maximumtext + "</td>" +
						   "</tr>" +
					   "</table>";
            }

            break;
         case SCALE_BELOW_TEXTPOS:
            res =
					"<table border=0 cellspacing=0>" +
						"<tr>" +
							"<td>" + this.getScaleHTML() + "</td>" +
						"</tr>" +
						"<tr>" +
							"<td>" +
								"<table border=0 width=100% cellspacing=0>" +
									"<tr>";

            if (this.reverse)
            {
               res +=
										   "<td width=50% align=\"left\">" + this.maximumtext + "</td>" +
										   "<td width=50% align=\"right\">" + this.minimumtext + "</td>";
            }
            else
            {
               res +=
										   "<td width=50% align=\"left\">" + this.minimumtext + "</td>" +
										   "<td width=50% align=\"right\">" + this.maximumtext + "</td>";
            }

            res +=
									"</tr>" +
								"</table>" +
							"</td>" +
						"</tr>" +
					"</table>";

            break;
         case SCALE_NONE_TEXTPOS:
            res = this.getScaleHTML();

            break;
      }

      return res;
   }
}