// Copyright (c) metaio GmbH 2006

/** functions for the Online AFC
   *
   * \ for debug mode (example image and model
   ed automatically) set variable 'DEBUG' true
   * \ set variable 'm_version' to desired version name
   * \ set variable 'oafcROOT' to the directory in which index.html is stored
   *
   * \author Ben Blachnitzky
   *
   */


         // ============================== Switch Debug Mode on/off ==================================================
         /** set DEBUG 'true' for debug mode (means debugInit() will be called, photo will be loaded automatically **/

         //var DEBUG = true;
         var DEBUG = false;

         // ----------------------------------------------------------------------------------------------------------



         // ============================== Switch Version  ===========================================================
         /** set m_version to desired version **/

         //var m_version = "Kettler";
	//var m_version = "Ikear";
         //var m_version = "Neckermann";
         var m_version = "Kuka";

         // ----------------------------------------------------------------------------------------------------------



         // ============================== Switch Root Directory  ====================================================
         /** set oafcROOT to the directory in which index.html is stored **/

         //var oafcROOT = "C:\OnlineAFC-Vista\AFC_Online";
   	//var oafcROOT = "http://192.168.100.19/AFCOnline/";
         //var oafcROOT = "http://demo.metaio.com/afconline_shd_engl/";
	//var oafcROOT = "http://localhost/AFCOnline/";
         //var oafcROOT = "http://localhost/KUKAOnline/";
	//var oafcROOT = "C://Inetpub/wwwroot/AFCOnline/";
	var oafcROOT = "http://kuka.ar-live.de/content/";

         // ----------------------------------------------------------------------------------------------------------



         // ============================== Set Global Parameters  ====================================================================


         var currentPosX = 0;
         var currentPosY = 0;

         var m_currentID = 0;
         var m_infoBoxPreviewID = 1;
         var m_controlAspectRatio = 4/3;
         var m_initialTransparencyValue = 0.5;

         /* minimum height of the browser window */
         var m_minWindowHeight = 600;
         var m_minWindowWidth = 900;
         var m_sizeSmallFrameHeight = 109;
	var m_posARControlX = 110;
         var m_posARControlY = 25;
         var m_levelControlsWidth = 160;
         var m_editButtonsWidth = 90;
         /* height of the big frame */
         var m_bigFrameLeftRightHeight = 415;

         var m_levelRadioWall;
         var m_levelRadioTable;
         var m_levelRadioFloor;

         var m_controlError = false;

         /* number of light models in the scene */
         var m_lightCount = 1;

         /* window to open the marker file in */
         var MarkerWindow;

         /* list that holds model objects */
         ModelList = new Array();

         var lightId = -1;


 	/* model object that stores information of each model */
         function Model(id,rotationValue,transparencyValue,shadowsliderValue,levelValue)
	{
		this.id = id;
	        this.rotationValue = rotationValue;
                 this.transpValue = transparencyValue;
                 /* value for the shadow trackbar */
                 this.shadowsliderValue = shadowsliderValue;
                 this.levelValue = levelValue;
	}

         /* array in which the models' file names art stored */
         ModelNames = new Array();
         /* arrays in which the models' short names are stored, the ones that are displayed in the model preview dialog */
         ModelLabels = new Array();

         /* arrays in which all the texture paths are stored */
         TexPaths1 = new Array();
         TexPaths2 = new Array();

         /* the directories of the texture files */
         var texDir1;
         var texDir2;

         /* the number of different texture types */
         var texCount1;
         var texCount2;

         /* path to the light that is loaded into the scene at the beginning */
         var lightPath = "media/models/lights/light.kpscd";

         var popupHeaderPath = "images/misc/popupHeader.jpg";
         var initialImagePath = "images/misc/initial-image.jpg";

         /* the total number of models */
         var modelCount

         /* the directory of the models' preview images */
         var previewDir;
         var previewPhotoDir
         var previewPlaceholder;

         /* the directory of the model files */
         var modelDir;

         /* array in which the preview paths for all models are stores */
         PreviewPaths = new Array();

         /* array in wich the all model file paths are stored */
         PreviewPaths = new Array();
         PreviewPhotoPaths = new Array();
         ModelPaths = new Array();
         ModelClasses = new Array();
         ModelLoads = new Array();
         ModelWeights = new Array();
         ModelReachs = new Array();
         ModelLinks = new Array();

         /* the marker that is used */
         var markerPath

         /* reference to the window that shows the load progress bar */
         var progressBarPopUp;

         /* reference to the window that shows the example models dialog */
         var popModels = '';

         /** set the correct paths and model names for version 'Ikear' **/
         if (m_version == "Kuka")
         {

                 texDir1 = " \"media/models/kukaModels/textur1/";
         	texCount1 = 9;

         	texDir2 = " \"media/models/kukaModels/textur2/";
         	texCount2 = 24;

                 modelCount = 12;

                 ModelNames[1] = "kl1500_2";
         	ModelNames[2] = "kr3";
	        ModelNames[3] = "kr15l6_2";
	        ModelNames[4] = "kr16k";
	        ModelNames[5] = "kr30k_1";
	        ModelNames[6] = "kr125_3";
	        ModelNames[7] = "kr200_3";
	        ModelNames[8] = "kr360_1";
                 ModelNames[9] = "kr360l240_1";
                 ModelNames[10] = "kr500_1";
                 ModelNames[11] = "kr500_570pa";
                 ModelNames[12] = "kr_40_pa";

                 ModelLabels[1] = "KL 1500-2";
         	ModelLabels[2] = "KR3";
	        ModelLabels[3] = "KR 16 L6";
	        ModelLabels[4] = "KR 16(K)";
	        ModelLabels[5] = "KR 30-3";
	        ModelLabels[6] = "KR 125-3";
	        ModelLabels[7] = "KR 200 comp";
	        ModelLabels[8] = "KR 360-2";
                 ModelLabels[9] = "KR 360 450-2 PA";
                 ModelLabels[10] = "KR 500-2";
                 ModelLabels[11] = "KR 500 570-2 PA";
                 ModelLabels[12] = "KR 40 PA";

                 ModelClasses[1] = "Lineareinheiten";
                 ModelClasses[2] = "Kleinrobotik";
                 ModelClasses[3] = "Niedrige Traglast";
                 ModelClasses[4] = "Niedrige Traglast";
                 ModelClasses[5] = "Mittlere Traglast";
                 ModelClasses[6] = "Hohe Traglast";
                 ModelClasses[7] = "Hohe Traglast";
                 ModelClasses[8] = "Schwerlast";
                 ModelClasses[9] = "Schwerlast";
                 ModelClasses[10] = "Schwerlast";
                 ModelClasses[11] = "Schwerlast";
                 ModelClasses[12] = "Mittlere Traglast";

                 ModelLoads[1] = "3800 kg";
                 ModelLoads[2] = "3";
                 ModelLoads[3] = "6 - 16";
                 ModelLoads[4] = "6 - 16";
                 ModelLoads[5] = "30 - 65";
                 ModelLoads[6] = "100 - 240";
                 ModelLoads[7] = "100 - 240";
                 ModelLoads[8] = "360 - 550";
                 ModelLoads[9] = "360 - 570";
                 ModelLoads[10] = "360 - 550";
                 ModelLoads[11] = "360 - 570";
                 ModelLoads[12] = "20 - 60";

                 ModelWeights[1] = "-";
                 ModelWeights[2] = "53";
                 ModelWeights[3] = "240";
                 ModelWeights[4] = "235";
                 ModelWeights[5] = "665";
                 ModelWeights[6] = "1250";
                 ModelWeights[7] = "1150";
                 ModelWeights[8] = "2350";
                 ModelWeights[9] = "2350";
                 ModelWeights[10] = "2350";
                 ModelWeights[11] = "2350";
                 ModelWeights[12] = "700";

                 ModelReachs[1] = "-";
                 ModelReachs[2] = "635";
                 ModelReachs[3] = "1911";
                 ModelReachs[4] = "1610";
                 ModelReachs[5] = "2033";
                 ModelReachs[6] = "3000";
                 ModelReachs[7] = "2700";
                 ModelReachs[8] = "3326";
                 ModelReachs[9] = "3326";
                 ModelReachs[10] = "3326";
                 ModelReachs[11] = "3326";
                 ModelReachs[12] = "2091";

                 ModelLinks[1] = "http://www.kuka.com/germany/de/products/addons/linearunits/PA_KL1500_2_Detail.htm";
                 ModelLinks[2] = "http://www.kuka.com/germany/de/products/industrial_robots/small_robots/kr3/start.htm";
                 ModelLinks[3] = "http://www.kuka.com/germany/de/products/industrial_robots/low/kr16_l6/start.htm";
                 ModelLinks[4] = "http://www.kuka.com/germany/de/products/industrial_robots/low/kr16/start.htm";
                 ModelLinks[5] = "http://www.kuka.com/germany/de/products/industrial_robots/medium/kr30_3/start.htm";
                 ModelLinks[6] = "http://www.kuka.com/germany/de/products/industrial_robots/high/kr150_2_2000/start.htm";
                 ModelLinks[7] = "http://www.kuka.com/germany/de/products/industrial_robots/high/kr200_comp/start.htm";
                 ModelLinks[8] = "http://www.kuka.com/germany/de/products/industrial_robots/heavy/kr360_2/start.htm";
                 ModelLinks[9] = "http://www.kuka.com/germany/de/products/industrial_robots/heavy/kr360_450_2_pa/start.htm";
                 ModelLinks[10] = "http://www.kuka.com/germany/de/products/industrial_robots/heavy/kr500_2/start.htm";
                 ModelLinks[11] = "http://www.kuka.com/germany/de/products/industrial_robots/heavy/kr500_570_2_pa/start.htm";
                 ModelLinks[12] = "http://www.kuka.com/germany/de/products/industrial_robots/medium/kr40_pa/start.htm";


                 previewDir= "media/models/kukaPreviews/";
                 previewPhotoDir = "media/models/kukaPreviews/kukaPreviewsPhoto/";
                 previewPlaceholder = "media/models/kukaPreviews/placeholder.jpg";
                 modelDir = " \"media/models/kukaModels/";

                 /* filepath for the company logo that is displayed at the lower left corner */
                 path_imgLogo = "images/Logos/metaio_logo_horizontal_whiteBack.jpg";
                 path_imgPoweredBy = "images/Logos/poweredBy.jpg";
                 path_imgLogo_Kuka = "images/Logos/kuka_logo.jpg";


                 /* variable that stores the HTML content for the popup window that shows information about the company (opened when company logo is clicked */
                 var_InfoPopUpHTML = m_HTMLcontent_InfoPopUp_metaio;

                 /* the marker that is used */
                 markerPath = "marker/marker.pdf";

         }

         /**  fill the first texture path list **/
         for (i = 1; i <= texCount1; ++i)
         {
                  if (i<10)
                  	TexPaths1[i] = texDir1 + "0"+ i + ".jpg \" ";
                  else
                         TexPaths1[i] = texDir1 +      i + ".jpg \" ";
         }

         /**  fill the second texture path list **/
         for (i = 1; i <= texCount2; ++i)
         {
                  if (i<10)
                  	TexPaths2[i] = texDir2 + "0"+ i + ".jpg \" ";
                  else
                  	TexPaths2[i] = texDir2 +    + i + ".jpg \" ";
         }


         /** fill the preview and models path lists   **/
         for (i = 1; i <= modelCount; i++)
         {
               PreviewPaths[i] = previewDir + ModelNames[i] + ".jpg";

               PreviewPhotoPaths[i] =  previewPhotoDir + ModelNames[i] + ".jpg";

               // put model paths in additional brackets, so the format will be correct when it is passed via the onClick event
               ModelPaths[i] = modelDir + ModelNames[i] + ".kpscd \" ";
         }

         var firstModelLoaded = false;

         /* parameters for the example models dialog */
         var numbOfModelsPerLine = 4;
     	var spacerModelsX = 35;
         var spacerModelsY = 50;
         var thumbSizeModelsX = 85;
         var thumbSizeModelsY = 85;
         var popupModelsWidth = (thumbSizeModelsX + spacerModelsX) * numbOfModelsPerLine + 1.5*spacerModelsX;
         var popupModelsHeight = (thumbSizeModelsY + spacerModelsY) * (Math.ceil(modelCount/numbOfModelsPerLine)) + spacerModelsY;

	var popupSamplePicsWidth = 532;
         var popupSamplePicsHeight = 475;

         var popupHelpBoxWidth = 700;
         var popupHelpBoxHeight = 595;

         // ----------------------------------end of Set Global Parameters--------------------------------------------------------------



         // ============================== Init Functions  =============================================================================

         /** sets some initial values **/
         function init()
         {
                 m_buttonLoadModel = document.getElementById('LoadModel');

                 m_levelRadioWall  = document.getElementById('levelWall');
    	        m_levelRadioTable = document.getElementById('levelTable');
         	m_levelRadioFloor = document.getElementById('levelFloor');

                 setLevelRadio(1);

                 AS_AR_CONTROL.setFocal(0.0, 0.0);

                 showElement("ButtonsMain_group");
                 showElement("FrameBig_group");
                 showElement("TextureSwitcher_group");
                 showElement("FrameSmall_group");

                 dimGUI();

                 if (DEBUG)
                 {
                 	debugInit();
                 }

                 init_mousemove();


         }

         // loads an example photo and model for debug mode
         function debugInit()
         {
               filename = "media/photos/examples/04.jpg";

	      // alert(filename);

               loadImageFile(filename);

               //loadModel("media/models/models1/ikear/magiker3.kpscd");

               //fadeInControls();

         }

         // ----------------------------------end of Init Functions -------------------------------------------------------------------



         // ============================== Load Functions  ============================================================================

         /** loads an image into the As_AR Control and sets is coorect focal length (if it could be extracted from the exif data and camera database **/
         function setImageSource(sourceFile)
	{
	         AS_AR_CONTROL.setImageSource(sourceFile);

  	        var fx = AS_AR_CONTROL.getPropertyValue("ExifDataExtractor",2);
               	var fy = AS_AR_CONTROL.getPropertyValue("ExifDataExtractor",3);

                 // make sure values are interpreted as doubles not strings
                 fx = fx*1;
                 fy = fy*1;

                	AS_AR_CONTROL.setFocal(fx, fy);

         }

         /** loads a model into the AS_AR Control **/
	function loadModel(modelPath)
	{

             if (trackableImageLoaded())
             {

                  /* if no model is loaded so far, fade in the small frame gui now */
                  if (!modelLoaded())
                  {

                         /* if this is the first model ever that is loaded, load lights into the scene first */
                         if (!firstModelLoaded)
		        {
                         	loadLight(lightPath);
                                 firstModelLoaded = true;
                         }

                         fadeInControls();

                  }

                  var fullModelPath = oafcROOT + modelPath;

                  hideModelSelectBox();

                  openProgressPopUp(str_progressBarHeader, str_progressBarModel);

	         //alert(fullModelPath);

	         var modelID = AS_AR_CONTROL.loadDragableGeometry(fullModelPath);

                  if  (modelID > 0)
                  {

	                  m_currentID = modelID;

                           AS_AR_CONTROL.selectGeometryToManipulate(m_currentID);

	                  /* rotate model to default position */
                           AS_AR_CONTROL.setMoveRotation(m_currentID,0,0,1,Math.PI/2);
                           /* additionally add rotation of 90 degress to put model in upright position */
                           AS_AR_CONTROL.addMoveRotationCumulative(m_currentID, 1, 0, 0, Math.PI/2);

	                  /* store new model in the model list array */
	                  ModelList[modelID] = new Model(modelID,Math.PI/2,0,0,0);

	                  var modelName = extractModelName(modelPath);
                           //setInitialShadow(modelName);

	                  /* step through model names list to get the index for the corresponding model label */
	                  var nameIndex = "";
	                  for (i = 0; i <= ModelNames.length; i++)
	                  {
	                    if  (ModelNames[i] == modelName)
	                    {
	                      nameIndex = i;
	                    }
	                  }


	                  var modelLabel = ModelLabels[nameIndex];

                           /* set the correct initial transparency value with a delay, otherwise the shadow texture will not be shown correctly, but a black plane instead */
	                  /* first set shadow transparency to 1, so we don't see a black plane during the delay */
	                  //setShadowTransparency(1, true);

                           window.setTimeout("setShadowTransparency(m_initialTransparencyValue, true)",750);

                           //alert("modelName: " + modelName + "modelID: " + modelID);

	                  /* add the new model to the model list form */
	                  addToModelList(modelLabel, modelID);


                           resetRotationControl();
	                  setLevelRadio(1);

	                  closeProgressPopUp();

                           updateShadowSlider(modelID);

                           setInitialTexture();

                  }
                  else
                  {
                     closeProgressPopUp();
                     alert(str_loadError);
                  }

             }
             else
             {
             	alertLoadImage();
	    }
         }


         /** loads a light into the scene to illuminate the models from the top; is called after first photo is loaded **/
         function loadLight(lightPath)
         {
              var fullLightPath = oafcROOT + lightPath;

              //alert("fullLightPath: " + fullLightPath);

              lightID = AS_AR_CONTROL.loadDragableGeometry(fullLightPath);

              if (!lightLoaded())
              {
                         //alert (lightID);
                         alert(str_lightsError);
                         //window.location.reload( true );
              }
              else
              	AS_AR_CONTROL.setMoveRotation(lightID, 1, 0, 0, Math.PI/2);
         }


         /** loads a new image file into the AS-AR-Control and resizes the GUI according to it's aspect ratio **/
         function loadImageFile(filename)
         {

              setImageSource(oafcROOT + filename);

              var newImageWidth = AS_AR_CONTROL.getPixelSizeImageSourceX();
              var newImageHeight = AS_AR_CONTROL.getPixelSizeImageSourceY();

              setARControlAspectRatio(newImageWidth, newImageHeight);
              resizeGUI();

              //setCorrectFocalLength(focalLength, chipSizeX, chipSizeY, newImageWidth, newImageHeight);
         }

         // ----------------------------------end of Load Functions --------------------------------------------------------------------




         // ============================== Reset and Delete Functions  =================================================================

         /** resets currently selected model back to it's default values **/
         function modelReset()
         {

              if ( modelSelected() )
              {
                  /* move the VRML model back to it's default position */
                  AS_AR_CONTROL.resetDragableGeometry(m_currentID);

              	 /* rotate the VRML model back to it's original state */
                  arRotateModel(Math.PI/2);

                  /* reset the rotation control */
                  resetRotationControl();

                  /* reset the height field */
                  changeLevel(1);
              }
              else
                  alertSelectModel();
         }

         /** deletes a model from the scene **/
         function modelDelete()
         {
             if ( modelSelected() )
             {

                 /* make sure current id is a valid model id*/
                  if (m_currentID > m_lightCount)
                  {

                  /* delete model from the control */
                  AS_AR_CONTROL.unloadGeometry(m_currentID);

                  /* delete entry from the model list form*/
                  deleteModelFromList(m_currentID);

                          /* remove from the model list array */
                          ModelList[m_currentID].id = -1;

                          /* if there is another model left in the scene put selection on it*/
                          if (document.ModelListForm.ModelList.length >=1)
                          {
                             /* set id to first model which is 'number of light sources + 1' */
                             m_currentID = m_lightCount + 1;

                             selectFirstEntryInList();

                          }
                          else
                          {
                             m_currentID = -1;
                             lowlightDeleteButton();
                             fadeOutControls();
                             hideInfoBox();
                          }
                  }

                  //idLabelName.value = m_currentID;
             }
             else
                  alertSelectModel();
         }

         /** deletes all models in the scene **/
         function modelDeleteAll()
         {
             if ( modelSelected())
             {
                      //alert ("ListLength: " +document.ModelListForm.ModelList.length);
                      //alert ("ModelListLength: " +ModelList.length);

                      /* step through model list form to delete every model in the model list array */
                      for (i = 0; i < document.ModelListForm.ModelList.length; ++i)
                      {
                           //alert("Counter:i " + i);

                           /* start with id = (number of light sources + 1) for the vrml IDs */
                           var j = m_lightCount + 1;

                           if (ModelList[j] && ModelList[j].id)
                           {
                           	/* step through model list array to find the corresponding entries to delete */
	                           while ((j <= ModelList.length) && (document.ModelListForm.ModelList.length > 0) && (ModelList.length > 0))
	                           {
                                        // alert ("Counter:j " + j);

                                       /* if model in the model list form corresponds to the model in the model list array */
                                        if (ModelList[j] && ModelList[j].id)
                           	       {
                                              if (document.ModelListForm.ModelList.options[i].value == ModelList[j].id )
                                                {
                                                      /* get it's id and delete it from the control */
                                                      var id = ModelList[j].id;
                                                      //alert ("VRMLid:" + id);
                                                      AS_AR_CONTROL.unloadGeometry(id);

                                                      /* make model list entry invalid */
                                                      ModelList[j].id = -1;

                                                      // the wanted model was found, so force exit from while-loop
                                                      j = ModelList.length;
                                                }
                                       }

                                       j++;

	                           }
                           }

                      }

             }
             else
                  alertSelectModel();

             /* now delete all the entries from the model list form */
             for (i = document.ModelListForm.ModelList.length; i >= 0; i--)
             {
                  document.ModelListForm.ModelList.options[i] = null;
             }

             /* set current model id to undefined */
             m_currentID = -1;
             //idLabelName.value = m_currentID;

             lowlightDeleteAllButton();
             fadeOutControls();
             hideInfoBox();

         }


         // ----------------------------------end of Reset and Delete Functions ----------------------------------------------------------




         // ============================== Rotation Functions  =================================================================

         /** rotates model in the AS_AR Control scene **/
         function arRotateModel(newRotationValue)
         {
                   if ( modelSelected() )
                   {
                            AS_AR_CONTROL.setMoveRotation(m_currentID,0,0,1,newRotationValue);

                            /* additionally add rotation of 90 degress to put model in upright position */
                            AS_AR_CONTROL.addMoveRotationCumulative(m_currentID, 1, 0, 0, Math.PI/2);

                            /* store rotation value in  model list */
                            ModelList[m_currentID].rotationValue = newRotationValue;
                   }
                   else
                   {
                 	resetRotationControl();
                   }
         }

         /** updates the rotation slider according to the stored rotation value of the model with the id 'newID' **/
     	function updateRotationControl(newID)
	{

	      var ModelObject = ModelList[newID];
	      var rotValue = ModelObject.rotationValue;

	      //update the rotation control
	      setRotationControl(rotValue);
	}

         /** resets the rotation slider to it's default position **/
     	function resetRotationControl()
     	{
         	setRotationControl(Math.PI/2);
     	}

         // ------------------------------ end of Rotation Functions ---------------------------------------------------------------


      // ============================== Level Functions  =============================================================================


     /** moves the currently selected model up or down, depending on the value 'move' **/
         function levelUpDown(move)
         {

            if ( modelSelected() )
            {

                 /* multiply with 1 to convert from string to integer */
                 var currentlevelCM = getLevelTextBoxValue() * 1;
                 var newLevelCM = currentlevelCM + move;

                 /* set minimum height level to 0 and maximum to 250 */
                 if ( (newLevelCM >= 0 ) &&  (newLevelCM <=250) )
                 {
                     /* update the radio buttons form */
                     updateLevelControl(newLevelCM);

                     /* save level value in model list array */
                     storeNewLevelValue(m_currentID, newLevelCM);

                     /* adjust the shadow transparency to the new level */
                     changeShadowLevelTransparency(newLevelCM);
                 }

            }
            else
                 alertSelectModel();
         }

         /** checks if current level value 'levelCM' corresponds to one of the three radiobuttons levels of the form; in that case activate it **/
         function updateLevelControl(levelCM)
         {

               switch(levelCM)
               {
                    case 145:
                      setLevelRadio(3);
                      break;
                    case 72:
                      setLevelRadio(2);
                      break;
                    case 0:
                      setLevelRadio(1);
                      break;
                    default:
                      m_levelRadioWall.checked = false;
                      m_levelRadioTable.checked = false;
                      m_levelRadioFloor.checked = false;
                      break;
               }

               /* move the object to the new level */
               setNewLevel(levelCM);
         }


         /** if another radiobutton was clicked and set to true, get the corresponding level value and set new level **/
         function changeLevel(levelID)
         {

            if ( modelSelected() )
            {
               var newLevel;

               setLevelRadio(levelID);

               switch (levelID)
               {
                    case 1:
                      newLevel = 0;
                      break;
                    case 2:
                      newLevel = 72;
                      break;
                    case 3:
                      newLevel = 145;
                      break;
                    default:
                      newLevel = 0;
                      break;
               }

               //alert("newLevel" + newLevel);

               /* save level value in model list array */
               storeNewLevelValue(m_currentID, newLevel);

               /* move the object to the new level */
               setNewLevel(newLevel);

               /* adjust the shadow transparency to the new level */
               changeShadowLevelTransparency(newLevel);
            }
            else
            {
                 setLevelRadio(1);
                 alertSelectModel();
            }

         }

         /** stores level value in model list array **/
         function storeNewLevelValue(modelID, newLevelValue)
         {
                 ModelList[modelID].levelValue = newLevelValue;
         }


         /** gets 'newID's level value from the model list and update the level control form accordingly **/
         function updateLevel(newID)
         {

                 ModelObject = ModelList[newID];
                 var levelCM = ModelObject.levelValue;

                 updateLevelControl(levelCM);

         }


         /** resets the radiobuttons control of the level form **/
         function resetLevelRadios()
         {

               m_levelRadioWall.checked = false;
               m_levelRadioTable.checked = false;
               m_levelRadioFloor.checked = false;

         }

         /** moves the currently selected model to the new level 'levelCM' **/
         function setNewLevel(levelCM)
         {

            setLevelTextBoxValue(levelCM);

            /* convert from cm to mm */
            levelMM = levelCM*10;

            AS_AR_CONTROL.selectGeometryToManipulate(m_currentID);
            // set the new z-value (x and y stay 0, they are only set by dragTranslation)
            AS_AR_CONTROL.setMoveTranslation(m_currentID, 0, 0, levelMM);

            updateShadowLevel(levelMM);

         }

         /** sets one of the level radiobuttons true -> 'levelID' **/
         function setLevelRadio(levelID)
         {
               resetLevelRadios();

               switch (levelID)
               {
                    case 3:
                      m_levelRadioWall.checked = true;
                      setLevelTextBoxValue(145);
                      break;
                    case 2:
                      m_levelRadioTable.checked = true;
                      setLevelTextBoxValue(72);
                      break;
                    case 1:
                      m_levelRadioFloor.checked = true;
                      setLevelTextBoxValue(0);
                      break;
                    default:
                      m_levelRadioWall.checked  = false;
                      m_levelRadioTable.checked = false;
                      m_levelRadioFloor.checked = false;
                      break;
               }
         }

         /** writes the string 'levelValueCM' to the level text box **/
         function setLevelTextBoxValue(levelValueCM)
         {
             	document.LevelValue.LevelTextBox.value = levelValueCM;

         }

         /** return the value of the level text box **/
     	function getLevelTextBoxValue()
     	{
         	return document.LevelValue.LevelTextBox.value;
     	}

         /** gets triggered when user hits the return key to move object to level 'newLevelValue' **/
     	function setTextboxValueLevel(event, newLevelValue)
	{
            //alert(event.keyCode);
           // if return was hit
           if (event.keyCode == 13)
           {
                //alert(newLevelValue);
                // reset key code to prevent the return event from reloading the website
                event.keyCode = -1;

                if (modelSelected())
                {
                       if (checkInput(newLevelValue))
                       {
                           if (newLevelValue > 250)
                                  newLevelValue = 250;
                           if (newLevelValue < 0)
                                  newLevelValue = 0;

                           updateLevelControl(newLevelValue);
                           storeNewLevelValue(m_currentID, newLevelValue);
                       }
                       else
                       {
                              newLevelValue = 0;
                       }
                }
                else
                {
                    newLevelValue = 0;
                    alertSelectModel();
                }
                document.getElementById('LevelTextBox').value = newLevelValue;
           }
	}

         // ----------------------------------end Level Functions ----------------------------------------------------------------------------




         // ============================== Shadow Functions  =================================================================================

         function setInitialShadow(modelName)
         {
         	AS_AR_CONTROL.selectGeometryToManipulate(m_currentID);

                 if (AS_AR_CONTROL.getVrmlField("TEX_shadow", "url") )
		{
                 	var shadowURL = modelName + "_shadow.png";
	                AS_AR_CONTROL.setVrmlField("TEX_shadow","url",shadowURL);
                 }
         }

         /** sets the shadow transparency according to 'transparencyValue' and moves the slider depending on bool value of 'moveSlider' **/
         function setShadowTransparency(transparencyValue, moveSlider)
         {

               /* transparency values are in the range [0;1] slider values are in the range [0;10] */
               var sliderValue = transparencyValue * 10;

               AS_AR_CONTROL.selectGeometryToManipulate(m_currentID);
               var shadowURL = AS_AR_CONTROL.getVrmlField("TEX_shadow", "url")

               /* if the vrml object includes a shadow texture */
               if(shadowURL!= "")
               {
                   /* if shadow slider should be moved */
                   if (moveSlider)
                   {
                         /* change shadow transparency via setting a new value for the shadow slider (which will call changeShadowTransparency()) */
                         sl2.setValue(sliderValue);
                   }
                   else
                   {     /* change shadow transparency without moving the shadow slider */
                   	changeShadowTransparency(transparencyValue);
                   }

                   //alert ("setShadowTransparency: " +  transparencyValue);
                   //ModelList[m_currentID].transpValue = transparencyValue;
               }
         }


         /** changes the shadow transparency of the currently selected model to 'sliderValue' **/
         function changeShadowTransparency(sliderValue)
         {
             if ( modelSelected() )
             {
                 /* calculate the shadow transparency value */
		var transpValue = (10 - sliderValue)/10;

                 /* convert to string */
                 transpValue = transpValue + "";

                 //alert(sliderValue);
                 //alert(shadowValue);

                 //transpValue = transpValue.replace(".",",");
                 //transpValue = "\""+transpValue+"\"";
                 //alert(transpValue);

                 /* set the new value for the shadow transparency node */
                 AS_AR_CONTROL.selectGeometryToManipulate(m_currentID);
                 AS_AR_CONTROL.setVrmlField("MAT_shadow","transparency",transpValue);

                 //alert("changeShadowTransparency: " +  changeShadowTransparency);

                 /* store the transparency value for the currently selected model */
                 ModelList[m_currentID].transpValue = transpValue;
             }
             else
             {
                 /* if no model selected, move shadow slider back to it's default position */
                 resetTransparencySlider();
             }
         }


         /** updates the shadow to 'levelMM' when the object is moved up or down **/
         function updateShadowLevel(levelMM)
	{
               var shadowTransparency = 1;

               /* check if the vrml object includes a shadow texture */
               AS_AR_CONTROL.selectGeometryToManipulate(m_currentID);
               var shadowURL = AS_AR_CONTROL.getVrmlField("TEX_shadow", "url")

               /* if the vrml object includes a shadow texture */
               if(shadowURL!= "")
               {
                       /* if shadow is bound to geometry - show the shadow in it's original position */
                       if(AS_AR_CONTROL.getVrmlField("TEX_shadow", "url").substring(0, 2) == "b_")
                       {
                               /* compute the shadow intensity */
                               shadowTransparency = getShadowSliderValue()/10.0;
                       }
                       /* if shadow is not bound to object compute new intensity and correct the distance to the object */
                       else
                       {
 	              	     //alert ("shadowTransparency: "+ shadowTransparency);

                              /* get object's upwards translation */
                              var moveTranslation = AS_AR_CONTROL.getMoveTranslation(m_currentID);

                              /* compute new shadow position */
                              var moveTranslationZ = moveTranslation.substring(moveTranslation.lastIndexOf(" "),moveTranslation.length );

                              // alert ("moveTranslationZ:   " + moveTranslationZ);

                              /* correct the direction */
                              var shadowTranslationY = (-1)*moveTranslationZ;

                              /* assemble the new translation string */
                              var newShadowTranslation = "0 " + shadowTranslationY + " 0";

                              /*  write assembled string to object's shadow translation node */
                              AS_AR_CONTROL.setVrmlField("ShadowPlane", "translation", newShadowTranslation);
                       }
               }
       	 }


       	/** changes shadow transparency according to the object's level (when model is moved up -> make shadow lighter) **/
	function changeShadowLevelTransparency(levelMM)
	{
         	/* decrease shadow intensity by multiplying with height factor */
            	var multiplyTransparency = 1 - (levelMM / 100);
                 shadowTransparency = getShadowSliderValue() * multiplyTransparency;

                 // set new shadow transparency, but don't move the shadow slider, as this would trigger another shadow recalculation
                 setShadowTransparency(shadowTransparency, false);

	        /* special debug
		setShadowTextBoxValue(shadowTransparency);
	        setMultiplyTextBoxValue(multiplyTransparency);
		setShadowSliderBoxValue(getShadowSliderValue());
		special debug */
	}

         /** moves the shadow slider to the correct position for the model with the id 'newID' **/
         function updateShadowSlider(newID)
         {
               /* get the model object and it's transparency value from the model list */
               ModelObject = ModelList[newID];
               var transpValue = ModelObject.transpValue;

               /* update the slider */
               var slideValue = 10 - transpValue * 10;
               //alert(slideValue);
               sl2.setValue(slideValue);
         }

         /** returns the value of the shadow slider control **/
         function getShadowSliderValue()
         {
                 return sl2.getValue();
         }

         // used for shadow debug purposes
         function pause(millis)
         {
                   var date = new Date();
                   var curDate = null;

                    do {
                           curDate = new Date();
                       }
                    while (curDate-date < millis);
         }



     	/** resets the transparency shadow slider to it's default position **/
	function resetTransparencySlider()
	{
	         sl2.setValue(0);
	}


      // --------------------------------- end of Shadow Functions -----------------------------------------------------------------




      // ============================== Model List Functions  ======================================================================


      /** adds a new model to the model list form **/
      function addToModelList(name, id)
      {
               newModel = new Option(name, id);
               var pos = document.forms["ModelListForm"]["ModelList"].options.length;
               document.forms["ModelListForm"]["ModelList"].options[pos] = newModel;
               selectLatestEntryInList();
      }


      /** removes the model with the id 'id' from the model list form **/
      function deleteModelFromList(id)
      {
                /* step through model list form to find the entry that corresponds to 'id' */
                for (var i = 0; i < document.ModelListForm.ModelList.length; ++i)
                {
                    if (document.ModelListForm.ModelList.options[i].value == id)
                    {
                      document.ModelListForm.ModelList.options[i] = null;
                      //alert(document.ModelListForm.ModelList.options[i].value);
                   }
                }
      }


      /** sets the current model id when selected index in model list form is changed **/
      function selectedIndexChanged()
      {
               /* step through model list form to find the entry that is currently selected */
               for (var i = 0; i < document.ModelListForm.ModelList.length; ++i)
               {
                   if (document.ModelListForm.ModelList.options[i].selected == true)
                   {
                        setCurrentVrmlID(document.ModelListForm.ModelList.options[i].value);
                        //alert(document.ModelListForm.ModelList.options[i].value);
                   }
               }
      }


      /**  finds corresponding model index for model with id 'newID' in the model list form and selects it there **/
      function updateModelList(newID)
      {
            /* step through model list form to find the and select the corresponding entry  */

            for (var i = 0; i < document.ModelListForm.ModelList.length; ++i)
            {
                    if (document.ModelListForm.ModelList.options[i].value == newID)
                    {
                         //alert("length: " + document.ModelListForm.ModelList.length + "id: " + newID);
                         document.ModelListForm.ModelList.options[i].selected = true;
                         setCurrentVrmlID(newID);
                         //selectedIndexChanged();
                    }
            }
      }

      function selectFirstEntryInList()
      {
         document.ModelListForm.ModelList.options[0].selected = true;

         var newID = document.ModelListForm.ModelList.options[0].value;
         setCurrentVrmlID(newID);
      }

      function selectLatestEntryInList()
      {
         var pos = document.ModelListForm.ModelList.length -1;
         document.ModelListForm.ModelList.options[pos].selected = true;
      }

      // --------------------------------- end of Model List Functions --------------------------------------------------------------------




      // ============================== Texture Switcher Functions  ========================================================================

      /** switches the texture type 'switchID' of the currently selected model to the image file at 'texpath' **/
      function textureSwitch(switchID, texPath)
      {
        if  (textureSwitcherEnabled(switchID))
        {

	        if ( modelSelected() )
	        {
	            // alert ("texPath :" + texPath);

	            var nodename;

	            if (switchID == 1)
	                    nodename = "TEXTURE1"
	            else
	                    nodename = "TEXTURE2"

	            var fullPath = oafcROOT.concat(texPath);

	            // alert("fullPath: "+ fullPath + "   nodename: "+ nodename);

	            AS_AR_CONTROL.selectGeometryToManipulate(m_currentID);

	            AS_AR_CONTROL.setVrmlField(nodename,"url", fullPath);
	            //AS_AR_CONTROL.setVrmlField(nodename,"url", oafcROOT + "media/models/models1/textur1/02.jpg");
	        }
	        else
	            alertSelectModel();
        }

      }

      function setInitialTexture()
      {
         AS_AR_CONTROL.selectGeometryToManipulate(m_currentID);
         AS_AR_CONTROL.setVrmlField("TEXTURE1","url", oafcROOT.concat(TexPaths1[6].substring(2)) );
         AS_AR_CONTROL.selectGeometryToManipulate(m_currentID);
         AS_AR_CONTROL.setVrmlField("TEXTURE2","url", oafcROOT.concat(TexPaths2[1].substring(2)) );
      }

      /** dislays a magnified preview of the selected texture **/
      function textureMagnify(switchID, texPath)
      {
        if  (textureSwitcherEnabled(switchID))
        {

	   var textureMagnifier;
	   var textureMagnifier_img;

	   var fullPath = oafcROOT + texPath;

	   if (switchID == 1)
	   {
                    textureMagnifierString = "texture_magnifier1_img";
                    textureMagnifier = document.getElementById("texture_magnifier1");
	           textureMagnifier_img = document.getElementById("texture_magnifier1_img");
	   }
	   else
	   {
            	   textureMagnifierString = "texture_magnifier2_img";
            	   textureMagnifier = document.getElementById("texture_magnifier2");
	           textureMagnifier_img = document.getElementById("texture_magnifier2_img");
	   }

	   textureMagnifier_img.src = fullPath;

            /*textureMagnifier.style.visibility = "visible";
            fadeInTextureMagnifier(textureMagnifierString);*/

        }

      }

      /** dislays a magnified preview of the selected texture **/
      function textureMagnifyOut(switchID)
      {
        if  (textureSwitcherEnabled(switchID))
        {
            var textureMagnifierString;
            var textureMagnifier_img;

            var textureGroup;
            var textureBox;

            if (switchID == 1)
            {
                    textureMagnifierString = "texture_magnifier1_img";
                    textureMagnifier_img = document.getElementById("texture_magnifier1_img");

                    textureGroup = document.getElementById("TextureSwitcher_group");
                    textureBox = document.getElementById("Switcher1_box");
                    textureThumbnails = document.getElementById("textureThumbnails1");
            }
            else
            {       textureMagnifierString = "texture_magnifier2_img";
                    textureMagnifier_img = document.getElementById("texture_magnifier2_img");

                    textureGroup = document.getElementById("TextureSwitcher_group");
                    textureBox = document.getElementById("Switcher2_box");
                    textureThumbnails = document.getElementById("textureThumbnails2");
            }

            /*if (mouseOutsideTextureSwitcher(textureGroup,textureBox, textureThumbnails))
               	 //textureMagnifier.style.visibility = "hidden";
                  fadeOutTextureMagnifier(textureMagnifierString);*/

        }

      }

      /** check if mouse is positioned in texture switcher area **/
      function mouseOutsideTextureSwitcher(textureGroup,textureBox,textureThumbnails)
      {

            var xPos    =  window.event.x;
            var yPos    =  window.event.y;

            if (document.all && !document.captureEvents)
            {
	        xPos    += document[docEl].scrollLeft;
	     	yPos    += document[docEl].scrollTop;
	    }

            var borderX = 15;
            var borderY = 20;
            var thumbnailSizeY = 22;


            var minX = textureGroup.offsetLeft + borderX;
            var maxX = textureGroup.offsetLeft + textureBox.offsetWidth - borderX;

            var minY = textureGroup.offsetTop + getHeaderHeight() + textureBox.offsetTop + textureThumbnails.offsetTop + 2*borderY;
            var maxY = textureGroup.offsetTop + getHeaderHeight() + textureBox.offsetTop + textureThumbnails.offsetTop + textureBox.offsetHeight - borderY - thumbnailSizeY;

            /*
            document.feld1.ausg1.value = "minX: "+ minX + "  maxX: " + maxX;
            document.feld2.ausg2.value = "minY: "+ minY + "  maxY: " + maxY;
            document.feld3.ausg3.value = "outX: "+ xPos + "  outY: " + yPos; */

            if ( (xPos >= minX) && (xPos <= maxX) && (yPos >= minY ) && (yPos <= maxY) )
	        return false;
            else
            	return true;
      }

      /** check if mouse is positioned in texture switcher area **/
      function mouseOutsideTextureArea(switchID)
      {

            var textureMagnifierString;
            var textureMagnifier_img;
            var textureGroup;
            var vartextureBox;
            var textureThumbnails;
            var textureMouseArea;
            var switcher_label;

            if (switchID == 1)
            {
                    textureMagnifierString = "texture_magnifier1_img";
                    textureMagnifier_img = document.getElementById("texture_magnifier1_img");

                    textureGroup = document.getElementById("TextureSwitcher_group");
                    textureBox = document.getElementById("Switcher1_box");
                    textureThumbnails = document.getElementById("textureThumbnails1");
                    textureMouseArea = document.getElementById("textureMouseArea1");
                    switcher_label  = document.getElementById("Switcher1_label");
            }
            else
            {       textureMagnifierString = "texture_magnifier2_img";
                    textureMagnifier_img = document.getElementById("texture_magnifier2_img");

                    textureGroup = document.getElementById("TextureSwitcher_group");
                    textureBox = document.getElementById("Switcher2_box");
                    textureThumbnails = document.getElementById("textureThumbnails2");
                    textureMouseArea = document.getElementById("textureMouseArea2");
                    switcher_label  = document.getElementById("Switcher2_label");
            }

            var xPos    =  window.event.x;
            var yPos    =  window.event.y;

            if (document.all && !document.captureEvents)
            {
	        xPos    += document[docEl].scrollLeft;
	     	yPos    += document[docEl].scrollTop;
	    }

            var minX = textureGroup.offsetLeft + 10 ;
            var maxX = textureGroup.offsetLeft + textureMouseArea.offsetWidth;

            var minY = textureGroup.offsetTop + getHeaderHeight() + textureBox.offsetTop + textureMouseArea.offsetTop + switcher_label.offsetHeight + 10;
            var maxY = textureGroup.offsetTop + getHeaderHeight() + textureBox.offsetTop + textureMouseArea.offsetTop + textureBox.offsetHeight;

            /*
            document.feld1.ausg1.value = "minX: "+ minX + "  maxX: " + maxX;
            document.feld2.ausg2.value = "minY: "+ minY + "  maxY: " + maxY;
            document.feld3.ausg3.value = "outX: "+ xPos + "  outY: " + yPos; */

            /*
            var area = document.getElementById("textureAreaCheck");
            area.style.left = minX;
            area.style.top = minY;
            area.style.width = maxX - minX;
            area.style.height = maxY - minY;    */

            if ( (xPos >= minX) && (xPos <= maxX) && (yPos >= minY ) && (yPos <= maxY) )
	        return false;
            else
            	return true;
      }


      /** fades in the magnified texture elements **/
      function fadeInTextureMagnifier(switchID)
      {

         if  (textureSwitcherEnabled(switchID))
         {
         	var magnifierImg = "";
	        var magnifierElement = "";
	        var fadeID = -1;

	        if (switchID == 1)
	           {
	                magnifierImg = "texture_magnifier1_img";
	                magnifierElement = "texture_magnifier1";
	                fadeID = 13;
	           }
	        else
	        {
	                magnifierImg = "texture_magnifier2_img";
	                magnifierElement = "texture_magnifier2";
	                fadeID = 14;
	        }

	        if (checkFullTransparency(magnifierImg))
	        {

	                //alert("inside + " + switchID);

	                var delay = 1;
	                var opacityStart = 0;


	                FadeOpacities[fadeID] = opacityStart;
	                FadeElements[fadeID] = "";
	                FadeDelays[fadeID] = delay;

	                fadeIn(fadeID, magnifierImg, delay);
	                //showElement(magnifierElement);
	        }

         }
      }



      /** fades in the magnified texture element for texture switcher 1 **/
      function fadeOutTextureMagnifier1()
      {
         if  (textureSwitcherEnabled(1) && (mouseOutsideTextureArea(1))  )
         {
                  //alert("exited");
                  var delay = 0;
	         var opacityStart = 100;
                  var fadeID = 15;
                  opacityMin = 0;


                  FadeOpacities[fadeID] = opacityStart;
	         FadeElements[fadeID] = "";
	         FadeDelays[fadeID] = delay;

                  fadeOut(fadeID, "texture_magnifier1_img", delay);
         }

      }



      /** fades in the magnified texture element for texture switcher 2 **/
      function fadeOutTextureMagnifier2()
      {

         if  (textureSwitcherEnabled(2) && (mouseOutsideTextureArea(2))  )
	{
                  //alert("exited");
                  var delay = 0;
	         var opacityStart = 100;
                  var fadeID = 16;
                  opacityMin = 0;


                  FadeOpacities[fadeID] = opacityStart;
	         FadeElements[fadeID] = "";
	         FadeDelays[fadeID] = delay;

                  fadeOut(fadeID,"texture_magnifier2_img", delay);
         }


      }




      // --------------------------------- end of Texture Switcher Functions ---------------------------------------------------------------







     // =================================== Resize Functions  ============================================================================

     /** takes care of resizing all the gui elements according to the browser window size **/
     function resizeGUI()
     {
     	/* if initialization of control was successful */
         if (!m_controlError)
         {
                  if (document.getElementById)
	         {
	                 var windowHeight = getWindowHeight() - getHeaderHeight();

                          var usablewindowHeight = windowHeight - getHeaderHeight();

                          if (windowHeight > m_minWindowHeight)
	                 {
	                         var arControl = document.getElementById('AS_AR_CONTROL');

	                         var controlHeightNew = windowHeight - (m_posARControlY + 25 + m_sizeSmallFrameHeight);
	                         var controlWidthNew = m_controlAspectRatio * controlHeightNew;

	                         arControl.height =  controlHeightNew;
	                         arControl.width = controlWidthNew;

                                  reposGUIframe(controlHeightNew);
	                         reposBigFrame(controlHeightNew, controlWidthNew);
	                         reposSmallFrame(controlHeightNew, controlWidthNew);
	                         reposTextureSwitcher(controlWidthNew, controlHeightNew);
	                         reposShadowControl(controlWidthNew);
	                         reposLogo();
                                  reposInfoBox(controlWidthNew, controlHeightNew);
                                  reposDimmedFullWindow();
                                  reposKukaLogo();

	                 }
	         }
         }

         /* force rotation slider size to update */
         //sl1.recalculate();

         /* force shadow slider size to update */
         sl2.recalculate();
     }


     /** returns the height of the browser window **/
     function getWindowHeight()
     {
         var windowHeight = 0;
	if (typeof(window.innerHeight)=='number')
         {
        		windowHeight = window.innerHeight;
	}
	else
         {
		if (document.documentElement && document.documentElement.clientHeight)
                 {
			windowHeight = document.documentElement.clientHeight;
		}
		else
          	{
			if (document.body && document.body.clientHeight)
                         {
				windowHeight=document.body.clientHeight;
			}
		}
	}
	return windowHeight;
     }

     /** returns the width of the browser window **/
     function getWindowWidth()
     {
         var windowWidth=0;
	if (typeof(window.innerWidth)=='number')
         {
        		windowWidth = window.innerWidth;
	}
	else
         {
		if (document.documentElement && document.documentElement.clientWidth)
                 {
			windowWidth = document.documentElement.clientWidth;
		}
		else
          	{
			if (document.body && document.body.clientWidth)
                         {
				windowWidth=document.body.clientWidth;
			}
		}
	}
	return windowWidth;
     }

     function getHeaderHeight()
     {
         var headerHeight = 0;

         var afcguiDIV = document.getElementById('AFC_GUI');
         headerHeight = afcguiDIV.offsetTop;

         //alert("headerHeight: " +headerHeight);

         return headerHeight;
     }

     /** sets the aspect ratio of the AS_AR Control **/
     function setARControlAspectRatio(imageWidth, imageHeight)
     {
         m_controlAspectRatio = imageWidth/imageHeight;
     }


     /** resizes the border surrounding the main gui elements the AS-AR Control **/
     function reposGUIframe(controlHeight)
     {
        var GUIframe = document.getElementById('AFC_GUI');
        var smallFrameHeight = 115;

        GUIframe.style.width = getWindowWidth() + 2;
        GUIframe.style.height = m_posARControlY + controlHeight + smallFrameHeight + 20;
     }




     /** repositions and resizes the big frame around the AS-AR Control **/
     function reposBigFrame(controlHeight, controlWidth)
     {

      	 var frameBig_leftRepeat_img = document.getElementById('FrameBig_leftRepeat_img');
          var frameBig_lowerRepeat = document.getElementById('FrameBig_lowerRepeat');
          var frameBig_lowerRepeat_img = document.getElementById('FrameBig_lowerRepeat_img');
          var frameBig_rightMain = document.getElementById('FrameBig_rightMain');
          var frameBig_rightRepeat = document.getElementById('FrameBig_rightRepeat');
          var frameBig_rightRepeat_img = document.getElementById('FrameBig_rightRepeat_img');
          var frameBig_upperRepeat = document.getElementById('FrameBig_upperRepeat');
          var frameBig_upperRepeat_img = document.getElementById('FrameBig_upperRepeat_img');

          var frameBig_cornerUpLeft = document.getElementById('FrameBig_cornerUpLeft');
          var frameBig_cornerLowLeft = document.getElementById('FrameBig_cornerLowLeft');
          var frameBig_cornerUpRight = document.getElementById('FrameBig_cornerUpRight');
          var frameBig_cornerLowRight = document.getElementById('FrameBig_cornerLowRight');


          frameBig_leftRepeat_img.style.height = controlHeight - m_bigFrameLeftRightHeight;
          frameBig_cornerLowLeft.style.top = m_posARControlY + controlHeight - 2;
          frameBig_lowerRepeat.style.top =  frameBig_cornerLowLeft.offsetTop;
          frameBig_lowerRepeat_img.style.width =  controlWidth;
          frameBig_cornerLowRight.style.top = frameBig_cornerLowLeft.offsetTop;
          frameBig_cornerLowRight.style.left = m_posARControlX + controlWidth;
          frameBig_upperRepeat_img.style.width = controlWidth;
          frameBig_cornerUpRight.style.left = m_posARControlX + controlWidth;
          frameBig_rightMain.style.left = m_posARControlX + controlWidth;
          frameBig_rightRepeat.style.left = m_posARControlX + controlWidth;
          frameBig_rightRepeat_img.style.height = controlHeight -  m_bigFrameLeftRightHeight + 1;

     }

     /** repositions and resizes the small frame around control elements below the AS-AR Control **/
     function reposSmallFrame(controlHeight, controlWidth)
     {
      	 var smallFrameGroup = document.getElementById('FrameSmall_group');
          var frameSmall_repeat_img = document.getElementById('FrameSmall_repeat_img');
          var frameSmall_right = document.getElementById('FrameSmall_right');
          var rotation_group = document.getElementById('Rotation_group');
          var rotation_box = document.getElementById('Rotation_box');
          var rotation_degree360 = document.getElementById('Degree_360');
          var shadow_group = document.getElementById('ShadowControl_group');
          var shadow_box = document.getElementById('ShadowControl_box');
          var modelList_group = document.getElementById('ModelList_group');
          var modelList_list = document.getElementById('ModelList_list');
          var editButtons_group = document.getElementById('EditButtons_group');
          var shadow_plus = document.getElementById('ShadowPlus');

          var smallFrameGroupTopNew = m_posARControlY + controlHeight + 17;

          smallFrameGroup.style.top = smallFrameGroupTopNew -2;
          frameSmall_repeat_img.style.width = controlWidth + 8;
          frameSmall_right.style.left = controlWidth + 21;

          editButtons_group.style.left = frameSmall_repeat_img.offsetWidth - m_editButtonsWidth;

          /* calculate the space that can be used for the roation control and the list box form */
          var spaceInbetween =   frameSmall_repeat_img.offsetWidth - m_levelControlsWidth - m_editButtonsWidth - 20;

          /* divide the remaining space in two equal parts for the rotation control and the list box */
          if ( spaceInbetween/3 > 30 )
          {
            var newWidth = spaceInbetween/3 - 10;

            var rotationBoxNewWidth = newWidth;

            var shadowBoxNewWidth = newWidth - newWidth/4;
            // make sure shadowBox is wider than miminum width of the slider
            var sliderMinWidth = 100;
            if (shadowBoxNewWidth < sliderMinWidth) shadowBoxNewWidth = sliderMinWidth;

            var modelListNewWidth = 2*newWidth - shadowBoxNewWidth;

            rotation_box.style.width = rotationBoxNewWidth;
            shadow_box.style.width = shadowBoxNewWidth;
            modelList_list.style.width = modelListNewWidth;

            /* move the 360? label to the new position at the end of the rotation slider */
            //rotation_degree360.style.left = rotationBoxNewWidth - 40;

            /* move the + label to the new position at the end of the shadow slider */
            shadow_plus.style.left = shadowBoxNewWidth - 22;

          }

          shadow_group.style.left = rotation_group.offsetLeft + rotation_box.offsetWidth + 10;
          modelList_group.style.left = shadow_group.offsetLeft + shadow_box.offsetWidth + 10;

     }

     /** repositions the texture switcher group **/
     function reposTextureSwitcher(controlWidth, controlHeight)
     {

         var textureSwitcher_group = document.getElementById('TextureSwitcher_group');

         textureSwitcher_group.style.left = m_posARControlX + controlWidth + 30;
         textureSwitcher_group.style.top = m_posARControlY + controlHeight - 345;

     }

     /** repositions the shadow slider **/
     function reposShadowControl(controlWidth)
     {

         var shadowControl_group = document.getElementById('ShadowControl_group');

         /*if (shadowControl_group)
         	 shadowControl_group.style.left = m_posARControlX + controlWidth + 30; */

     }

     /** repositions the metaio logo that leads to the info message box **/
     function reposLogo()
     {

        var logo = document.getElementById('Logo');

        logo.style.left = getWindowWidth() - 325;
     }

     function reposKukaLogo()
     {
       var logo = document.getElementById('LogoKuka');

        logo.style.top = document.getElementById('FrameSmall_group').offsetTop + 2;
     }

     function reposInfoBox(controlWidth, controlHeight)
     {
     	var infoBox = document.getElementById('dragdropInfoBox');
         infoBox.style.left = m_posARControlX + controlWidth + 30;
         infoBox.style.top = m_posARControlY + document.getElementById('AFC_GUI').offsetTop;
     }

     function reposModelSelectBox()
     {

          document.getElementById('ModelSelect_box').style.width = popupModelsWidth;
          document.getElementById('ModelSelect_box').style.height = popupModelsHeight;

          document.getElementById('modelBoxTitle').style.width = popupModelsWidth;

          document.getElementById('iFrameModelBox').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop + 25;
          document.getElementById('iFrameModelBox').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('AFC_GUI').offsetLeft + 25;

          document.getElementById('modelBoxTitle').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop + 25;
          document.getElementById('modelBoxTitle').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('AFC_GUI').offsetLeft + 25;

          document.getElementById('modelBoxClose').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop + 30;
          document.getElementById('modelBoxClose').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('modelBoxTitle').offsetWidth - 2;

          document.getElementById('ModelSelect_group').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop + 25;
          document.getElementById('ModelSelect_group').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('AFC_GUI').offsetLeft + 25;

          document.getElementById('iFrameModelBox').style.width = popupModelsWidth;
          document.getElementById('iFrameModelBox').style.height = popupModelsHeight;

     }

     function reposSamplePicsBox()
     {

          document.getElementById('samplePics_box').style.width = popupSamplePicsWidth;
          document.getElementById('samplePics_box').style.height = popupSamplePicsHeight;

          document.getElementById('samplePicsTitle').style.width = popupSamplePicsWidth;

          document.getElementById('iFrameSamplePicsBox').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop + 25;
          document.getElementById('iFrameSamplePicsBox').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('AFC_GUI').offsetLeft + 25;

          document.getElementById('samplePicsTitle').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop + 25;
          document.getElementById('samplePicsTitle').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('AFC_GUI').offsetLeft + 25;

          document.getElementById('samplePicsClose').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop + 30;
          document.getElementById('samplePicsClose').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('samplePicsTitle').offsetWidth - 2;

          document.getElementById('samplePics_group').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop + 25;
          document.getElementById('samplePics_group').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('AFC_GUI').offsetLeft + 25;

          document.getElementById('iFrameSamplePicsBox').style.width = popupSamplePicsWidth;
          document.getElementById('iFrameSamplePicsBox').style.height = popupSamplePicsHeight;

         /* document.getElementById('samplePics_whiteFrame').style.width =  popupSamplePicsWidth + 4;
          document.getElementById('samplePics_whiteFrame').style.height = popupSamplePicsHeight + 4; */
     }


     function reposHelpBox()
     {
          document.getElementById('helpBox_box').style.width = popupHelpBoxWidth;
          document.getElementById('helpBox_box').style.height =popupHelpBoxHeight - 25;

          document.getElementById('helpBoxTitle').style.width = popupHelpBoxWidth;

          var topX = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop - 10;
          var topY = document.getElementById('ARControl').offsetLeft + document.getElementById('AFC_GUI').offsetLeft + 25;

          document.getElementById('iFrameHelpBox').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop -10;
          document.getElementById('iFrameHelpBox').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('AFC_GUI').offsetLeft +25;

          document.getElementById('helpBoxTitle').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop -10;
          document.getElementById('helpBoxTitle').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('AFC_GUI').offsetLeft +25;

          document.getElementById('helpBoxClose').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop -5;
          document.getElementById('helpBoxClose').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('helpBoxTitle').offsetWidth - 2;

          document.getElementById('helpBox_group').style.top = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop -10;
          document.getElementById('helpBox_group').style.left = document.getElementById('ARControl').offsetLeft + document.getElementById('AFC_GUI').offsetLeft + 25;

          document.getElementById('iFrameHelpBox').style.width = popupHelpBoxWidth;
          document.getElementById('iFrameHelpBox').style.height = popupHelpBoxHeight;
     }

     function reposDimmedFullWindow()
     {
      	document.getElementById("dimmedFullWindow").style.width = getWindowWidth();
         document.getElementById("dimmedFullWindow").style.height = getWindowHeight();
     }

     // --------------------------------- end of Resize Functions --------------------------------------------------------------------


     // =================================== Check Input Functions  ======================================================================


     /** checks if a model is selected in the scene **/
     function modelSelected()
     {

         if ( m_currentID > 0)
              return true;
         else
              return false;

     }


     /** checks if a model is loaded at all **/
     function modelLoaded()
     {

           var anyModelLoaded = false;

           // alert("modellistlength: " + ModelList.length);

           for (i = 1; i < ModelList.length; i++)
     	  {

                 //alert("i: " + i);
                 if (ModelList[i])
                 {
                 	if(ModelList[i].id != -1)
		        	anyModelLoaded = true;
                 }
	  }

           return anyModelLoaded;

     }

     function lightLoaded()
     {
           if (lightID!=-1)
           	return true;
           else
           	return false;

     }


    /** checks if a trackable image has to be loaded first **/
     function trackableImageLoaded()
     {

         if ( AS_AR_CONTROL.getNumberOfValidCoordinateSystems() > 0 )
            return true;
         else
            return false;

     }


     /** gets called if a key was pressed -> checks which one was pressed -> if up or down cursor key was pressed new level for currently selected model is set **/
     function keyPressed(event)
     {

         //alert("event: " + event.keyCode);

         // if 'cursor up' key was presses raise model
         if ( event.keyCode == 38 )
         {
             levelUpDown(1);
         }
         // if 'cursor down' key was presses raise model
         else if ( event.keyCode == 40 )
         {
             levelUpDown(-1);
         }

     }

      /** checks if 'input' string only consists of numbers **/
     function checkInput(input)
     {
     	var validInput = "-0123456789";

         // check if input consists only the characters stored in validInput
         for (i = 0; i < input.length; i++)
	{
             if (validInput.indexOf(input.charAt(i)) < 0)
	    {
               	return false;
             }
         }
         return true;
     }


     // --------------------------------- end of Check Input Functions ------------------------------------------------------------------




     // =================================== Various Helper Functions  ===================================================================

      /* for debug puposes: displays ARcontrol error mmessages */
      function ARsetErrorMode()
      {

      	   AS_AR_CONTROL.setErrorMode(-1);
      }


      /** saves screenshot of the current scene in the AS_AR Control **/
      function saveScreenshot(screenshotPath)
      {
      	    AS_AR_CONTROL.saveScreenshot(screenshotPath);
      }


      /** returns the name of a model through extracting it from it's path **/
      function extractModelName(modelPath)
      {
      	    var modelName = modelPath.substring(modelPath.lastIndexOf('/')+1,modelPath.indexOf('.'));
      	    return modelName;
      }


      /** sets the current object id and updates rotation slider, shadow slider and object level **/
      function setCurrentVrmlID(newID)
      {
             m_currentID = newID;
             updateRotationControl(newID);
             //idLabelName.value = newID;
             updateShadowSlider(newID);
             updateLevel(newID);

             updateProductInfo(getModelIndex());
      }


     /** for debug purposes **/
     function setShadowTextBoxValue(shadowValue)
     {
             document.ShadowValue.ShadowTextBox.value = "shadow: " + shadowValue;
     }

     /** for debug purposes **/
     function setMultiplyTextBoxValue(mulitplyValue)
     {
             document.MultiplyValue.MultiplyTextBox.value = "multiply: " + mulitplyValue;
     }

     /** for debug purposes **/
     function setShadowSliderBoxValue(sliderValue)
     {
             document.ShadowSliderBox.ShadowSliderTextBox.value = "slider: " + sliderValue;
     }


     // --------------------------------- end of Various Helper Functions ---------------------------------------------------------------





     // ==================================================  region POPUP DIALOGS  ========================================================
     /** opens file dialog to choose an image file to load **/
         function openFileDialog_Image()
         {
         	//dimWindowExceptControl(true);

         	cDialog.CancelError=true;
        		try{
                          cDialog.Filter="Bild Dateien (*.JPEG;*.JPG;*.JPE;*.BMP)|*.JPEG;*.JPG;*.JPE;*.BMP|All Files (*.*)|*.*|"
	                 cDialog.ShowOpen();
                          /*var ForReading = 1;
                          var fso = new ActiveXObject("Scripting.FileSystemObject");
                          var f = fso.OpenTextFile(cDialog.filename, ForReading);
                          var r = f.ReadAll();
                          f.close();
                          oDiv.innerHTML=r;   */

                          // Retrieve file + path
           		var filename = cDialog.FileName;
                          //alert(file);
                          // if a file was selected
                          if (filename)
                          {
                                 /* DEBUG
                                 var myImage = new Image();
				myImage.src = filename;
                                 var newImageWidth = myImage.width;
                                 var newImageHeight = myImage.height;
                                	myImage.src = "";
                                 alert ("filename: " + filename);
                                 alert ("newImageWidth: " + newImageWidth + "    newImageHeight: " + newImageHeight);
                                 DEBUG */

                                 // load the photo in the AR control

                                 window.focus();
                                 openProgressPopUp(str_progressBarHeader, str_progressBarPhoto);
                                 setImageSource(filename);
                                 closeProgressPopUp();

                                 var newImageWidth = AS_AR_CONTROL.getPixelSizeImageSourceX();
                                 var newImageHeight = AS_AR_CONTROL.getPixelSizeImageSourceY();

                                 setARControlAspectRatio(newImageWidth, newImageHeight);
                                 resizeGUI();

                                 // if photo is not trackable show alert message
                                 if (!trackableImageLoaded())
                                 	showNoCosWindow();
                          }

                          dimWindowExceptControl(false);

                 }
   		catch(e){
                         dimWindowExceptControl(false);
                         var sCancel="true";
   	   		return sCancel;
                 }
	}


     function openModelDialog()
     {
        if ( trackableImageLoaded() )
        {
             if (!modelLoaded())
             {
                 showInfoBox();
             }
             showModelSelectBox();
             reposModelSelectBox();
         }
         else
         {
              alertLoadImage();
         }
     }




     function closePopModels() {
 	 if (popModels && !popModels.closed)
          {
                  popModels.close();
          }
     }


     /** opens new window with example photos **/
     function openExamplePicsDialog()
     {
          showSamplePicsBox();
          reposSamplePicsBox();
     }

     function closeExamplePicsDialog()
     {
     	hideSamplePicsBox();
     }

     /** opens a new window with the pdf marker file in it **/
     function loadMarker()
     {

         try
         {
                 MarkerWindow = window.open(markerPath, "Marker", "scrollbars=yes menubar=no resizable=yes status=no toolbar= no");
                 MarkerWindow.focus();
         }
         // if try fails probably the marker file already is open in another window
         catch(e)
         {
                 alert(unescape(mb_markerFileOpen));
         }

     }

     /** opens a new window that displays information about the metaio company **/
     function loadInfo()
     {

             pop = window.open("","",'width=400,height=230,location=no,menubar= no,toolbar=no,status=no,scrollbars=no,screenX=150,screenY=150,left=200,top=200');
             pop.document.open();
             //alert("var_InfoPopUpHTML :" + var_InfoPopUpHTML);
             pop.document.write(var_InfoPopUpHTML);
	    pop.document.close();
             //focus AFTER finishing the creation of the document.
             pop.document.focus();
     }


     /** opens a new window that displays help pages how to work with the Online AFC **/
     function loadHelp()
     {
             pop = window.open("","",'width=700,height=560,toolbar=0,status=no,scrollbars=0,screenX=50,screenY=25,left=200,top=200');
             pop.document.open();
	    pop.document.write(m_HTMLcontent_HelpPopUp);
                  /* needed for etracker, doesn't really track though */
                  //pop.document.write("<script type=\"text/javascript\">");
          	 //pop.document.write("var et_pagename = \"Online AFC loadHelp\";");
          	 //pop.document.write("</script>");
             pop.document.title = "Online-AFC Help";
	    pop.document.close();
             pop.document.focus();
     }


     function openHelpDialog()
     {
         dimFullWindow(true);
         showHelpBox();
         reposHelpBox();
     }


     /** opens new window showing message that the loaded photo is not trackable **/
     function showNoCosWindow()
     {

          pop = window.open("","",'width=500,height=400,toolbar=0,status=no,scrollbars=0,screenX=50,screenY=25,left=200,top=200');
          pop.document.open();
          pop.document.write(m_HTMLcontent_NoCOSAlert);
         	  /* needed for etracker, doesn't really track though */
	          //pop.document.write("<script type=\"text/javascript\">");
	          //pop.document.write("var et_pagename = \"Online AFC showNoCosWindow\";");
	          //pop.document.write("</script>");
          pop.document.close();
          pop.focus();
     }

     /** opens new window showing message that currently installed renderer version (BSContact) is too old **/
     function alertRendererTooOld(currentVersion, neededVersion)
     {
       m_controlError = true;
       // alert (" Renderer too old! Current Version: " + currentVersion + "  Needed Version: " + neededVersion);

       var strCurrentVersion =  currentVersion + "";
       var strNeededVersion = neededVersion + "";

       pop = window.open("","",'width=450,height=180,toolbar=0,status=no,scrollbars=0,screenX=50,screenY=25,left=200,top=200');
       pop.document.open();
       pop.document.write(m_HTMLcontent_ControlErrorAlert);
       pop.document.write("<font face='VERDANA,ARIAL,HELVETICA' size='-1' color='#373737'>");
       pop.document.write(str_controlErrorInfo1);
       pop.document.write("<br><br>");
       pop.document.write(str_controlErrorInfo2);
       pop.document.write("</font>");
       pop.document.write("<br><br>")
       pop.document.write("<a href = " + cabFileName2 + "> Update Version </a>");
       	/* needed for etracker, doesn't really track though */
       	//pop.document.write("<script type=\"text/javascript\">");
       	//pop.document.write("var et_pagename = \"Online AFC alertRendererTooOld\";");
       	//pop.document.write("</script>");
       pop.document.close();
       pop.focus();
     }

     /** opens a window with an animated give showing that loading photos or models is in progress; is closed after loading is completed by calling closeProgressPopUp() **/
     function openProgressPopUp(header, info)
     {

         window.status = "Loading...";

         progressBarPopUp = window.open("","",'width=100,height=100,location=0,menubar=0,resizable=0;toolbar=0,status=no,scrollbars=0,screenX=50,screenY=25,left=200,top=200');
       	progressBarPopUp.document.open();
         progressBarPopUp.document.write("<HTML xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>");
         progressBarPopUp.document.write("<HEAD><TITLE>");
         progressBarPopUp.document.write( header );
         progressBarPopUp.document.write("</TITLE>")+
         progressBarPopUp.document.write("<meta http-equiv='content-type' content='text/html; charset=utf-8' /></HEAD>");
         progressBarPopUp.document.write("<BODY bgcolor=#F0F0F5>");
         progressBarPopUp.document.write("<font face='VERDANA,ARIAL,HELVETICA' size='-1' color='#373737'>");
         progressBarPopUp.document.write("<div id = 'info' style='position:relative; width:100% top:10px; margin:auto; text-align:center'>");
         progressBarPopUp.document.write( info );
         progressBarPopUp.document.write("</div></font>");
         progressBarPopUp.document.write("<div id = 'ProgressBarDiv2' style='position:absolute; top:55px; width:100%' align='center'>");
         /* the animated gif */
         progressBarPopUp.document.write("<IMG id = 'ProgressBar2' SRC='images/anim/progressCircle_blue.gif' align='center'>");
         progressBarPopUp.document.write("</div>");
         progressBarPopUp.document.write("</BODY>");
         progressBarPopUp.document.write("</HTML>");
         progressBarPopUp.document.close();
         progressBarPopUp.focus();
     }

     /** closes the load progress bar window **/
     function closeProgressPopUp()
     {
         progressBarPopUp.close();
         window.status = "Augmented Furniture Client by metaio GmbH";
     }

     /** opens file dialog to select a destination for a screenshot to save to **/
     function saveFileDialog_Screenshot()
     {
         if ( modelSelected() )
         {

              dimWindowExceptControl(true);

              // saveDocument uses the common dialog box object to display the save as dialog, then writes a textstream object from the value of the div's innerHTML property
              // setting CancelError to true and using try/catch allows the user to click cancel on the save as dialog without causing a script error
              cDialog.CancelError=true;

              try{
                      cDialog.Filter="Bild Dateien (*.JPEG;*.JPG;*.JPE;*.BMP)|*.JPEG;*.JPG;*.JPE;*.BMP|All Files (*.*)|*.*|"
                      cDialog.ShowSave();

                       // Retrieve file + path
                      file = cDialog.FileName;
                      //alert(file);
                      // If the user does enter file
                      if (file)
                      {
                          saveScreenshot(file);
                      }
                      dimWindowExceptControl(false);
              }
              catch(e){
                      dimWindowExceptControl(false);
                      var sCancel="true";
                      return sCancel;
              }
         }
         else
         {
             alertSelectModel();
         }

     }

     /** displays a message box that an image has to be loaded first **/
     function alertLoadImage()
     {
          alert(unescape(mb_loadPhotoFirst));
     }

     /** displays a message box that a model has to be selected first **/
     function alertSelectModel()
     {
         if (!modelLoaded())
         {
         	alert(unescape(mb_loadObjectFirst));
         }
         else
         {
         	alert(unescape(mb_loadObjectFirst));
         }

     }

     function alertDemoversion()
     {
        alert(str_demoversionAlert);
     }


     /** global fade parameters **/
     var FadeOpacities = new Array();
     var FadeElements = new Array();
     var FadeDelays = new Array();

     var fadesCount = 20;

     var opacityMin = 20;

     for (i = 1; i<= fadesCount; ++i)
     {
     	FadeOpacities[i] = 0;
         FadeElements[i] = "";
         FadeDelays[i] = 0;
     }

       // -------end of global fade parameters -----------


     function fadeIn(fadeId, elementID, delay)
     {
        //alert("fadeId a: " + fadeId);

        FadeElements[fadeId] = elementID;
        FadeDelays[fadeId] = delay;

        var element = document.getElementById(FadeElements[fadeId]);

        if (element)
        	element.style.filter="Alpha(opacity="+FadeOpacities[fadeId]+")";

        if(FadeOpacities[fadeId] < 100)
        {
                 FadeOpacities[fadeId] += 5;
                 if (FadeOpacities[fadeId] > 100)
                    	FadeOpacities[fadeId] = 100;

                 switch(fadeId)
                 {

                    case 1:
  	                setTimeout("var id = 1; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
         	        break;
                    case 2:
  	                setTimeout("var id = 2; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
         	        break;
                    case 3:
                 	setTimeout("var id = 3; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 4:
                 	setTimeout("var id = 4; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 5:
                 	setTimeout("var id = 5; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 6:
                 	setTimeout("var id = 6; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 7:
                 	setTimeout("var id = 7; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 8:
                 	setTimeout("var id = 8; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 9:
                 	setTimeout("var id = 9; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 10:
                 	setTimeout("var id = 10; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 11:
                 	setTimeout("var id = 11; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 12:
                 	setTimeout("var id = 12; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 13:
                 	setTimeout("var id = 13; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 14:
                 	setTimeout("var id = 14; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 15:
                 	setTimeout("var id = 15; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 16:
                 	setTimeout("var id = 16; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 17:
                 	setTimeout("var id = 17; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 18:
                 	setTimeout("var id = 18; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 19:
                 	setTimeout("var id = 19; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    case 20:
                 	setTimeout("var id = 20; fadeIn(id, FadeElements[id], FadeDelays[id])", delay );
                         break;
                    default:
                    	break;
                 }

        }
      }

      function fadeOut(fadeId, elementID, delay)
      {

         FadeElements[fadeId] = elementID;
        	FadeDelays[fadeId] = delay;

        	var element = document.getElementById(FadeElements[fadeId]);

         if (element)
          element.style.filter="Alpha(opacity="+FadeOpacities[fadeId]+")";

        	if(FadeOpacities[fadeId] > opacityMin)
         {
                 FadeOpacities[fadeId] -= 5;
                 	if (FadeOpacities[fadeId] < opacityMin)
                    		FadeOpacities[fadeId] = opacityMin;

                 switch(fadeId)
                 {
                         case 1:
  	                     setTimeout("var id = 1; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
         	             break;
                         case 2:
  	                     setTimeout("var id = 2; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
         	             break;
                    	case 3:
	                     setTimeout("var id = 3; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
	                     break;
                         case 4:
                              setTimeout("var id = 4; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 5:
                              setTimeout("var id = 5; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 6:
                              setTimeout("var id = 6; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 7:
                              setTimeout("var id = 7; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 8:
                              setTimeout("var id = 8; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 9:
                              setTimeout("var id = 9; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 10:
                              setTimeout("var id = 10; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 11:
                              setTimeout("var id = 11; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 12:
                              setTimeout("var id = 12; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 13:
                              setTimeout("var id = 13; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 14:
                              setTimeout("var id = 14; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 15:
                              setTimeout("var id = 15; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 16:
                              setTimeout("var id = 16; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 17:
                              setTimeout("var id = 17; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 18:
                              setTimeout("var id = 18; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 19:
                              setTimeout("var id = 19; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break;
                         case 20:
                              setTimeout("var id = 20; fadeOut(id, FadeElements[id], FadeDelays[id])", delay );
                              break
                         default:
                              break;
                 }
 	}
       }


      function fadeInControls()
      {
       	opacityMin = 20;

         var delay = 20;
         var opacityStart = opacityMin;


        for (i = 1; i<= fadesCount; ++i)
        {
            FadeOpacities[i] = opacityStart;
            FadeElements[i] = "";
            FadeDelays[i] = delay;
        }

         fadeIn(1,'allLevelLabels',delay);
         fadeIn(2,'divLevelShow',delay);
         fadeIn(3,'imgLevelDown', delay);
         fadeIn(4,'imgLevelUp',delay);
         fadeIn(5,'Rotation_label',delay);
         fadeIn(6,'ShadowControl_group',delay);
         fadeIn(7,'ModelList_group',delay);
         fadeIn(8,'imgModelReset',delay);
         fadeIn(9,'imgModelDelete',delay);
         fadeIn(10,'imgModelDeleteAll',delay);
         //fadeIn(11,'Switcher1_box',delay);
         //fadeIn(12,'Switcher2_box',delay);
         fadeIn(13,'Rotation_box',delay);

         window.setTimeout("enableControls()",delay*75);
      }



      function fadeOutControls()
      {
         var delay = 30;
         var opacityStart = 100;

         opacityMin = 20;

       for (i = 1; i<= fadesCount; ++i)
       {
           FadeOpacities[i] = opacityStart;
           FadeElements[i] = "";
           FadeDelays[i] = delay;
       }

         fadeOut(1,'allLevelLabels',delay);
         fadeOut(2,'divLevelShow',delay);
         fadeOut(3,'imgLevelDown', delay);
         fadeOut(4,'imgLevelUp',delay);
         fadeOut(5,'Rotation_label',delay);
         fadeOut(6,'ShadowControl_group',delay);
         fadeOut(7,'ModelList_group',delay);
         fadeOut(8,'imgModelReset',delay);
         fadeOut(9,'imgModelDelete',delay);
         fadeOut(10,'imgModelDeleteAll',delay);
         //fadeOut(11,'Switcher1_box',delay);
         //fadeOut(12,'Switcher2_box',delay);
         fadeOut(13,'Rotation_box',delay);

         window.setTimeout("disableControls()",delay*10);
      }


      function dimGUI()
      {
      	dimLevelControls();
         dimRotationControls();
         dimShadowControls();
         dimModelListGroup();
         dimEditButtons();
         hideInfoBox();
        	hideTextureSwitchers();

         disableControls();
      }


      function dimLevelControls()
      {
        dimElement('allLevelLabels');
        dimElement('divLevelShow');
        dimElement('imgLevelUp');
        dimElement('imgLevelDown');

      }

      function dimTextureSwitchers()
      {
        dimElement('Switcher1_box');
        dimElement('Switcher2_box');
      }

      function hideTextureSwitchers()
      {
        hideElement('Switcher1_box');
        hideElement('Switcher2_box');
      }

      function disableTextureSwitchers()
      {
        	disableElement('Switcher1_box');
        	disableElement('Switcher2_box');
      }

      function enableTextureSwitchers()
      {
        	enableElement('Switcher1_box');
        	enableElement('Switcher2_box');
      }

      function textureSwitcherEnabled(id)
      {
      	var switcherElement;

         switch(id)
               {
                    case 1:
                      switcherElement = document.getElementById("Switcher1_box");
                      break;
                    case 2:
                      switcherElement = document.getElementById("Switcher2_box");
                      break;
               }

	var opacity = switcherElement.style.filter;
         var opacityFull = "Alpha(opacity=100)";

         if  (opacity == opacityFull)
         	return true;
         else
         	return false;
      }

      function disableControls()
      {
        disableElement('Level3');
        disableElement('Level2');
        disableElement('Level1');
        disableElement('LevelTextBox');
        disableElement('imgLevelUp');
        disableElement('imgLevelDown');

        disableElement('imgModelReset');
        disableElement('imgModelDelete');
        disableElement('imgModelDeleteAll');

        disableRotationControl();
        disableTextureSwitchers();
      }

      function enableControls()
      {
         enableElement('Level3');
         enableElement('Level2');
         enableElement('Level1');
         enableElement('LevelTextBox');
         enableElement('imgLevelUp');
         enableElement('imgLevelDown');

         enableElement('RotationControl');

        	enableElement('imgModelReset');
         enableElement('imgModelDelete');
         enableElement('imgModelDeleteAll');

         enableRotationControl();
         //enableTextureSwitchers();
      }

      function dimRotationControls()
      {
         dimElement('Rotation_box');
         dimElement('Rotation_label');
      }

      function dimShadowControls()
      {
         dimElement('ShadowControl_group');
      }

      function dimModelListGroup()
      {
       	dimElement('ModelList_group');
      }

      function dimEditButtons()
      {
       	disableElement('imgModelReset');
         dimElement('imgModelReset');

         disableElement('imgModelDelete');
         dimElement('imgModelDelete');

         disableElement('imgModelDeleteAll');
         dimElement('imgModelDeleteAll');

         imgModelDeleteAll
      }

      function disableElement(element)
      {
        document.getElementById(element).disabled = true;
      }

      function enableElement(element)
      {
        document.getElementById(element).disabled = false;
      }

      function dimElement(element)
      {
        document.getElementById(element).style.filter ='Alpha(opacity=25)';
      }

      /* set the delete button back to it's visual default status */
      function lowlightDeleteButton()
      {
         document.getElementById('imgModelDelete').src = path_imgModelDelete;
      }

      /* set the delete all models button back to it's visual default status */
      function lowlightDeleteAllButton()
      {
         document.getElementById('imgModelDeleteAll').src = path_imgModelDeleteAll;
      }


     function fadeElement()
     {
     	document.getElementById('ARControl').style.filter ='Alpha(opacity=50)';
     }

     function hideElement(elementID)
     {
         var element = document.getElementById(elementID);

         if (element)
	        element.style.visibility = "hidden";
         else
                 alert("Element not found: " + elementID);
     }

     function showElement(elementID)
     {
         var element = document.getElementById(elementID);

         if (element)
         	element.style.visibility = "visible";
         else
         	alert("Element not found: " + elementID);
     }


      function dimARControl(dimBool)
      {
         //dimElement("ARControl"); //-> doesn't work
         //dimElement("AS_AR_CONTROL"); //-> doesn't work

         //hideElement("ARControl"); // ->  works
         if (dimBool)
         	hideElement("AS_AR_CONTROL"); // ->  works
         else
         	showElement("AS_AR_CONTROL");
         //alert("hidden");
      }

      function dimWindowExceptControl(dimBool)
      {
         //dimFullWindow(dimBool);

         if (dimBool)
	    	showElement("dimmedFullWindow");
         else
         	hideElement("dimmedFullWindow");

      }

      function dimFullWindow(dimBool)
      {
         dimARControl(dimBool);

         if (dimBool)
         {
         	showElement("dimmedFullWindow");
         }
         else
         {
         	hideElement("dimmedFullWindow");
         }
      }



     // ------------------------------------------------- end of POPUP DIALOGS -----------------------------------------------------------------------


     // ------------------- texture switcher -----------------------------------

     function shrinkTextureSwitcher1()
     {
         //alert("uh");
         //document.getElementById('Switcher1_box').style.height = 20;
         dimElement('Switcher1_box');
     }

     function dimModelSelectBox()
     {
     	document.getElementById('ModelSelect_box').style.filter = "Alpha(opacity=70)";
         document.getElementById('iFrameModelBox').style.filter = "Alpha(opacity=25)";
     }

     function dimSamplePicsBox()
     {
     	document.getElementById('samplePics_box').style.filter = "Alpha(opacity=70)";
         document.getElementById('iFrameSamplePicsBox').style.filter = "Alpha(opacity=25)";
     }

     function hideInfoBox()
     {
        hideElement('ShoppingInfo_box');
        hideElement('iFrameInfoBox');
        hideElement('infoBoxTitle');
     }

     function showInfoBox()
     {
        showElement('ShoppingInfo_box');
        showElement('iFrameInfoBox');
        showElement('infoBoxTitle');
     }

     function undimModelSelectBox()
     {
     	document.getElementById('ModelSelect_box').style.filter = "Alpha(opacity=100)";
         document.getElementById('iFrameModelBox').style.filter = "Alpha(opacity=100)";
     }

     function undimSamplePicsBox()
     {
     	document.getElementById('samplePics_box').style.filter = "Alpha(opacity=100)";
         document.getElementById('iFrameSamplePicsBox').style.filter = "Alpha(opacity=100)";
     }

     function showModelSelectBox()
     {
         showElement("ModelSelect_box");
         showElement("iFrameModelBox");
	showElement("modelBoxTitle");
         showElement("modelBoxClose");
     }

     function showSamplePicsBox()
     {
         showElement("samplePics_box");
         showElement("iFrameSamplePicsBox");
	showElement("samplePicsTitle");
         showElement("samplePicsClose");
     }

     function showHelpBox()
     {
         showElement("helpBox_box");
         showElement("iFrameHelpBox");
	showElement("helpBoxTitle");
         showElement("helpBoxClose");
     }

     function hideHelpBox()
     {
         hideElement("helpBox_box");
         hideElement("iFrameHelpBox");
	hideElement("helpBoxTitle");
         hideElement("helpBoxClose");

         dimFullWindow(false);
     }

     function hideModelSelectBox()
     {
         hideElement("ModelSelect_box");
         hideElement("iFrameModelBox");
	hideElement("modelBoxTitle");
         hideElement("modelBoxClose");

         updateProductInfo(getModelIndex());

     }

     function hideSamplePicsBox()
     {
     	hideElement("samplePics_box");
         hideElement("iFrameSamplePicsBox");
	hideElement("samplePicsTitle");
         hideElement("samplePicsClose");
     }

     function updateProductInfo(i)
     {
         var index = i;

         if (!index)
          	index = 1;

          document.getElementById("InfoName").firstChild.nodeValue = ModelLabels[index];
          document.getElementById("ClassType").firstChild.nodeValue =  infoClass + ModelClasses[index];
          document.getElementById("InfoLoad").firstChild.nodeValue =  infoLoad + ModelLoads[index];
          document.getElementById("InfoWeight").firstChild.nodeValue = infoWeight + ModelWeights[index];
          document.getElementById("InfoReach").firstChild.nodeValue = infoReach + ModelReachs[index];
          document.getElementById("ShopThumbnailImage").src = PreviewPhotoPaths[index];

          m_infoBoxPreviewID = index;
     }

     function getModelIndex()
     {
         var selectedListIndex =  document.ModelListForm.ModelList.selectedIndex;
         //alert ("index: "+ selectedListIndex);

         if (selectedListIndex >= 0)
	         {

	         for (i = 1; i <= modelCount; ++i)
	         {
	                 var selectedListName = document.ModelListForm.ModelList.options[selectedListIndex].text;
	                 var arrayModelName = ModelLabels[i];
	                 //alert("i: "+i + "    selectedListName: " + selectedListName + "    arrayModelName: " +arrayModelName);
	                 if (selectedListName == arrayModelName)
	                  return i;
	         }
         }
         else
         {
         	return 1;
         }
     }

     function checkFullOpacity(elementID)
     {
     	var element = document.getElementById(elementID);

         //document.feld4.ausg4.value = "OC: " + element.style.filter;

         if (element.style.filter == "Alpha(opacity=100)")
         	return true;
         else
         	return false;


     }

     function checkFullTransparency(elementID)
     {
     	var element = document.getElementById(elementID);

         //document.feld4.ausg4.value = "OC: " + element.style.filter;

         if (element.style.filter == "Alpha(opacity=0)")
         	return true;
         else
         	return false;
     }

     function isElementVisible(elementID)
     {
     	if (document.getElementById(elementID))
         {
         	if (document.getElementById(elementID).style.visibility == "visible")
                 	return true;
	        else
         		return false;
         }
         else
         	return false;
     }

     var helpCounter = 1; var helpMincount = 1; var helpMaxcount = 6;

     function initHelp()
     {
         helpCounter = 1;
     }

	function previous()
         {
         	helpCounter -=1;
         	if (helpCounter < helpMincount)
                 	 helpCounter = helpMaxcount;
                 setNewImage(helpCounter);
         }

         function next()
         {
         	helpCounter +=1;
		if (helpCounter > helpMaxcount)
                 	 helpCounter = helpMincount;
		setNewImage(helpCounter);
         }

         function setNewImage(number)
         {
         	var newFilepath = 'images/help/help_'+number+'.jpg';
		var switchImage = document.getElementById('helpImage');
		switchImage.src = newFilepath;
                 setNewCount(number);
                 setNewInfo(number);
          }

          function setNewCount(count)
          {
           	document.all.helpCounter.innerText = count +' / '+ helpMaxcount;
          }

          function setNewInfo(count)
          {
            	document.all.helpInfo.innerHTML = HelpInfoList[count];
	 }


      function newScene()
      {
          m_currentID = 1;
          modelDeleteAll();
          firstModelLoaded = false;
          AS_AR_CONTROL.resetControl();
      }

      function openKukaWindow()
      {
      	window.open("http://www.kuka.com");
      }

      function openDetailedInfos()
      {
        	window.open(ModelLinks[m_infoBoxPreviewID]);
      }

//   ------------------- mouse ---------------------------

 var docEl = (
             typeof document.compatMode != "undefined" &&
             document.compatMode        != "BackCompat"
            )? "documentElement" : "body";

 function init_mousemove() {
 if(document.layers) document.captureEvents(Event.MOUSEMOVE);
    //document.onmousemove =	dpl_mouse_pos;
}


/*function dpl_mouse_pos(e) {

    // position where mousemove fired
    //
    var xPos    =  window.event.x;
    var yPos    =  window.event.y;


	// for ie add scroll position
	//
	if (document.all && !document.captureEvents) {
	    xPos    += document[docEl].scrollLeft;
	    yPos    += document[docEl].scrollTop;
    }

    // display position
    //
    document.feld0.ausg0.value    =  "Left = " + xPos + " : Top = " + yPos;

    // for the dino pass event
    //
    if (document.layers) routeEvent(e);
}    */



  //   ------------------- Rotation Control ---------------------------

     var jg = null;
     var drawRotationInterval = 0;

    function drawRotationControl()
    {
         var centerX = getElementWidth("RotationControl")/2;
         var centerY = getElementHeight("RotationControl")/2;

         var rotationDegrees = 0;

         // get mouse position relative to the center
         posX = currentPosX - centerX;
         posY = centerY - currentPosY;

         oldPosX = currentPosX;
         oldPosY = currentPosY;

         // calculate the angle
         if (posX == 0)
         {
           if (posY <= 0)
           {
              rotationDegrees = 180;
           }
           else
           {
              rotationDegrees = 0;
           }

         }
         else // if posX!=0
         {

	  var angleRad = Math.atan(posY/posX);

           rotationDegrees = Math.round( (angleRad*360) / (2*(Math.PI)) );

           if (posX > 0)
           {
           	rotationDegrees = 90 - rotationDegrees;
           }
           else
           {
                	rotationDegrees = 270 - rotationDegrees;
           }
         }


         document.getElementById("rotationControlImg").src = oafcROOT + "images/buttons_new/rotationControl/rotationControlBack.png";

         if ((currentPosX-posX >= 1)||(currentPosY-posY >= 1))
         {
                 var rotationValue = 360-(rotationDegrees*(Math.PI/180));
                 arRotateModel(rotationValue);
                 setRotationControl(rotationValue);
         }
    }

    function setRotationControl(rotationValue)
    {
         var centerX = (getElementWidth("RotationControl")/2);
         var centerY = (getElementHeight("RotationControl")/2);
         var radius = getElementHeight("RotationControl")/2 - 15;

         var lineStartX = centerX;
         var lineStartY = centerY;
         var lineEndX =  centerX;
         var lineEndY =  centerY;

         lineEndX = centerX + Math.cos(rotationValue) * radius;
         lineEndY = centerY - Math.sin(rotationValue) * radius;

         jg.clear();
         jg.paint();
         jg.setColor("gray");
	jg.setStroke(2);
         jg.drawLine(lineStartX, lineStartY, lineEndX, lineEndY);
	jg.paint();

         document.getElementById("rotationControlImg").src = oafcROOT + "images/buttons_new/rotationControl/rotationControlBack.png";
    }

    function trackMousePosition()
    {
        var offsetRotationControlTop = getElementPosY("AFC_GUI") + getElementPosY("FrameSmall_group") + getElementPosY("Rotation_group") + getElementPosY("RotationControl");
        var offsetRotationControlLeft = getElementPosX("AFC_GUI") + getElementPosX("FrameSmall_group")+ getElementPosX("Rotation_group") + getElementPosX("RotationControl");

        var mouseX = event.clientX;
        var mouseY = event.clientY;

        // make sure values are interpreted as doubles not strings
        currentPosX = mouseX - offsetRotationControlLeft;
        currentPosY = mouseY - offsetRotationControlTop;

        // = document.getElementById('ARControl').offsetTop + document.getElementById('AFC_GUI').offsetTop + 25;
    }

    function initDrawRotationControl()
    {
        	trackMousePosition();
         RotationControl.onmousemove = trackMousePosition;
         //alert("rotationInit");
    	// Use the "RotationControl" div for drawing

         textureMagnifier_img = document.getElementById("texture_magnifier1_img");

	if (!jg)
         	jg = new jsGraphics("RotationControl");
         jg.clear();

         drawRotationControl();
         clearInterval(drawRotationInterval);
         drawRotationInterval = setInterval( drawRotationControl, 25 );
    }

    function stopDrawRotationControl()
    {
    	RotationControl.onmousemove = "";
         clearInterval(drawRotationInterval);
    }


    function enableRotationControl()
    {
        enableElement("RotationControl");
        document.getElementById("rotationControlImg").src = oafcROOT + "images/buttons_new/rotationControl/rotationControlBack.png";
    }

    function disableRotationControl()
    {
        document.getElementById("rotationControlImg").src = oafcROOT + "images/buttons_new/rotationControl/rotationControlBack_disabled.png";
        if (!jg)
         	jg = new jsGraphics("RotationControl");
        jg.clear();
        disableElement("RotationControl");
    }

    // ------------------------------------------------- end of Rotation Control -----------------------------------------------------------------------



    //   ------------------- Helper Functions ---------------------------

    function getElementPosX(elementID)
    {
    	var posX = parseInt(document.getElementById(elementID).offsetLeft);
         return posX;
    }

    function getElementPosY(elementID)
    {
    	var posY = parseInt(document.getElementById(elementID).offsetTop);
    	return posY;
    }

    function getElementWidth(elementID)
    {
    	var width = parseInt(document.getElementById(elementID).offsetWidth);
    	return width;
    }

    function getElementHeight(elementID)
    {
    	var height = parseInt(document.getElementById(elementID).offsetHeight);
    	return height;
    }

    // ------------------------------------------------- end of Helper Functions -----------------------------------------------------------------------