$(document).ready(function()
{
  /* Allow photos to be dropped into container */
  $('.photo-container').droppable(
  {
    accept: '.tomatobox',
    drop: function(ev, ui)
    {
      /* When a tomato is dropped in the box, save the coordinates */
      boxCoords = $(".photo-container").offset();
      tomatoID = ui.draggable.attr('id').substring(9, 10);
      $('#top'  + tomatoID).val(ui.draggable.offset().top  - boxCoords.top);
      $('#left' + tomatoID).val(ui.draggable.offset().left - boxCoords.left);
    }
  });

  $('.trigger').draggable();

  $('#photo-drop').droppable(
  {
    accept: '.trigger',
    drop: function(ev, ui)
    {
    }
  });

  /* When a tomato trigger is clicked, splat it on the photo */
  $(".trigger").click(function()
  {
    boxCoords  = $('.photo-container').offset();
    tomatoTop  = $(this).offset().top  - boxCoords.top;
    tomatoLeft = $(this).offset().left - ($(this).offset().left - boxCoords.left <= 0 ? boxCoords.left - 160 : boxCoords.left);

    $(this).css('left', '0px');
    $(this).css('top',  '0px');
   
    /* Play the splat sound */
    $('#player_div').empty();
    $('#player_div').prepend(insertPlayer());
    
    /* Add a photobox */
    count = $('#count').val();
    $('#count').val(parseFloat(count) + parseFloat(1));
    $('.photo-container').append('<div id="tomatobox' + count + '" class="tomatobox"><img src="/images/frontend/splat/' + $(this).attr('id') + '.png" class="tomato"></div>');
    
    if (tomatoTop > 345)
    {
      tomatoTop  = Math.floor(Math.random() * 300) + 50;
      tomatoLeft = Math.floor(Math.random() * 400) - 50;
    }

    $('#tomatobox' + count).css('top',  tomatoTop  - 102.5);
    $('#tomatobox' + count).css('left', tomatoLeft - 62.5);

    $('#inputs').append('<input name="type[' + count + ']" type="hidden" value="' + $(this).attr('id') + '"  id="type' + count + '" />');
    $('#inputs').append('<input name="top['  + count + ']" type="hidden" value="' + (tomatoTop - 102.5) + '" id="top'  + count + '" />');
    $('#inputs').append('<input name="left[' + count + ']" type="hidden" value="' + (tomatoLeft - 62.5) + '" id="left' + count + '" />');
    $('#inputs').append('<input name="size[' + count + ']" type="hidden" value="200" id="size' + count + '" /><br />');

    $('#tomatobox' + count).css('display', 'block');
    $('#tomatobox' + count).css('z-index', count);

    /* Allow the tomato to be draggable */
    $('#tomatobox' + count).draggable();

    /* Allow the tomato to be resizable */
    $('#tomatobox' + count).resizable(
    { 
      handles: "all",
      minWidth: 70,
      minHeight: 70, 
      maxWidth: 250, 
      maxHeight: 250,
      aspectRatio: true,
      autoHide: true,
      stop: function(e, ui)
      {
        tomatoID = $(this).attr('id').substring(9, 10);
        $('#size' + tomatoID).val($(this).width());
      }
    });
  });
});

/* Flash player for the sound */
function insertPlayer()
{
  var playerpath = '/flash/singlemp3player.swf';
  var filename	 = '/sounds/splat.mp3';
  var mp3html    = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ';

  mp3html += 'width="1" height="1" ';
  mp3html += 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">';
  mp3html += '<param name="movie" value="' + playerpath + '?';
  mp3html += 'showDownload=false&file=' + filename + '&autoStart=true';
  mp3html += '&backColor=ffffff&frontColor=ffffff';
  mp3html += '&repeatPlay=false&songVolume=100" />';
  mp3html += '<param name="wmode" value="transparent" />';
  mp3html += '<embed wmode="transparent" width="1" height="1" ';
  mp3html += 'src="' + playerpath + '?'
  mp3html += 'showDownload=false&file=' + filename + '&autoStart=true';
  mp3html += '&backColor=ffffff&frontColor=ffffff';
  mp3html += '&repeatPlay=false&songVolume=100" ';
  mp3html += 'type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
  mp3html += '</object>';

  return mp3html;
}