rendered html/javascript from a form partial

render_item_form_partial.html

<h2>New Image</h2>

<form action="/en/site/images/create" enctype="multipart/form-data" method="post"><div style="margin:0;padding:0;display:inline"><input name="authenticity_token" type="hidden" value="uxGAMVOxtD8+B+cP+HFk7iB/7N0dnauybaHYI8dWCv4=" /></div>
  <fieldset>

    
    <p class="required"><em>* denotes a required field</em></p>

      
                                
          <input id="relate_to_item" name="relate_to_item" type="hidden" value="" />      <input id="relate_to_type" name="relate_to_type" type="hidden" value="" />              <input id="related_item_private" name="related_item_private" type="hidden" value="" />          
    
          <input id="still_image_basket_id" name="still_image[basket_id]" type="hidden" value="1" />    
    
    <p class='help'>Note: Embedded metadata will be harvested from the item's binary file to fill out any fields that match the site's settings. If you fill out fields here as well, the embedded metadata will be added to it at the end.</p>

        
      <input id="still_image_private" name="still_image[private]" type="hidden" />    

    
    <div class="form-element">
<label class="required " for="still_image_title">Title <em>*</em></label>
<input id="still_image_title" name="still_image[title]" size="30" tabindex="1" type="text" />
</div>

    
    <div class="form-element">
<label class="cleared-right" for="still_image_description">Description</label>
<textarea class="mceEditor" cols="120" id="still_image_description" name="still_image[description]" rows="20" tabindex="1"></textarea>
<div class="form-example">Note: new forms and javascript are not allowed for security reasons , unless you check the box below.</div></div>

          <div class="form-element">
<label class="" for="still_image_do_not_sanitize">Allow new forms and other possible insecure elements and attributes in the HTML?</label>
<input name="still_image[do_not_sanitize]" type="hidden" value="0" /><input id="still_image_do_not_sanitize" name="still_image[do_not_sanitize]" tabindex="1" type="checkbox" value="1" />
</div>
    
                        <input id="still_image_file_private" name="still_image[file_private]" type="hidden" />                  <script type="text/javascript">
//<![CDATA[

        if ($('still_image_private_true') && $('still_image_private_false')) {
          $('still_image_private_true').observe('click', function(){ $('still_image_file_private_true').checked = true; });
          $('still_image_private_false').observe('click', function(){ $('still_image_file_private_false').checked = true; });
        }
      
//]]>
</script>    
    

    
    <div class="form-element">
      <label for="still_image_tag_list">Tags (separated by commas)</label>
      <style type="text/css">        div.auto_complete {
          width: 350px;
          background: #fff;
          z-index: 1;
        }
        div.auto_complete ul {
          border:1px solid #888;
          margin:0;
          padding:0;
          width:100%;
          list-style-type:none;
        }
        div.auto_complete ul li {
          margin:0;
          padding:3px;
          color:#000;
        }
        div.auto_complete ul li.selected {
          background-color: #ffb;
        }
        div.auto_complete ul strong.highlight {
          color: #800; 
          margin:0;
          padding:0;
        }
</style><input id="still_image_tag_list" name="still_image[tag_list]" size="30" tabindex="1" type="text" /><div class="auto_complete" id="still_image_tag_list_auto_complete"></div><script type="text/javascript">
//<![CDATA[
var still_image_tag_list_auto_completer = new Ajax.Autocompleter('still_image_tag_list', 'still_image_tag_list_auto_complete', '/en/site/baskets/auto_complete_for_still_image_tag_list', {indicator:'data_spinner_tags', parameters:'authenticity_token=' + encodeURIComponent('uxGAMVOxtD8+B+cP+HFk7iB/7N0dnauybaHYI8dWCv4='), tokens:','})
//]]>
</script>      <img src='/images/indicator.gif' width='16' height='16' alt='Getting tags. ' id='data_spinner_tags' style='display:none;' />
    </div>

                      <div class="form-element">
          <label for="image_file_uploaded_data" class="required">Upload image <em>*</em></label>
          <input id="image_file_uploaded_data" name="image_file[uploaded_data]" tabindex="1" type="file" />        </div>
          
    
                        



<div class="form-element">
  <label for="still_image_extended_content_values_location">Location</label>

  <div style="float: left">
  

    
    <div id="still_image_extended_content_values_location_map_div_fields"><label class="inline" for="still_image_extended_content_values_location_map_coords_value">Latitude and Longitude coordinates:</label><input id="still_image_extended_content_values_location_map_coords_value" name="still_image[extended_content_values][location][coords]" type="text" value="" /><br /><label class="inline" for="still_image_extended_content_values_location_map_zoom_value">Zoom level for map:</label><input id="still_image_extended_content_values_location_map_zoom_value" name="still_image[extended_content_values][location][zoom_lvl]" size="2" type="text" value="" /></div><div id="still_image_extended_content_values_location_map_div_warning">This feature requires exact data to function properly.</div><label class="inline" for="still_image_extended_content_values_location_map_div_search_label">To set Location, click on map, drag pin, or</label><input id="still_image_extended_content_values_location_map_div_search" name="To set Location, click on map, drag pin, or" placeholder="search for Location" size="57" style="padding: 0; margin: 0;" type="text" value="" />
