//-------------
//-- Variables
//-------------

    var layersCount = 0;
    var layers = new Array();

    var tips = null;
    var layerListSort = null;

//-----------
//-- On Load
//-----------

  window.addEvent('domready', function()
    {

      //-- Start dragger

        testResize = new ResizeAll('dragger');

      //-- Make sample image links addable (temporary feature)

        $$('.sampleImg').each(function(a)
          {
            a.addEvent('click', function(e)
              {
                e = new Event(e).stop();
        
                new Layer(a.get('text'), a.get('href'));
                cleanNewLayer();
              })
          });

      //-- OnSubmit for image url tab

        $('popLinkF').addEvent('submit', function(e)
          {
            e = new Event(e).stop();

            if(! $('popLinkU').get('value') || $('popLinkU').get('value') == "http://")
              alert('You need a url');
            else
              {
                new Layer($('popLinkL').get('value'), $('popLinkU').get('value'));
                cleanNewLayer();
              }
  
          });

      //-- OnSubmit for flickr tab (Tag Search)

        $('popFlickrF').addEvent('submit', function(e)
          {
            e = new Event(e).stop();

            if(! $('popFlickrS').get('value') )
              alert('You need a search term');
            else
              {
                if($('flickrJSON')) $('flickrJSON').dispose();

                new Asset.javascript('http://api.flickr.com/services/rest/?format=json&per_page=11&method=flickr.photos.search&api_key=91de003e528296ee458376c7216e6b1f&tags=' + $('popFlickrS').get('value').trim(),
                  {
                    id: 'flickrJSON'
                  });
              }
      
            });

      //-- OnSubmit for flickr tab (User Search)

        $('popFlickrU').addEvent('submit', function(e)
          {

            e = new Event(e).stop();

            if(! $('popFlickrUS').get('value') )
              alert('You need to enter a username');
            else
              {

                if($('flickrJSON')) $('flickrJSON').dispose();
                new Asset.javascript('http://api.flickr.com/services/rest/?format=json&method=flickr.people.findByUsername&api_key=91de003e528296ee458376c7216e6b1f&username=' + $('popFlickrUS').get('value').trim(),
                {
                  id: 'flickrJSON'
                });
              }
      
          });

      //-- OnSubmit for text tab

        $('popTextF').addEvent('submit', function(e)
          {

            e = new Event(e).stop();

            if(! $('popTextInput').get('value') )
              alert('You need text to add');
            else if(! $('popTextSize').get('value').toInt() || $('popTextSize').get('value').toInt() < 1 )
              alert('You need to choose a text size');
            else
              {
                var color = new Color( $('popTextC').getStyle('background-color') );
                new Layer($('popTextL').get('value'), 'textOutput.php?s=' + $('popTextSize').get('value').toInt() + '&r=' + color.rgb[0] + '&g=' + color.rgb[1] + '&b=' + color.rgb[2] + '&f=' + $('popTextFont').get('value') + '&t=' + $('popTextInput').get('value'));
                cleanNewLayer();
              }
      
          });

      //-- Set up color picker

        var r = new MooRainbow('popTextC', 
          {
            'startColor': [0, 0, 0],
            'onChange': function(color) 
              {
                $('popTextC').set('rgb', '&r=' + color.rgb[0] + '&g=' + color.rgb[1] + '&b=' + color.rgb[2] );
                $('popTextC').setStyle('background-color', color.hex);
              }
          });

      //-- Add tabbing functionality to add layer box

        $$('#popupMenu li').each(function(li)
          {

            li.addEvent('click', function(e)
              {

                $('popupGallery').setStyle('display', 'none');

                $$('#popupMenu li').each(function(l){l.removeClass('on');});

                li.addClass('on');

                $$('.popupText').each(function(l){l.setStyle('display', 'none');});

                $(li.get('id') + 'T').setStyle('display', 'block');
              });
          });

      //-- Add layer sorting

        layerListSort = new Sortables('layersList',
          {
            revert: true,
            constrain: true,
            onComplete: function(e)
              {
                layerListSort.serialize(0, function(element, index)
                  {
                    $('layerI' + element.get('count')).setStyle('z-index', (120 - index) );
                  });
              }.bind(this)
          });

      //-- Display the add layer box

        $('addLayer').addEvent('click', function(e)
          {

            e = new Event(e).stop();

            $('popup').setStyle('display', 'block');

            $('cover').setStyle('display', 'block');

            $$('#popupMenu li').each(function(l){l.removeClass('on');});

            $('popAdd').addClass('on');

            $$('.popupText').each(function(l){l.setStyle('display', 'none');});

            $('popAddT').setStyle('display', 'block');

          });

      //-- Select all layers

        $('allLayers').addEvent('click', function(e)
          {
            e = new Event(e).stop();
 
            $$('.layer').each(function(l)
              {
                l.removeClass( 'layerSelected' );
              });

            $$('.layer').each(function(l)
              {
                selectLayer( l, true );
              });

          });

      //-- Select no layers

        $('noLayers').addEvent('click', function(e)
          {

            e = new Event(e).stop();

            $$('.layer').each(function(l)
             {
               l.addClass( 'layerSelected' );
             });

           $$('.layer').each(function(l)
             {
               selectLayer( l, true );
             });

         });

      //-- Close Add Layer Box

        $('popupClose').addEvent('click', function(e)
          {
            e = new Event(e).stop();

            cleanNewLayer();

          });

      //-- Set up a way to hide the layers and replace with small icon

        $('layersMax').setStyle('display', 'none');

        $('layersMin').addEvent('click', function(e)
          {
            $('layers').setStyle('display', 'none');
            $('layersMax').setStyle('display', 'block');
          });

        $('layersMax').addEvent('click', function(e)
          {
           $('layers').setStyle('display', 'block');
           $('layersMax').setStyle('display', 'none');
          });

      //-- Disable layers on startup

        disableLayers();

      //-- Set the width and height text boxes

        $('wcanv').set('value', $('canvas').getStyle('width').toInt() );
        $('hcanv').set('value', $('canvas').getStyle('height').toInt() );

      //-- Resize the canvas

        $('canvasSize').addEvent( 'submit', function(e)
          {
            e.stop();
            centerCanvas( $('wcanv').value, $('hcanv').value );
          });

      //-- Center the layers

        $('icent').addEvent( 'click', function(e)
          {
            e.stop();
            newLeft = ( $('wcanv').get('value').toInt() / 2 ) - ( $('wimg').get('value').toInt() / 2 );
            newTop  = ( $('hcanv').get('value').toInt() / 2 ) - ( $('himg').get('value').toInt() / 2 )

            $('tcoord').set('value', Math.round(newTop));
            $('lcoord').set('value', Math.round(newLeft));

            $('layerPos').fireEvent('submit', e);
          });

      //-- Fill Canvas with selected images

        $('fimage').addEvent( 'click', function(e)
          {
            e.stop();

            $('wimg').set('value', $('wcanv').get('value').toInt());
            $('himg').set('value', $('hcanv').get('value').toInt());

            $('tcoord').set('value', 0);
            $('lcoord').set('value', 0);

            $('layerSize').fireEvent('submit', e);
          });

      //-- Pack Canvas around selected images

        $('pcanvas').addEvent( 'click', function(e)
          {
            e = new Event(e).stop();

            $('wcanv').set('value', $('wimg').get('value'));
            $('hcanv').set('value', $('himg').get('value'));

            $$('.layer').each( function(div)
              {

                $('tcoord').set('value', 0);
                $('lcoord').set('value', 0);

                divI = $('layerI' + div.get('count'));
                dStyles = divI.getStyles( 'top', 'left' );
 
                relativeL = dStyles.left.toInt() - $('dragger').getStyle('left').toInt();
                relativeT = dStyles.top.toInt() - $('dragger').getStyle('top').toInt();

                divI.morph(
                  {
                    top: $('tcoord').value.toInt() + relativeT.toInt(),
                    left: $('lcoord').value.toInt() + relativeL.toInt()
                  });
 
                  $('layerI' + div.get('count')).set('relativeL', relativeL.toInt()  );
                  $('layerI' + div.get('count')).set('relativeT', relativeT.toInt() );
              });

            $('dragger').morph(
              {
                top: 0,
                left: 0
              });

            centerCanvas( $('wcanv').value, $('hcanv').value );
          });

      //-- Resize selected layers

        $('layerSize').addEvent('submit', function(e)
          {
            e= new Event(e).stop();

            var percW = ( $('wimg').value.toInt() + 2 ) / ( $('dragger').getStyle('width').toInt() + 2 ) ;
            var percH = ( $('himg').value.toInt() + 2 )  / ( $('dragger').getStyle('height').toInt() + 2 );

            $('dragger').morph(
              {
                width: $('wimg').value - 2,
                height: $('himg').value - 2,
                top: $('lcoord').value,
                left: $('tcoord').value
              });

            $$('.layerSelected').each( function(div)
              {
                divI = $('layerI' + div.get('count'));
                dStyles = divI.getStyles( 'top', 'left' );
 
                relativeL = dStyles.left.toInt() - $('dragger').getStyle('left').toInt();
                relativeT = dStyles.top.toInt() - $('dragger').getStyle('top').toInt();

                divI.morph(
                  {
                    width: divI.getStyle('width').toInt() * percW - 2,
                    height: divI.getStyle('height').toInt() * percH - 2,
                    top: $('tcoord').value.toInt() + ( relativeT.toInt() * percH ),
                    left: $('lcoord').value.toInt() + (relativeL.toInt() * percW)
                  });
 
                  $('layerI' + div.get('count')).set('relativeL', relativeL.toInt() * percW  );
                  $('layerI' + div.get('count')).set('relativeT', relativeT.toInt() * percH );
              });

          });

      //-- Reposition layers

        $('layerPos').addEvent( 'submit', function(e)
          {
            e.stop();

            $('dragger').morph(
              {
                left: $('lcoord').value,
                top: $('tcoord').value
              });

            $$('.layerSelected').each( function(div)
              {
                divI = $('layerI' + div.get('count'));

                divI.morph(
                  {
                    left: $('lcoord').value.toInt() + divI.get('relativeL').toInt(),
                    top: $('tcoord').value.toInt() + divI.get('relativeT').toInt()
                  });
              });

          });

      //-- Resize selected layers

/**
      $('layerSize').addEvent( 'submit', function(e)
        {
          e.stop();

          $('dragger').morph(
            {
              width: $('wimg').value - 2,
              height: $('himg').value - 2,
              top: $('tcoord').value,
              left: $('lcoord').value
            });

        });
**/

      //-- Create a new Tip class

        tips = new Tip();

      //-- View More Tips

        document.getElementById('tipsMore').onclick = function(e)
          {
            e = new Event(e).stop();

            tips.randomTip();
          };
        
      //-- Get a new tip every 10 seconds
        
        var timer = setInterval("tips.randomTip()",10000);


      });

