var GF_OQ_oDdl;      // The material drop down list control.
var GF_OQ_oImg;      // The material image control.
var GF_OQ_sImgPath;  // The material image path.
var GF_OQ_sImgBlank; // The initial blank image.

function GF_OQ_Init(sDdlId, sImgId, sImgPathRoot)
{   
   // Function called via ClientAPI.RegisterStartUpScript.

   GF_OQ_oDdl = dnn.dom.getById(sDdlId);
   GF_OQ_oImg = dnn.dom.getById(sImgId);
   if (GF_OQ_oImg) {
      GF_OQ_sImgBlank = GF_OQ_oImg.src;   
      GF_OQ_sImgPath = sImgPathRoot + 'images/100x/';
      
      // Attach event handlers for the dropdownlist.
      if (GF_OQ_oDdl) {
         dnn.dom.attachEvent(GF_OQ_oDdl, 'onchange', GF_OQ_Ddl_OnChange);
         dnn.dom.attachEvent(GF_OQ_oDdl, 'onkeypress', GF_OQ_Ddl_OnChange);
         
         // Sync initial image to initial selected item.
         GF_OQ_Ddl_OnChange();
      }
   }
            
   // Initialise body scolling so it is initialised even if no scrolling occurs.   
   var oF = document.forms[0];	
   if (__dnn_ClientAPIEnabled()) {
      oF.ScrollTop.value = document.documentElement.scrollTop ? document.documentElement.scrollTop : dnn.dom.getByTagName("body")[0].scrollTop;
   }
      
   return true;
}

function GF_OQ_Ddl_OnChange()
{  
   var sMaterialCode = GF_OQ_oDdl.options[GF_OQ_oDdl.selectedIndex].value;   
   var sImageSrc;
   if (sMaterialCode == '-1') { 
      sImageSrc = GF_OQ_sImgBlank;
   }
   else {
      sImageSrc = GF_OQ_sImgPath + sMaterialCode + '.jpg';
   }
   if (GF_OQ_oImg.src != sImageSrc)
   {
      GF_OQ_oImg.src = sImageSrc;
   }
   
   return true;
}