tuxbliki/app/views/photos/show.html.erb

<% throw_content :for_stylesheet do -%>
#photo_block {
  z-index: 0;
  border: 1px solid black;
  padding: 0px;
  width: <%= @width -%>px;
  height: <%= @height -%>px;
<% if @photo.exist? -%>
  background-image: url('/photos/screen/<%= @photo.id -%>');
<% else -%>
  background-image: url('/images/image-missing.png');
<% end -%>
  background-repeat: no-repeat;
}
#photo_block_container {
  margin: 10px <%= (600 - @width) / 2 -%>px 20px <%= (600 - @width) / 2 -%>px;
}
#photo_tag_box {
  position: relative;
  z-index: 2;
  width: 100px;
  height: 100px;
  border: 7px solid #6f9bdc;
  left: 0;
  top: 0;
  display: none;
}
#inner_photo_tag_box {
  border: 2px solid black;
  width: 96px;
  height: 96px;
}
#photo_tag_editor {
  margin-bottom: 10px;
}
<% end -%>

<% throw_content :for_javascript do -%>

function show_tag_at(x, y)
{
  $('photo_tag_box').style.top = (y - 50) + 'px';
  $('photo_tag_box').style.left = (x - 50) + 'px';
  $('photo_tag_box').style.display = 'block';
}

function hide_tag_box()
{
  $('photo_tag_box').style.display = 'none';
}

function set_coordinates(x, y)
{
  $('cartesian_x').innerHTML = x;
  $('cartesian_y').innerHTML = y;
  $('photo_tag[x]').value = x;
  $('photo_tag[y]').value = y;
  show_tag_at(x, y);
}

var block_box = true;
function set_coordinates_from_event(event)
{
  if(block_box)
    return;
  var xcoord = (event.offsetX ? event.offsetX : (event.pageX - $('photo_block').offsetLeft));
  var ycoord = (event.offsetY ? event.offsetY : (event.pageY - $('photo_block').offsetTop));
  if(xcoord < 0)
    xcoord = 0;
  if(xcoord > <%= @width -%>)
    xcoord = <%= @width -%>;
  if(ycoord < 0)
    ycoord = 0;
  if(ycoord > <%= @height -%>)
    ycoord = <%= @height -%>;
  set_coordinates(xcoord, ycoord);
}

function update_tag_selection(tag_name)
{
  var new_tag = tag_name.innerHTML.gsub(/\<[^>]+\>/, '');
  var existing_tags = $('tags').value.gsub(/( |^)[^ ]+$/, '');
  var plus_space = (existing_tags.length == 0 ? '' : ' ');
  $('tags').value = existing_tags + plus_space + new_tag;
  $('tags').focus();
}

function photo_tag_effect()
{
  new Effect.Highlight('photo_tags', {duration: 2.0});
}

function save_new_tags()
{
  $('save').disabled = true;
  $('indicator').show();
  
  new Ajax.Updater(
    { success: 'photo_tags', failure: 'photo_tag_errors' },
    '<%= url(:photo_tag) -%>',
    {
      parameters: Form.serialize($('photo_tag_fields')),
      asynchronous: false,
      onSuccess: function() {
        set_coordinates(0, 0);
        hide_tag_box();
        $('tags').value = '';
        photo_tag_effect();
      }
    }
  );
  
  $('indicator').hide();
  $('save').disabled = false;
}

function destroy_photo_tag(tag_id)
{
  $('indicator').show();
  new Ajax.Updater(
    { success: 'photo_tags', failure: 'photo_tag_errors' },
    '/photo_tags/' + tag_id,
    {
      method: 'delete',
      onSuccess: function() {
        photo_tag_effect();
      },
      onComplete: function() {
        $('indicator').hide();
      }
    }
  );
}