//-------------
//-- Functions
//-------------

  //-- Clean "Add Layer" box

    function cleanNewLayer()
      {

        $('popup').setStyle('display', 'none');
        $('cover').setStyle('display', 'none');
        $('popupGallery').setStyle('display', 'none');

        $('popLinkL').set('value', '');
        $('popLinkU').set('value', 'http://');

        $('popFlickrL').set('value', '');
        $('popFlickrS').set('value', '');
        $('popFlickrUS').set('value', '');
 
        $('popTextL').set('value', '');
        $('popTextInput').set('value', '');
      }

  //-- Flickr API function
  
    function jsonFlickrApi(o)
      {
        if(o.user)
          {

            $('flickrJSON').dispose();
            new Asset.javascript('http://api.flickr.com/services/rest/?format=json&per_page=11&method=flickr.people.getPublicPhotos&api_key=91de003e528296ee458376c7216e6b1f&user_id=' + o.user.nsid,
              {
                id: 'flickrJSON'
              });

          }
        else
          {

            var i=0;
            var imgs = [];
            if(o.photos.total.toInt() == 0)
              alert('No Images Found');
            else
            {
              while(o.photos.photo[i])
                {
                  imgs.include('http://farm'+o.photos.photo[i].farm+'.static.flickr.com/'+o.photos.photo[i].server+'/'+o.photos.photo[i].id+'_'+o.photos.photo[i].secret+'_s.jpg');
                  i++;
                }
            }

            var flickr = new Asset.images( imgs,
              {
                onComplete: function()
                  {
                    $('popupGalleryI').empty();

                    flickr.each(function(div)
                      {
                        $('popupGalleryI').grab(div);
                        div.addEvent('mouseover', function(e){ div.setStyle('border-color', '#AAA'); });
                        div.addEvent('mouseout', function(e){ div.setStyle('border-color', '#CCC'); });
                        div.addEvent('click', function(e){ new Layer($('popFlickrL').get('value'), div.get('src').replace('_s', '_b')); cleanNewLayer(); });
                      });

                    $('popupGallery').setStyle('display', 'block');
                  }
              });
          }
      }

  //-- Generate the link for download / preview

    function genLink( download )
      {
        var link  = 'output.php?t=png';
            link += '&w=' + $('canvas').getStyle('width').toInt();
            link += '&h=' + $('canvas').getStyle('height').toInt();

        var layerMenu = $$('.layer');
        layerMenu.each(function(div)
          {
            link += '&f[]=' + $('layerI' + div.get('count')).get('src').replace(/\?/g, '~~').replace(/\&/g, '^^');
            link += '&fh[]=' + $('layerI' + div.get('count')).getStyle('height').toInt();
            link += '&fw[]=' + $('layerI' + div.get('count')).getStyle('width').toInt();
            link += '&ft[]=' + $('layerI' + div.get('count')).getStyle('top').toInt();
            link += '&fl[]=' + $('layerI' + div.get('count')).getStyle('left').toInt();

          });

        if( download ) link += '&d=' + download;

        return link;
      }

  //-- Select a layer

    function selectLayer( list, control )
      {
        if( list.hasClass('layerSelected') && control )
          list.removeClass('layerSelected');
        else
          {
            if(! control)
              {
                $$('.layerSelected').each( function(div)
                  {
                    div.removeClass('layerSelected');
                  });
              }

            list.addClass('layerSelected');
          }

          var mW = false;
          var mH = false;
          var mX = false;
          var mY = false;


          if( $$('.layerSelected').length > 1 )
            {
              $('layerPositionTxt').set('text', 'Layers Position');
              $('layerSizeTxt').set('text', 'Layers Size');
            }
          else
            {
              $('layerPositionTxt').set('text', 'Layer Position');
              $('layerSizeTxt').set('text', 'Layer Size');
            }

          $$('.layerSelected').each( function(div)
            {
              var styles = $('layerI' + div.get('count') ).getStyles('top', 'left', 'width', 'height');

              if( mW === false || (styles.left.toInt() + styles.width.toInt()) > mW )
                mW = styles.left.toInt() + styles.width.toInt();

              if( mH === false || (styles.top.toInt() + styles.height.toInt()) > mH )
                mH = (styles.top.toInt() + styles.height.toInt());

              if( mX === false || styles.left.toInt() < mX )
                mX = styles.left.toInt();

              if( mY === false || styles.top.toInt() < mY )
                mY = styles.top.toInt();
            });


          if( mW === false || mH === false || mX === false || mY === false )
            disableLayers();
          else
            {
              $('dragger').setStyles(
                {
                  'width': (mW - mX - 2) + 'px',
                  'height': (mH - mY - 2) + 'px',
                  'left': mX + 'px',
                  'top': mY + 'px'
                });

                $('tcoord').setProperty('value', mY );
                $('lcoord').setProperty('value', mX );
                $('wimg').setProperty('value', mW - mX );
                $('himg').setProperty('value', mH - mY );

              $$('.layerSelected').each( function(div)
                {
                  dStyles = $('layerI' + div.get('count') ).getStyles('top', 'left', 'width', 'height');

                  $('layerI' + div.get('count')).set('relativeL', dStyles.left.toInt() - mX  );
                  $('layerI' + div.get('count')).set('relativeT', dStyles.top.toInt() - mY );
                });

              $('dragger').setStyle('display', 'block');

              $('ipos').disabled = false;
              $('icent').disabled = false;
              $('fimage').disabled = false;
              $('simage').disabled = false;

              $$('.input').each(function(d)
                {
                  d.setStyles(
                    {
                      'background-color' : '#FFF',
                      'color' : '#000',
                    });
                });
            }
      }

    //-- Disable Layers

      function disableLayers()
        {

          $('dragger').setStyle('display', 'none');

          $('ipos').disabled = true;
          $('icent').disabled = true;
          $('fimage').disabled = true;
          $('simage').disabled = true;

          $$('.input').each(function(d)
            {
              d.set('value', '');
              d.setStyles(
                {
                  'background-color' : '#F9F9F9',
                  'color' : '#F9F9F9',
                });
            });
        }

    //-- Move selected images

      function moveSelected()
        {
          $$('.layerSelected').each( function(div)
            {
              img = $('layerI' + div.get('count'));
              relL = img.get('relativeL');
              relT = img.get('relativeT');
              pos = $('dragger').getPosition('canvas');

              img.setStyles(
                {
                  'left': pos.x + 1 + relL.toInt(),
                  'top': pos.y + 1 + relT.toInt()
                });
            });
        }

    //-- Resize selected images

      function resizeSelected()
        {
          var percW = ( $('dragger').getStyle('width').toInt() + 2 ) / testResize.wOrig;
          var percH = ( $('dragger').getStyle('height').toInt() + 2 ) / testResize.hOrig;

          $$('.layerSelected').each( function(div)
            {

              img = $('layerI' + div.get('count'));
              img.setStyle( 'width', div.get('wOrig') * percW );
              img.setStyle( 'height', div.get('hOrig') * percH );

              img.setStyle( 'top', ( div.get('yOrig') * percH ) + $('dragger').getStyle('top').toInt() );
              img.setStyle( 'left', ( div.get('xOrig') * percW ) + $('dragger').getStyle('left').toInt() );

            });
        }

    //-- Center Canvas

      function centerCanvas( newW, newH )
        {
          var wSize = window.getSize();
          var cSize = $('canvasBody').getSize();

          if( newW && newH )
          {
            if( newW <= 0 )
                alert('The width must be at least 1px');
            else if( newH <= 0 )
                alert('The height must be at least 1px');
            else
              {
                nW = newW.toInt();
                nH = newH.toInt();

                newLeft = ( wSize.x - ( nW + 2 ) ) / 2;
                newTop  = ( ( ( wSize.y - 133 ) - (nH - 23) ) / 2 ) + 108;

                if( newLeft <= 0)
                  newLeft = 0;

                if( newTop <= 108)
                  newTop = 108;

                $('canvasBody').morph(
                  {
                    width: nW + 2, 
                    height: nH + 2,
                    left: newLeft, 
                    top: newTop
                  });

                $('canvas').morph(
                  {
                    width: nW, 
                    height: nH
                  });

              }

          }
           else
          {
            newLeft = ( wSize.x - cSize.x ) / 2;
            newTop  = ( ( ( wSize.y - 133 ) - (cSize.y - 25) ) / 2 ) + 108;

            if( newLeft <= 0)
              newLeft = 0;

            if( newTop <= 108)
              newTop = 108;

            if( newW === true )
              {

                $('canvasBody').setStyles(
                  {
                    left: newLeft, 
                    top: newTop,
                    visibility: 'visible'
                  });

              }
               else
              {
                $('canvasBody').morph(
                  {
                    left: newLeft, 
                    top: newTop
                  });
              }
          }
        }


