var currentFilters;
var paletteIsUpdating = false;
var letterBeingMoved;
var offsetX;
var offsetY;
var positionOfCanvas;
var ddTO;
var ieVer;

var lockedMessage   = 'Sorry, this wall has been locked. No changes can be made until it is removed from your basket.';
var whatNameMessage = 'What name would you like to give this wall?';
var deleteMessage   = 'Are you sure you want to permanently delete this wall?';
var newMessage   = 'Are you sure you want to create a new wall. Unsaved changes to this wall will be lost?';

function initialiseWall()
{
  document.onmousemove = doLetterDrag;
  document.onmouseup = endLetterDrag;
  
  currentFilters = { style: 'Old English Black', size: '12cm', character: '*' };

  if (Prototype.Browser.IE)
    ieVer = IEMajorVersion();
  
  loadWall();
  loadPalette();
}

function loadWall(id)
{ 
  hideDropdown(true);
  $('canvas').innerHTML = '';
  new Ajax.Request('/wall/load',
    { method: 'get',
      parameters: { id: (id) ? id : 0 },
      onSuccess: function(transport)
      {
        data = transport.responseText.evalJSON();
        $('wallpaper').style.backgroundImage = 'url(' + data['wallpaper'] + ')';
        for (i=0; i<data['items'].length; i++)
        {
          div = document.createElement('DIV');
          div.style.position = 'absolute';
          if (Prototype.Browser.IE && ieVer < 7)
          {
            div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'/letters/" + data['items'][i]['product_id'] + ".png\', sizingMethod='image')";
            div.style.display="inline-block"
          }
          else
            div.style.backgroundImage = 'url(/letters/' + data['items'][i]['product_id'] + '.png)';
          div.style.left = data['items'][i]['x'] + 'px';
          div.style.top = data['items'][i]['y'] + 'px';
          div.style.width = data['items'][i]['width'] + 'px';
          div.style.height = data['items'][i]['height'] + 'px';
          div.setAttribute('wall_item_id', data['items'][i]['id']);
          div.setAttribute('product_id', data['items'][i]['product_id']);
          div.onmousedown = beginLetterDrag;
          $('canvas').appendChild(div);
        }
        updateToolbar();
      } 
    }
  );
}

function beginLetterCreateAndDrag(e)
{
  e = e || window.event; 
  letter = (e.srcElement) ? e.srcElement : e.target;
  positionOfCanvas = Position.cumulativeOffset($('canvas'));

  letterBeingMoved = letter.cloneNode(true);
  letterBeingMoved.style.position = 'absolute';
  //letterBeingMoved.setAttribute('product_id', letter.getAttribute('product_id'));

  Element.setOpacity(letterBeingMoved, 0.3);
  
  a = Position.cumulativeOffset(letter);
  letterBeingMoved.style.left = a[0] + 'px';
  letterBeingMoved.style.top = a[1] + 'px';
  if (Prototype.Browser.IE && ieVer < 7)
    letterBeingMoved.style.backgroundColor = '#ffffff';
  
  offsetX = e.clientX - a[0];
  offsetY = e.clientY - a[1];
  
  document.body.appendChild(letterBeingMoved);
  Event.stop(e);
}

function beginLetterDrag(e)
{
  e = e || window.event;
  positionOfCanvas = Position.cumulativeOffset($('canvas'));
  letterBeingMoved = (e.srcElement) ? e.srcElement : e.target;
  letterBeingMoved.onclick = endLetterDrag;
  
  a = Position.cumulativeOffset(letterBeingMoved);
  offsetX = e.clientX - a[0];
  offsetY = e.clientY - a[1];
  
  $('canvas').removeChild(letterBeingMoved);
  
  letterBeingMoved.style.top = (e.clientY - offsetY) + 'px';
  if (Prototype.Browser.IE && ieVer < 7)
  {
    letterBeingMoved.style.backgroundColor = '#ffffff';
    letterBeingMoved.style.left = (e.clientX - offsetX - 10) + 'px';
  }
  else
    letterBeingMoved.style.left = (e.clientX - offsetX) + 'px';
  document.body.appendChild(letterBeingMoved);
  
  Element.setOpacity(letterBeingMoved, 0.7);
  Event.stop(e);
}