\t



<script type="text/javascript" charset="utf-8">
  Gmaps.still_image_extended_content_values_location_map_div = new Gmaps4RailsGoogle();
function load_still_image_extended_content_values_location_map_div() {
Gmaps.still_image_extended_content_values_location_map_div.map_options.center_latitude = -41.336899;
Gmaps.still_image_extended_content_values_location_map_div.map_options.center_on_user = true;
Gmaps.still_image_extended_content_values_location_map_div.map_options.disableDoubleClickZoom = true;
Gmaps.still_image_extended_content_values_location_map_div.map_options.draggable = true;
Gmaps.still_image_extended_content_values_location_map_div.map_options.center_longitude = 174.772512;
Gmaps.still_image_extended_content_values_location_map_div.map_options.container_id = 'map_container_still_image_extended_content_values_location_map_div';
Gmaps.still_image_extended_content_values_location_map_div.map_options.id = 'still_image_extended_content_values_location_map_div';
Gmaps.still_image_extended_content_values_location_map_div.map_options.libraries = 'places';
Gmaps.still_image_extended_content_values_location_map_div.map_options.detect_location = true;
Gmaps.still_image_extended_content_values_location_map_div.map_options.auto_adjust = false;
Gmaps.still_image_extended_content_values_location_map_div.map_options.zoom = 5;
console.log('made it to before initialize');
Gmaps.still_image_extended_content_values_location_map_div.initialize();
console.log('made it after initialize');
Gmaps.still_image_extended_content_values_location_map_div.markers = [];
Gmaps.still_image_extended_content_values_location_map_div.markers_conf.draggable = true;
Gmaps.still_image_extended_content_values_location_map_div.create_markers();
Gmaps.still_image_extended_content_values_location_map_div.adjustMapToBounds();
Gmaps.still_image_extended_content_values_location_map_div.callback();
};
</script>

  

<div class="extended_field_form_map" id="map_container_still_image_extended_content_values_location_map_div">
  <div id="still_image_extended_content_values_location_map_div" class="extended_field_form_map"><small>javascript needs to be on to use Google Maps</small></div>
</div>


<input id="still_image_extended_content_values_location_no_map" name="still_image[extended_content_values][location][no_map]" type="hidden" value="0" />OR <input id="still_image_extended_content_values_location_no_map" name="still_image[extended_content_values][location][no_map]" type="checkbox" value="1" /> <strong>don't record a location</strong><script type="text/javascript">
//<![CDATA[
function addDragendListenerForMarkersOf(gmaps4RailsMap) {
         var markers_to_monitor = gmaps4RailsMap.markers;

         for (var i = 0; i <  markers_to_monitor.length; ++i) {
           google.maps.event.addListener(markers_to_monitor[i].serviceObject, 'dragend', ( function(map) {
              return function(event) { updateMapData(map, event.latLng); }
          } )(gmaps4RailsMap)
          );
         }
       }

       function updatePlaceFieldsFor(gmaps4RailsMap, place) {
         $(gmaps4RailsMap.latlng_text_field).value = place.geometry.location.lat() + ',' + place.geometry.location.lng();

         if (gmaps4RailsMap.map_fields_type == 'map_address') {
           $(gmaps4RailsMap.address_text_field).value = place.formatted_address;
         }
       }
       
       function updateMarkersForWith(gmaps4RailsMap, markerData) {
            var newMarkers = [markerData];

            gmaps4RailsMap.replaceMarkers(newMarkers);
            
            if (markerData.description !== '' && typeof markerData.description !== 'undefined') {
              var infoWindow = new google.maps.InfoWindow({
               content: markerData.description
              });

              infoWindow.open(gmaps4RailsMap.map, gmaps4RailsMap.markers[0].serviceObject);
              gmaps4RailsMap.visibleInfoWindow = infoWindow;
            }

            // Add dragend listener on marker by refreshing maps listeners on its markers
            addDragendListenerForMarkersOf(gmaps4RailsMap);
       }

       function updateMapData(gmaps4RailsMap, latlng_obj, place) {
            var latValue = latlng_obj.lat(),
              lngValue = latlng_obj.lng(),
              infoWindowText = '';
            
            var markerData = { 
              lat: latValue,
              lng: lngValue,
              description: null,
              draggable: true };

            if (place !== '' && typeof place !== 'undefined') {
              markerData.description = '<b>Address:</b>' + place.formatted_address;
              updatePlaceFieldsFor(gmaps4RailsMap, place);
              updateMarkersForWith(gmaps4RailsMap, markerData);
            } else {
              // Attempt to get the address. When it succeeds, it'll reposition the marker to the location
              // the address corresponds to, and update the text/fields as well (to keep data current)
              var geocoder = new google.maps.Geocoder();

              geocoder.geocode({ latLng: latlng_obj }, function(results, status) {
                if (status !== google.maps.GeocoderStatus.OK) {
                  // if something went wrong, give the status code. This should rarely happen.
                  if (status === google.maps.GeocoderStatus.ZERO_RESULTS) {
                    infoWindowText = 'Error: Something has happened.<br />Google Maps cannot determine the location where you placed the marker.<br />Try repositioning it nearer to a road.';
                  } else {
                    infoWindowText = 'Error: Something has happened. Please try again.';
                  }
                  markerData.description = infoWindowText + ' (' + status + ')';
                } else {
                  // get the place
                  var place = results[0];

                  markerData.description = '<b>Address:</b>' + place.formatted_address;
                  updatePlaceFieldsFor(gmaps4RailsMap, place);
                }
                updateMarkersForWith(gmaps4RailsMap, markerData);
              });
            }
          } $('still_image_extended_content_values_location_map_div_warning').hide();
       $('still_image_extended_content_values_location_map_div_fields').hide(); 
