Преобразование из jquery в прототип

Question

У меня есть следующий jquery, который я бы хотел преобразовать в прототип. У меня возникают некоторые проблемы с работой, потому что я не могу понять, как правильно ее инициализировать в приложении rails.

$(document).ready(function(){ 
    /*** Search label ***/ 
    htmlinput = $("input#panel-search").val() /* picks the inital value of the input (in the html) */ 
    $("input#panel-search").css('color','#aeaeae').css('font-style','italic').css('font-weight','bold'); 
    $("input#panel-search").focus(function(){ /* on focus.. */ 
     curinput = $(this).val() /* picks the -current- value */ 
     if(curinput == htmlinput){ /* if the current value corrispond to the initial value (htmlinput var) */ 
      $(this).val(''); /* empty the input */ 
      $(this).css('color','black').css('font-style', 'normal').css('font-weight','normal'); 
     } 
    }); 
    $("input#panel-search").blur(function(){ /* on blur */ 
     curinput = $(this).val(); 
     if(curinput == ''){ /* if the current value is null .. */ 
      $(this).css('color','#aeaeae').css('font-style','italic').css('font-weight','bold'); 
      $(this).val(htmlinput); /* sets the value with its inital value (htmlinput var) */ 
     } 
    })  

    /* Main Navigation hover effect */ 
    $("ul#navigation li:not('.current'), ul#navigation li:not('highlighted')").hover(
     function() { 
     $(this).addClass("hover"); 
     }, 
     function() { 
     $(this).removeClass("hover"); 
     } 
    ); 

    /* Right Menu hover effect */ 
    $("ul#fast-links li:not('.current')").hover(
     function() { 
     $(this).addClass("current"); 
     }, 
     function() { 
     $(this).removeClass("current"); 
     } 
    ); 
}); 

Любая помощь будет очень признательна.

Answer 1

Event.observe(document, 'ready', function() { 
    /* pick the inital value of the input (in the html) */ 
    var $htmlinput = $('input#panel-search'); 
    var originalValue = $htmlinput.getValue(); 
    /* Set styles */ 
    $htmlinput.setStyle({ 
     color: '#aeaeae', 
     'font-weight': 'bold', 
     'font-style': 'italic' 
    }); 
    /* on focus.. */ 
    $htmlinput.observe('focus', function() { 
     /* pick the -current- value */ 
     var $input = $(this); 
     /* Clear the input element if the value hasn't changed from 
      the original value */ 
     if($input.getValue() === originalValue) { 
      $input.clear(); 
      $input.setStyle({ 
       'color': 'black', 
       'font-style': 'normal', 
       'font-weight','normal' 
      }); 
     } 
    }); 
    $htmlinput.observe('blur', function() { 
     /* CHANGE THIS SIMILAR TO ABOVE */ 
     /* INSIDE IF-CASE */ 
     $(this).setValue(originalValue); 
    }); 
} 
/* Main Navigation hover effect */ 
/* Prototype doesn't have the fancy :not pseudo-selector, so iterate over 
* all li:s, and filter out the once that shouldn't be affected */ 
$('ul#navigation li').each(function (el) { 
    var isCurrent = el.hasClassName('current'), 
     isHighlighted = el.hasClassName('highlighted'); 
    if(isCurrent || isHighlighted) { 
     return; 
    } 
    el.observe('mouseenter', function() { 
     $(this).addClassName('hover'); 
    }); 
    el.observe('mouseleave', function() { 
     $(this).removeClassName('hover'); 
    }); 
}); 
/* TRANSLATE THE RIGHT NAVIGATION IN THE SAME WAY */