function doLetterDrag(e)
{
  e = e || window.event;
  if (letterBeingMoved == null) return;
  
  letterBeingMoved.style.top = ( e.clientY - offsetY ) + 'px';
  if (Prototype.Browser.IE && ieVer < 7)
    letterBeingMoved.style.left = ( e.clientX - offsetX - 10 ) + 'px';
  else
    letterBeingMoved.style.left = ( e.clientX - offsetX ) + 'px';
  
  myPageXOffset = (window.pageXOffset == undefined) ? document.documentElement.scrollLeft : window.pageXOffset;
  myPageYOffset = (window.pageYOffset == undefined) ? document.documentElement.scrollTop : window.pageYOffset;
  
  if (Position.within($('canvas'), e.clientX + myPageXOffset, e.clientY + myPageYOffset))
    Element.setOpacity(letterBeingMoved, 0.7);
  else
    Element.setOpacity(letterBeingMoved, 0.3);
  Event.stop(e);
}

function endLetterDrag(e)
{
  e = e || window.event;
  if (letterBeingMoved != null)
  {
    myPageXOffset = (window.pageXOffset == undefined) ? document.documentElement.scrollLeft : window.pageXOffset;
    myPageYOffset = (window.pageYOffset == undefined) ? document.documentElement.scrollTop : window.pageYOffset;
    if (Position.within($('canvas'), e.clientX + myPageXOffset, e.clientY + myPageYOffset))
    {
      a = Position.cumulativeOffset(letterBeingMoved);
      letterBeingMoved.style.left = (a[0] - positionOfCanvas[0]) + 'px';
      letterBeingMoved.style.top = (a[1] - positionOfCanvas[1]) + 'px';
      
      document.body.removeChild(letterBeingMoved);
      
      letterBeingMoved.onmousedown = beginLetterDrag;
      Element.setOpacity(letterBeingMoved, 1);
      if (Prototype.Browser.IE && ieVer < 7)
      {
        letterBeingMoved.style.backgroundColor = 'transparent';
        letterBeingMoved.style.left = (a[0] - positionOfCanvas[0] + 10) + 'px';
      }
      $('canvas').appendChild(letterBeingMoved);

      new Ajax.Request('/wall/update',
        { method: 'get',
          asynchronous: false,
          parameters: { id: letterBeingMoved.getAttribute('wall_item_id'),
                        from: letterBeingMoved.getAttribute('product_id'),
                        x: (a[0] - positionOfCanvas[0]),
                        y: (a[1] - positionOfCanvas[1]) },
          onSuccess: function(transport)
          {
            letterBeingMoved.setAttribute('wall_item_id', transport.responseText);
            letterBeingMoved = null;
            updateToolbar();
          },
          onFailure: function(transport) { alert(lockedMessage); loadWall(); }
        }
      );
    }
    else
    {
      if (letterBeingMoved.getAttribute('wall_item_id'))
      {
        new Ajax.Request('/wall/remove',
          { method: 'get',
            parameters: { id: letterBeingMoved.getAttribute('wall_item_id') },
            onSuccess: function(transport) { letterBeingMoved = null; updateToolbar(); },
            onFailure: function(transport) { alert(lockedMessage); loadWall(); }
          }
        );
      }
      Element.remove(letterBeingMoved);
      letterBeingMoved = null;
    }
  }
}

function setFilter(filter, value)
{
  currentFilters[filter] = value;
  applyFilterSelectors();
  loadPalette();
}

function applyFilterSelectors()
{
  types = ['character','size','style'];
  for (i=0; i<types.length; i++)
  {
    elements = document.getElementsByClassName('filter-' + types[i]);
    for (j=0; j<elements.length; j++)
    {
      if (elements[j].innerHTML == currentFilters[types[i]] ||
          (elements[j].innerHTML == 'All' && currentFilters[types[i]] == '*'))
        elements[j].addClassName('selected');
      else
        elements[j].removeClassName('selected');
    }
  }
}

