<% 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 in editor
new Effect.BlindDown('photo_tag_editor', {duration: 1.5});
}
else
{
// toggle buttons
$('show_photo_tag_editor').show();
$('hide_photo_tag_editor').hide();
block_box = true;
// transition out editable blocks
new Effect.BlindUp('photo_tag_editor', {duration: 1.5});
// update tags to read only
new Ajax.Updater(
'photo_tags',
'/photo_tags/<%= @photo.id -%>',
{
method: 'get',
onSuccess: function() {
photo_tag_effect();
}
}
);
}
}
<% end -%>
<% if @photo.exist? -%>
<%= partial 'photo_tags/photo_tags' %>
<% end -%>
<% throw_content :for_sidebar do -%>
Back to <%= @photo.album.name -%>
<% if allowed_to?(:edit_photo, @photo) and @photo.exist? -%>
Edit photo
<% end %>
<% if allowed_to?(:delete_photo, @photo) -%>
Destroy photo
<% end -%>
<% if @photo.exist? -%>
Download original
<% end -%>
<% if allowed_to?(:upload_images) -%>
Upload Image
<% end %>
<% if allowed_to?(:tag_photo) and @photo.exist? -%>
Tag Image Done Tagging
<% end %>
<% end -%>