function toggle_photo_tag_editor(direction)
{
  if(direction)
  {
    // swap buttons
    $('hide_photo_tag_editor').show();
    $('show_photo_tag_editor').hide();
    block_box = false;
    
    // update tags to editable mode
    new Ajax.Updater(
      'photo_tags',
      '/photo_tags/<%= @photo.id -%>?editable=true',
      {
        method: 'get',
        onSuccess: function() {
          photo_tag_effect();
        }
      }
    );
    
    // transition editor and navigation
    new Effect.Fade('pagination_links');
    new Effect.Appear('photo_tag_editor');
  }
  else
  {
    // remove box if shown
    hide_tag_box();
    
    // toggle buttons
    $('show_photo_tag_editor').show();
    $('hide_photo_tag_editor').hide();
    block_box = true;
    
    // transition out editable blocks and navigation
    new Effect.Fade('photo_tag_editor');
    new Effect.Appear('pagination_links');
    
    // update tags to read only
    new Ajax.Updater(
      'photo_tags',
      '/photo_tags/<%= @photo.id -%>',
      {
        method: 'get',
        onSuccess: function() {
          photo_tag_effect();
        }
      }
    );
  }
}

function highlight_tag(tag_id)
{
  
}

var last_x = 0;
var last_y = 0;
function check_for_tag_mouseovers(event)
{
  // skip this if you are editing
  if(!block_box)
    return;
  
  // figure out the real coordinates
  var xcoord = (event.offsetX ? event.offsetX : (event.pageX - $('photo_block').offsetLeft));
  var ycoord = (event.offsetY ? event.offsetY : (event.pageY - $('photo_block').offsetTop));
  
  // save coordinates for cop-out later
  if(xcoord == last_x && ycoord == last_y)
    return;
  last_x = xcoord;
  last_y = ycoord;
  
  // figure out the box area here
  var min_x = xcoord - 50;
  if(min_x < 0)
    min_x = 0
  var max_x = xcoord + 50;
  if(max_x > <%= @width -%>)
    max_x = <%= @width -%>;
  var min_y = ycoord - 50;
  if(min_y < 0)
    min_y = 0;
  var max_y = ycoord + 50;
  if(max_y > <%= @height -%>)
    max_y = <%= @height -%>;
  
  // remove the box, in case there is no match...
  hide_tag_box();
  
  // remove tag highlighting
  unhighlight_tags();
  
  // find all in the area, show the box then highlight the tags
  tag_array.select(function(entry){
    return entry[0] >= min_x && entry[0] <= max_x && entry[1] >= min_y && entry[1] <= max_y;
  }).each(function(entry){
    show_tag_at(entry[0], entry[1]);
    // show which tag, too
    highlight_tag(entry[2]);
  });
}

function unhighlight_tags()
{
  $$('.photo_tags_for_mouseover').each(function(entry){
    entry.style.fontWeight = 'normal';
  });
}

function unhighlight_tag(tag_id)
{
  $('photo_tag_' + tag_id).style.fontWeight = 'normal';
}

function highlight_tag(tag_id)
{
  $('photo_tag_' + tag_id).style.fontWeight = 'bold';
}

<% end -%>

<div id="photo_tag_editor" style="display: none;">
  <div id="photo_tag_errors" class="errorExplanation"></div>
  
  <form id="photo_tag_fields" onsubmit="save_new_tags(); return false;">
  <fieldset>
    <legend>Tag a photo...</legend>
    
    <%= hidden_field :name => 'photo_tag[x]', :id => 'photo_tag[x]' %>
    <%= hidden_field :name => 'photo_tag[y]', :id => 'photo_tag[y]' %>
    <%= hidden_field :name => 'photo_tag[photo_id]', :value => @photo.id %>
    
    <h3 style="margin-top: 5px;">Select Tags (<span id="cartesian_x">0</span>, <span id="cartesian_y">0</span>)</h3>
    
    <p><a href="#" onclick="$('tags').value = ''; return false;"><img src="/images/edit-clear.png" style="vertical-align: top;" /></a> <%= text_field :name => 'tags', :size => 30, :id => 'tags' -%> <input type="submit" value="Save" id="save" /> <img src="/images/ajax-loader.gif" style="display: none; margin-right: 5px;" id="indicator" /></p>
    <div id="photo_tag_auto_complete" class="auto_complete"></div>
  </fieldset>
  </form>