function loadPalette()
{
  paletteIsUpdating = true;
  $('palette').addClassName('palette-loading');
  $('palette').innerHTML = '';
  new Ajax.Request('/wall/letters',
    { method: 'get',
      parameters: currentFilters,
      onSuccess: function(transport)
      {
        data = transport.responseText.evalJSON();
        for (i=0; i<data.length; i++)
        {
          div = document.createElement('DIV');
          if (Prototype.Browser.IE && IEMajorVersion() < 7)
            div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'/letters/" + data[i]['id'] + ".png\', sizingMethod='scale')";
          else
            div.style.backgroundImage = 'url(/letters/' + data[i]['id'] + '.png)';
          div.id = 'letter-' + data[i]['id'];
          div.className = 'letter';
          div.setAttribute('product_id', data[i]['id']);
          if (data[i]['width'])
          {
            div.style.width = data[i]['width'] + 'px';
            div.style.height = data[i]['height'] + 'px';
          }
          div.onmousedown = beginLetterCreateAndDrag;
          $('palette').appendChild(div);
        }
        $('palette').removeClassName('palette-loading');
        paletteIsUpdating = false;
        if (data.length == 0)
          $('palette').innerHTML = '<div id="palette-no-matches">There are no Letters matching the filters you selected</div>';
      } 
    }
  );
  hideDropdown(true);
}

function setWallpaper(src)
{
  $('wallpaper').style.backgroundImage = 'url(' + src + ')';
  new Ajax.Request('/wall/wallpaper',
    { method: 'get',
      parameters: { src: src }
    }
  );
  updateToolbar();
}

function showSaveDialog(type)
{
  new Ajax.Updater('dialog', '/wall/save-dialog/'+type,
    { method: 'get',
      onSuccess: function() { $('dialog').show(); }
    }
  );
}

function saveWall(name,type)
{
  if (name && name.length > 0)
  {
    new Ajax.Request('/wall/save',
      { method: 'get',
        parameters: { name: name },
        onSuccess: function() { updateToolbar(); $('dialog').hide(); }
      }
    );
    
    if (type == 'buy')
      location = '/wall/buy?name=' + name;
  }
  else
    alert('You cannot leave name blank.');
}

function updateToolbar()
{
  new Ajax.Updater('toolbar',
    '/wall/toolbar',
    { method: 'get', 
      onComplete: function(){ applyFilterSelectors(); }
    }
  );
}

function buyWall(name)
{
  if (name.length == 0)
  {
    showSaveDialog('buy');
  }
    
  if (name && name.length > 0)
    location = '/wall/buy?name=' + name;
}

function deleteWall()
{
  if (confirm(deleteMessage))
  {
    new Ajax.Request('/wall/delete',
      { method: 'get',
        onSuccess: function(transport) { loadWall(); },
        onFailure: function(transport) { alert(lockedMessage); }
      }
    );
  }
}

function newWall()
{
  if (confirm(newMessage))
  {
    new Ajax.Request('/wall/new',
      { method: 'get',
        onSuccess: function(transport) { loadWall(); },
        onFailure: function(transport) { alert(lockedMessage); }
      }
    );
  }
}

function toggleDropdown(link, id, alignment)
{
  if (paletteIsUpdating)
    return true;
  
  alignment = (alignment == undefined) ? 'left' : alignment;
  clearTimeout(ddTO);
  document.getElementsByClassName('dropdown').each(Element.hide);
  a = Position.cumulativeOffset(link);
  dropdown = $(id);
  dropdown.style.top = (a[1] + Element.getHeight(link)) + 'px';
  if (alignment == 'left')
    dropdown.style.left = (a[0] + 10) + 'px';
  else
    dropdown.style.right = (window.innerWidth - a[0] - link.getWidth()) + 'px';

  dropdown.style.display = 'block';
}

function IEMajorVersion()
{
  appVer = navigator.appVersion.toLowerCase();
  iePos = appVer.indexOf('msie');
  return parseInt(appVer.substring(iePos + 5, appVer.indexOf(';',iePos)));
}

function hideDropdown(for_real)
{
  if (for_real == undefined)
    ddTO = setTimeout('hideDropdown(true)', 200);
  else
    document.getElementsByClassName('dropdown').each(Element.hide);
}

function removePaletteOverlay() { Element.remove('palette-overlay'); }

Event.observe(window, 'load', initialiseWall);