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 updatePadColorFlexible(pad_id, controller_url, loadImage) {
    if($('creator_rendering_image')){
		source=$('creator_rendering_image').src;
		$('creator_rendering_image').src=loadImage;
    }
    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);}
    });
    if($('creator_rendering_image')){
        setTimeout(function(){ $('creator_rendering_image').src=source+"&"+ (new Date()).getTime();}, 3000)
    }
}


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 updateSuperOption(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);}
    });

} 


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

}


function savePersonalTemplate(selected_user_id, selected_template_name, selected_template_id, controller_url, selected_product_id, div_id) {
   
    new Ajax.Request(controller_url,{
        method: 'get',
        parameters: {product_id: selected_product_id, template_id: selected_template_id, user_id: selected_user_id, template_name: selected_template_name, divtochange: div_id},
        onSuccess: function(response){ eval(response.responseText);}  
		
    });

}


//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.
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;
               //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()
        {
          if (this.handle_color_input.value != "")
          {
            for (var i = 0; i < this.handle_color_select.options.length; 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");
});