</div>

<% if @current_index and @max_index and @photo.album -%>
<div id="pagination_links">
  <% if @current_index > 0 -%><a href="<%= url(:photo, @album_photos[0]) -%>"><img src="/images/go-first.png" /></a> <% end -%><% if @current_index > 1 -%><a href="<%= url(:photo, @album_photos[@current_index - 1]) -%>"><img src="/images/go-previous.png" /></a> <% end -%><%= @current_index + 1 -%> of <%= @max_index + 1 -%> <% if @current_index < @max_index - 1 -%><a href="<%= url(:photo, @album_photos[@current_index + 1]) -%>"><img src="/images/go-next.png" /></a> <% end -%><% if @current_index < @max_index -%><a href="<%= url(:photo, @album_photos[@max_index]) -%>"><img src="/images/go-last.png" /></a><% end -%>
</div>
<% end -%>

<div id="photo_block_container">
  <div id="photo_block" onclick='set_coordinates_from_event(event);' onmousemove='check_for_tag_mouseovers(event)'>
    <div id="photo_tag_box" style="display: none;"><div id="inner_photo_tag_box"></div></div>
  </div>
</div>

<% if @photo.exist? -%>
<div id="photo_tags">
  <%= partial 'photo_tags/photo_tags' %>
</div>
<% end -%>

<script type="text/javascript">
  //<![CDATA[
  new Ajax.Autocompleter(
    'tags',
    'photo_tag_auto_complete',
    '/tags/auto_complete',
    {
      paramName: 'id',
      updateElement: update_tag_selection
    }
  );
  //]]>
</script>

<% throw_content :for_sidebar do -%>
  <a href="<%= url(:album, :id => @photo.album.name.gsub(/ /, '_')) -%>"><img src="/images/camera-photo.png" /> Back to <%= @photo.album.name -%></a><br />
  <% if allowed_to?(:edit_album, @photo.album) and @photo.album.album_thumbnail_id != @photo.id -%><a href="<%= url(:action => :set_album_thumbnail, :id => @photo.id) -%>" rel="nofollow"><img src="/images/emblem-photos.png" /> Make album thumbnail</a><br /><% end -%>
  <% if allowed_to?(:edit_photo, @photo) and @photo.exist? -%><a href="<%= url(:edit_photo, :id => @photo.id) -%>" rel="nofollow"><img src="/images/document-save.png" /> Edit photo</a><br /><% end %>
  <% if allowed_to?(:delete_photo, @photo) -%><a href="<%= url(:delete_photo, :id => @photo.id) -%>" onclick="if(!confirm('Are you sure you want to delete this photo?')){return false;}" rel="nofollow"><img src="/images/edit-delete.png" /> Destroy photo</a><br /><% end -%>
  <% if @photo.exist? -%><a href="<%= photo_url(@photo) -%>"><img src="/images/view-fullscreen.png" /> Download original</a><br /><% end -%>
  <% if allowed_to?(:upload_images) -%><a href="<%= url(:new_photo, :photo => { :album_id => @photo.album_id }) -%>"><img src="/images/emblem-photos.png" /> Upload Image</a><br /><% end %>
  <% if allowed_to?(:tag_photo) and @photo.exist? -%><span id="show_photo_tag_editor"><a href="#" onclick="toggle_photo_tag_editor(true)"><img src="/images/face-monkey.png" /> Tag Image</a></span><span id="hide_photo_tag_editor" style="display: none;"><a href="#" onclick="toggle_photo_tag_editor(false); return false;"><img src="/images/face-monkey.png" /> Done Tagging</a></span><br /><% end %>
<% end -%>