//]]>
</script>
    <div class="form-example"></div>
  
  </div>
</div>


      
    
          <script type="text/javascript">
//<![CDATA[
Gmaps.loadMaps();
//]]>
</script>
                <script type="text/javascript">
//<![CDATA[
Gmaps.still_image_extended_content_values_location_map_div.callback = function() { $('still_image_extended_content_values_location_map_div').setStyle({height: '380px'}); Gmaps.still_image_extended_content_values_location_map_div.latlng_text_field = 'still_image_extended_content_values_location_map_coords_value';
       Gmaps.still_image_extended_content_values_location_map_div.zoom_text_field = 'still_image_extended_content_values_location_map_zoom_value';
       Gmaps.still_image_extended_content_values_location_map_div.address_text_field = 'still_image_extended_content_values_location_map_address';
       Gmaps.still_image_extended_content_values_location_map_div.map_fields_type = 'map';
        $('still_image_extended_content_values_location_map_coords_value').readonly = true;$('still_image_extended_content_values_location_map_zoom_value').readonly = true; // when a user clicks the map, add a marker and update the coords and zoom level
       google.maps.event.addListener(Gmaps.still_image_extended_content_values_location_map_div.map, 'click', function(event) {
           updateMapData(Gmaps.still_image_extended_content_values_location_map_div, event.latLng);
        }); // when a user drags a marker on the map, clear other markers, and update based on this one
       addDragendListenerForMarkersOf(Gmaps.still_image_extended_content_values_location_map_div);
        // when a user stops dragging/zooming, update the zoom level (not the coords, thats what the pinpoint is for)
       google.maps.event.addListener(Gmaps.still_image_extended_content_values_location_map_div.map, 'zoom_changed', function() {
         $('still_image_extended_content_values_location_map_zoom_value').value = Gmaps.still_image_extended_content_values_location_map_div.map.getZoom();
       }); autocomplete = new google.maps.places.Autocomplete($('still_image_extended_content_values_location_map_div_search'));
       autocomplete.bindTo('bounds', Gmaps.still_image_extended_content_values_location_map_div.map);

       google.maps.event.addListener(autocomplete, 'place_changed', function() {
         var newPlace = autocomplete.getPlace();

         var newLatValue = newPlace.geometry.location.lat();
         var newLngValue = newPlace.geometry.location.lng();

         newLatLng = new google.maps.LatLng(newLatValue, newLngValue);

         // TODO: update map bounds/centering to fit newLatLng

         updateMapData(Gmaps.still_image_extended_content_values_location_map_div, newLatLng, newPlace);
       });
       }
//]]>
</script>          
    <script type="text/javascript">
//<![CDATA[

      $('still_image_private_true').observe('change', function(event) {
        $$('.private_only').each(function(field) { field.show(); });
      });
      $('still_image_private_false').observe('change', function(event) {
        $$('.private_only').each(function(field) { field.hide(); });
      });
    
//]]>
</script>

    
    <div class="form-element">
   <label>License</label>



<p>Please see the <a href="/en/about/topics/show/4" tabindex="1">site terms and conditions</a> for information on how contributions are licensed.</p>



</div>

    
      <input id="still_image_related_items_position" name="still_image[related_items_position]" type="hidden" value="inset" />    

    
  </fieldset>

  <div class="wrap">
    <input class="save-button" id="still_image_submit" name="commit" tabindex="1" type="submit" value="Create" />  </div>

</form>
<div id="cancel" style="display:inline"><a href="/en/site/images/edit/31-taita-in-snow-2" tabindex="1">cancel</a></div> |
<a href="/en/site/index_page/help_file" onclick="window.open(this.href,'help','height=500,width=780,scrollbars=yes,top=100,left=100');return false;" tabindex="1">help</a>