//-----------
//-- Classes
//-----------

  // I wrote these.. but they use the
  // Mootools Class function

  //-- Resize the dragger div

    var ResizeAll = new Class(
      {
        initialize: function(el, options)
          {
            this.div = $(el);
            this.setOptions(options);
            this.br = $('draggerBR');
            this.bl = $('draggerBL');
            this.tl = $('draggerTL');
            this.tr = $('draggerTR');

            this.addDrag();
          },

        addDrag: function()
          {

            //-- Bottom Right

              new Drag.Move(this.div,
                {
                  'modifiers': {'x': 'width', 'y': 'height'},
                  'handle': this.br,
                  'onStart': function(e)
                    {
                      this.wOrig = this.div.getStyle('width').toInt() + 2;
                      this.hOrig = this.div.getStyle('height').toInt() + 2;

                      left = this.div.getStyle('left').toInt();
                      top = this.div.getStyle('top').toInt();

                      $$('.layerSelected').each( function(d)
                        {
                          img = $('layerI' + d.get('count'));
                          d.set( 'wOrig', img.getStyle('width').toInt() );
                          d.set( 'hOrig', img.getStyle('height').toInt() );
                          d.set( 'xOrig', img.getStyle('left').toInt() - left );
                          d.set( 'yOrig', img.getStyle('top').toInt() - top );
                        });
                    }.bind(this),
                  'onDrag': function(e)
                    {
                      this.updateDiv( this.br, 'se');
                      resizeSelected();
                    }.bind(this),
                  'onComplete': function(e)
                    {
                      $$('.layerSelected').each( function(d)
                        {
                          dStyles = $('layerI' + d.get('count') ).getStyles( 'top', 'left' );
 
                          $('layerI' + d.get('count')).set('relativeL', dStyles.left.toInt() - $('dragger').getStyle('left').toInt()  );
                          $('layerI' + d.get('count')).set('relativeT', dStyles.top.toInt() - $('dragger').getStyle('top').toInt() );

                        });

                        this.updateDiv( this.br, 'se');
                        resizeSelected();
                    }.bind(this)
                });

            //-- Bottom Left

              new Drag.Move(this.div,
                {
                  'modifiers': {'x': 'left', 'y': 'height'},
                  'handle': this.bl,
                  'onStart': function(e)
                    {
                      this.xOrig = this.div.getCoordinates().left + this.div.getStyle('width').toInt() - 6;
                      this.wOrig = this.div.getStyle('width').toInt() + 2;
                      this.hOrig = this.div.getStyle('height').toInt() + 2;

                      left = this.div.getStyle('left').toInt();
                      top = this.div.getStyle('top').toInt();

                      $$('.layerSelected').each( function(d)
                        {

                          img = $('layerI' + d.get('count'));
                          d.set( 'wOrig', img.getStyle('width').toInt() );
                          d.set( 'hOrig', img.getStyle('height').toInt() );
                          d.set( 'xOrig', img.getStyle('left').toInt() - left );
                          d.set( 'yOrig', img.getStyle('top').toInt() - top );
                        });
                    }.bind(this),
                  'onDrag': function(e)
                    {
                      this.updateDiv( this.bl, 'w');
                      resizeSelected();
                    }.bind(this),
                  'onComplete': function(e)
                    {
                      $$('.layerSelected').each( function(d)
                        {
                          dStyles = $('layerI' + d.get('count') ).getStyles( 'top', 'left' );
 
                          $('layerI' + d.get('count')).set('relativeL', dStyles.left.toInt() - $('dragger').getStyle('left').toInt()  );
                          $('layerI' + d.get('count')).set('relativeT', dStyles.top.toInt() - $('dragger').getStyle('top').toInt() );

                        });

                      this.updateDiv( this.bl, 'w');
                      resizeSelected();
                    }.bind(this)
                });

            //-- Top Left

              new Drag.Move(this.div,
                {
                  'modifiers': {'x': 'left', 'y': 'top'},
                  'handle': this.tl,
                  'onStart': function(e)
                    {
                      this.xOrig = this.div.getCoordinates().left + this.div.getStyle('width').toInt() - 6;
                      this.yOrig = this.div.getCoordinates().top + this.div.getStyle('height').toInt() - 6;
                      this.wOrig = this.div.getStyle('width').toInt() + 2;
                      this.hOrig = this.div.getStyle('height').toInt() + 2;

                      left = this.div.getStyle('left').toInt();
                      top = this.div.getStyle('top').toInt();

                      $$('.layerSelected').each( function(d)
                        {
                          img = $('layerI' + d.get('count'));
                          d.set( 'wOrig', img.getStyle('width').toInt() );
                          d.set( 'hOrig', img.getStyle('height').toInt() );
                          d.set( 'xOrig', img.getStyle('left').toInt() - left );
                          d.set( 'yOrig', img.getStyle('top').toInt() - top );
                        });
                     }.bind(this),
                   'onDrag': function(e)
                     {
                       this.updateDiv( this.tl, 'nw');
                       resizeSelected();
                     }.bind(this),
                   'onComplete': function(e)
                     {
                       $$('.layerSelected').each( function(d)
                         {
                           dStyles = $('layerI' + d.get('count') ).getStyles( 'top', 'left' );
 
                           $('layerI' + d.get('count')).set('relativeL', dStyles.left.toInt() - $('dragger').getStyle('left').toInt()  );
                           $('layerI' + d.get('count')).set('relativeT', dStyles.top.toInt() - $('dragger').getStyle('top').toInt() );

                         });

                       this.updateDiv( this.tl, 'nw');
                       resizeSelected();
                     }.bind(this)
                  });

            //-- Top Right

              new Drag.Move(this.div,
                {
                  'modifiers': {'x': 'width', 'y': 'top'},
                  'handle': this.tr,
                  'onStart': function(e)
                    {
                      this.yOrig = this.div.getCoordinates().top + this.div.getStyle('height').toInt() - 6;
                      this.wOrig = this.div.getStyle('width').toInt() + 2;
                      this.hOrig = this.div.getStyle('height').toInt() + 2;

                      left = this.div.getStyle('left').toInt();
                      top = this.div.getStyle('top').toInt();

                      $$('.layerSelected').each( function(d)
                        {
                          img = $('layerI' + d.get('count'));
                          d.set( 'wOrig', img.getStyle('width').toInt() );
                          d.set( 'hOrig', img.getStyle('height').toInt() );
                          d.set( 'xOrig', img.getStyle('left').toInt() - left );
                          d.set( 'yOrig', img.getStyle('top').toInt() - top );
                        });

                     }.bind(this),
                  'onDrag': function(e)
                    {
                      this.updateDiv( this.tr, 'n');
                      resizeSelected();
                    }.bind(this),
                  'onComplete': function(e)
                    {
                      $$('.layerSelected').each( function(d)
                        {
                          dStyles = $('layerI' + d.get('count') ).getStyles( 'top', 'left' );
 
                          $('layerI' + d.get('count')).set('relativeL', dStyles.left.toInt() - $('dragger').getStyle('left').toInt()  );
                          $('layerI' + d.get('count')).set('relativeT', dStyles.top.toInt() - $('dragger').getStyle('top').toInt() );

                        });

                      this.updateDiv( this.tr, 'n');
                      resizeSelected();
                    }.bind(this)
                 });

                 new Drag.Move(this.div,
                   {
                     'modifiers': {'x': 'left', y: 'top'},
                     'handle':$('draggerBG'),
                     'onDrag': function(e)
                       {
                         moveSelected();

                         $('tcoord').setProperty('value', $('dragger').getPosition('canvas').y + 1);
                         $('lcoord').setProperty('value', $('dragger').getPosition('canvas').x + 1);
                       }
                   });

               },

           //-- Update the divs

             updateDiv: function(handle, direction)
               {

                 coords = handle.getCoordinates();

                 if( direction == 'w')
                   this.div.setStyle('width', this.xOrig - coords.left + 3);
                 else if( direction == 'n')
                   this.div.setStyle('height', this.yOrig - coords.top + 3);
                 else if( direction == 'nw')
                   {
                     this.div.setStyle('width', this.xOrig - coords.left + 3);
                     this.div.setStyle('height', this.yOrig - coords.top + 3);
                   }

                 pos = $('dragger').getPosition('canvas');
                 coords = $('dragger').getCoordinates();

                 $('tcoord').value = pos.y + 1;
                 $('lcoord').value = pos.x + 1;
                 $('wimg').value = coords.width;
                 $('himg').value = coords.height;
               }
         });

       ResizeAll.implement(new Events, new Options);

  //-- Resize the dragger div

    var Layer = new Class(
      {

        initialize: function( name, image )
        {
          this.name = name;
          this.image = image;
          this.selected = false;

          layers.push( this );

          if(! this.name) this.name = 'Layer ' + (layersCount + 1);

          //-- Build layer stuff, add to site

            var list = new Element( 'li' ,{ 'class': 'layer', 'id': 'layerL' + layersCount } ).set('count', layersCount);
                list.addEvent( 'mousedown', function(e)
                  {

                    var control = false;

                    if(e)
                    {
                      e = new Event(e).stop();

                      if( e.control || e.meta )
                        control = true;
                    }

                    selectLayer( list, control );

                  } );

            list.inject( 'layersList', 'top' );
            list.grab( new Element('span', {'id': 'layerT' + layersCount, 'text': this.name }) );
            this.list = list;
            layerListSort.attach();

            var del = new Element('img', {'src': 'delete.png', 'alt':'delete' });
            var edit = new Element('img', {'src': 'edit.png', 'alt':'edit' });
            var options = new Element('div', {'class':'layerOptions'});
                options.inject(list);
                options.grab(del);
                options.grab(edit);

            var img = new Asset.image(this.image,
              {
              'id': 'layerI' + layersCount,
              'class': 'img',
              'title': this.name,
              'onload': function(event)
                {
                  this.inject( 'canvas', 'top' );
                  selectLayer( list, false );

                  layerListSort.serialize(0, function(element, index)
                    {
                      $('layerI' + element.get('count')).setStyle('z-index', (120 - index) );
                    });
                }
              });
            this.img = img;


            del.addEvent('click', function(e)
              {
                var conf = confirm('Are you sure you want to delete this layer?');
                if( conf )
                {
                  list.addClass('layerSelected');
                  selectLayer( list, true );

                  list.destroy();
                  img.destroy();
                }
              });

            edit.addEvent('click', function(e)
              {
                var newname = prompt('What do you want to rename this layer to?', layers[list.get('count')].name);
                layers[list.get('count')].name = newname;
                if( newname )
                {
                  $('layerT' + list.get('count')).set('text', newname);
                }
              });

          //-- Increment layersCount

            layersCount++;
        }
      });


  //-- Tips class (Done with traditional javascript

        function Tip( )
          {
            this.randomTip = randomTip;

            randomTip();
          }

  //-- Create new tip class

        function randomTip()
          {
            var text = new Request.JSON(
              {
                'url' : 'ajax.php',
                'onSuccess': function(responseJSON)
                   {


                     document.getElementById('randomTip').removeChild( document.getElementById('randomTip').firstChild );
                     document.getElementById('randomTip').appendChild( document.createTextNode(responseJSON.tip) );
                   }
              }).get();
          }