function loadImageByHandleColor(handle_id,image_id,prefix,default_color)
 {
     link = prefix.toString();
     default_color = default_color.toString()+".jpg";
     
     //alert(default_color + " " + default_color.length);

     if( link.substring(link.length-default_color.length) == default_color ) {
        src=link.substring(0,link.length-default_color.length)+$(handle_id).value+".jpg";
        $(image_id).src=src;
     } else {
        $(image_id).src=link;
     }
}

function updatePadColor(pad_id, controller_url) {
    selected_pad_color = $(pad_id).value;
    new Ajax.Request(controller_url,{
        method: 'get',
        parameters: {pad_color: selected_pad_color},
        onSuccess: function(response){ eval(response.responseText);}
    });
}

function updateCustomOption(element_id, selected_option_id, controller_url, selected_product_id) {
    selected_option = $(element_id).value;
    new Ajax.Request(controller_url,{
        method: 'get',
        parameters: {product_id: selected_product_id,option_id: selected_option_id, option_value: selected_option},
        onSuccess: function(response){ eval(response.responseText);}
    });
}

function updateHandleColor(handle_id, selected_image_id, controller_url, selected_product_id) {
   selected_handle_color = $(handle_id).value;
    new Ajax.Request(controller_url,{
        method: 'get',
        parameters: {product_id: selected_product_id, image_id: selected_image_id, handle_color: selected_handle_color},
        onSuccess: function(response){ eval(response.responseText);}
    });
  
}

//Author Hartwig
//A Simple Class that changes the input of an Inputfield to the value of an selected value from a Select Box
//NOTE if the HTML Structure changes, this will not work anymore.
//TODO Check if the value in the input box exists in the select options if so, then select it
var HandleColorImageNameUpdater = Class.create({
	initialize:function(handle_color_select){
            this.handle_color_select=$(handle_color_select)

            //This will change if the HTML Source changes
            this.handle_color_input=$(handle_color_select).up().previous().down();
            this._selectHandleColorIfExists();
            this._updateHandleColorImageName();
            this._attachChangeHandler();
        },
        _updateHandleColorImageName: function(){
            
           if (this.handle_color_select.value != ""){
              this.handle_color_input.value=this.handle_color_select.value;
              this.handle_color_input.readOnly=true;
                //hack
               //NOTE This will call the Javascript which is on the onchange attribute
                try
                {
                  update_function=this.handle_color_input.onchange.toString().substring(17,this.handle_color_input.onchange.toString().length-1);
                  eval(update_function);
                }
                catch(e){}
            }
            else{
              this.handle_color_input.value="";
              this.handle_color_input.readOnly=false;
            }
        },
        _selectHandleColorIfExists: function()
        {
          //alert("Have I a Vaule: "+this.handle_color_input.value.inspect());
          if (this.handle_color_input.value != "")
          {
            //alert("I have Value");
            for (var i = 0; i < this.handle_color_select.options.length; i++)
            {
             // alert("Found: "+this.handle_color_input.value+ " at "+i);
              if (this.handle_color_select.options[i].value==this.handle_color_input.value)
              {
                this.handle_color_select.options[i].selected=true;
              }
            }
          }
        },
        _attachChangeHandler: function(){
            this.handle_color_select.observe('change', this._updateHandleColorImageName.bindAsEventListener(this));
        }
    });
HandleColorImageNameUpdater.allOnPage=function(class_name){
  var items=[];
  $$(class_name).each(function (element) {
   	var item=new HandleColorImageNameUpdater(element.identify());
    items[element.identify()]=item;
  });
  return items;
}

document.observe('dom:loaded', function() {
	var items=HandleColorImageNameUpdater.allOnPage(".handleColorSelect");
});