(function(){
  document.observe('dom:loaded', (function() {
    $('mainmenu').setStyle({position:'relative'});
    
    // Define global variables
    //------------------------
    var domain          = 'http://www.clubtattoo.com/';
    var buttonImageDir  = domain + 'images/mainmenu/';
    var adImageDir      = domain + 'images/mainmenu/primary/';
    var adImages        = $w('0001.jpg 0002.jpg 0003.jpg 0004.png 0005.jpg');
    var adPages         = ['tattoo_flash.php',                        
                           'xcart/home.php',
                           'artists.php',
                           'tattoo_flash.php',
                           'piercers.php'];
    
    // Define navButton class
    //-----------------------
    var navButton = Class.create();
    navButton.prototype = {
      imageDir: buttonImageDir,
      siteURL: domain,
      
      initialize: function(args) {
        this.targetPage       = args.targetPage;
        this.positionX        = args.positionX;
        this.positionY        = args.positionY;
        this.offsetX          = args.offsetX;
        this.offsetY          = args.offsetY;
        this.downStateImage   = args.downStateImage;
        this.upStateImage     = args.upStateImage;
        
        this.buttonContainer = new Element('div');
        this.buttonContainer.setStyle({
          margin:     'auto',
          position:   'absolute',
          top:        this.positionY + 'px',
          left:       this.positionX + 'px',
          cursor:     'pointer',
          zIndex:     99
        });
        
        this.buttonContainer.observe('mouseover', (this.mouseover).bind(this));
        this.buttonContainer.observe('mouseout', (this.mouseout).bind(this));
        this.buttonContainer.observe('click', (this.click).bind(this));
        
        this.upStateContainer  = undefined;
        this.downStateContainer  = undefined;
        
        this.setButtonStates();
      },
      
      setButtonStates: function() {
        var upStateLoader = new Image();
        upStateLoader.onload = (function() {
          this.upStateContainer = new Element('div');
          this.upStateContainer.setStyle({
            margin:   'auto',
            width:    upStateLoader.width + 'px',
            height:   upStateLoader.height + 'px',
            position: 'absolute',
            top:      '0px',
            left:     '0px',
            display:  'none'
          });
          this.upStateContainer.insert(upStateLoader);
          this.buttonContainer.insert(this.upStateContainer);
          
          var downStateLoader = new Image();
          downStateLoader.onload = (function() {
            this.downStateContainer = new Element('div');
            this.downStateContainer.setStyle({
              margin:     'auto',
              width:      downStateLoader.width + 'px',
              height:     downStateLoader.height + 'px',
              position:   'absolute',
              top:        '0px',
              left:       '0px',
              display:    'block'
            });
            this.downStateContainer.insert(downStateLoader);
            this.buttonContainer.insert(this.downStateContainer);
          }).bind(this);
          downStateLoader.src = this.imageDir + this.downStateImage;
        }).bind(this);
        upStateLoader.src = this.imageDir + this.upStateImage;
      },
      
      mouseover: function(event) {
        this.downStateContainer.hide();
        this.upStateContainer.show();
        
        this.buttonContainer.setStyle({
          top:    this.positionY + this.offsetY + 'px',
          left:   this.positionX + this.offsetX + 'px',
          zIndex: 2 
        });
      },
      
      mouseout: function(event) {
        this.upStateContainer.hide();
        this.downStateContainer.show();
        
        this.buttonContainer.setStyle({
          top:    this.positionY + 'px',
          left:   this.positionX + 'px',
          zIndex: 99
        });
      },
      
      click: function(event) {
        event.stop();
        window.location = this.targetPage;
      },
      
      getButton: function() { return this.buttonContainer; }
    };
    
    // Create navigation buttons
    //--------------------------
    // Define homeButton
    var homeButton = new navButton({
      targetPage:    'index.php',
      downStateImage:  'home_down.png',
      upStateImage:  'home_up.png',
      positionX:    10,
      positionY:    300,
      offsetX:    -5,
      offsetY:    -5
    });
    $('mainmenu').insert(homeButton.getButton());
    
    // Define artistsButton
    var artistsButton = new navButton({
      targetPage:    'artists.php',
      downStateImage:  'artists_down.png',
      upStateImage:  'artists_up.png',
      positionX:    60,
      positionY:    250,
      offsetX:    -5,
      offsetY:    -5
    });
    $('mainmenu').insert(artistsButton.getButton());
    
    // Define piercersButton
    var piercersButton = new navButton({
      targetPage:    'piercers.php',
      downStateImage:  'piercers_down.png',
      upStateImage:  'piercers_up.png',
      positionX:    150,
      positionY:    290,
      offsetX:    -5,
      offsetY:    -5
    });
    $('mainmenu').insert(piercersButton.getButton());
    
    // Define aftercareButton
    var aftercareButton = new navButton({
      targetPage:    'aftercare.php',
      downStateImage:  'aftercare_down.png',
      upStateImage:  'aftercare_up.png',
      positionX:    210,
      positionY:    295,
      offsetX:    -35,
      offsetY:    -5
    });
    $('mainmenu').insert(aftercareButton.getButton());
    
    // Define eventsButton
    var eventsButton = new navButton({
      targetPage:    'events.php',
      downStateImage:  'events_down.png',
      upStateImage:  'events_up.png',
      positionX:    270,
      positionY:    290,
      offsetX:    -5,
      offsetY:    -160
    });
    $('mainmenu').insert(eventsButton.getButton());
    
    // Define flashButton
    var flashButton = new navButton({
      targetPage:    'tattoo_flash.php',
      downStateImage:  'flash_down.png',
      upStateImage:  'flash_up.png',
      positionX:    340,
      positionY:    265,
      offsetX:    -100,
      offsetY:    -5
    });
    $('mainmenu').insert(flashButton.getButton());
    
    // Define locationsButton
    var locationsButton = new navButton({
      targetPage:    'locations.php',
      downStateImage:  'locations_down.png',
      upStateImage:  'locations_up.png',
      positionX:    420,
      positionY:    285,
      offsetX:    -15,
      offsetY:    -5
    });
    $('mainmenu').insert(locationsButton.getButton());
    
    // Define downloadsButton
    var downloadsButton = new navButton({
      targetPage:    'downloads.php',
      downStateImage:  'downloads_down.png',
      upStateImage:  'downloads_up.png',
      positionX:    500,
      positionY:    290,
      offsetX:    -5,
      offsetY:    -5
    });
    $('mainmenu').insert(downloadsButton.getButton());
    
    // Define celebsButton
    var celebsButton = new navButton({
      targetPage:    'celebrities.php',
      downStateImage:  'celebs_down.png',
      upStateImage:  'celebs_up.png',
      positionX:    575,
      positionY:    290,
      offsetX:    -5,
      offsetY:    -5
    });
    $('mainmenu').insert(celebsButton.getButton());
    
    // Define pressButton
    var pressButton = new navButton({
      targetPage:    'press.php',
      downStateImage:  'press_down.png',
      upStateImage:  'press_up.png',
      positionX:    660,
      positionY:    290,
      offsetX:    -5,
      offsetY:    -5
    });
    $('mainmenu').insert(pressButton.getButton());
    
    // Define moviesButton
    var moviesButton = new navButton({
      targetPage:    'videos/index.html',
      downStateImage:  'movies_down.png',
      upStateImage:  'movies_up.png',
      positionX:    730,
      positionY:    290,
      offsetX:    -5,
      offsetY:    -5
    });
    $('mainmenu').insert(moviesButton.getButton());
    
    // Define awardsButton
    var awardsButton = new navButton({
      targetPage:    'awards.php',
      downStateImage:  'awards_down.png',
      upStateImage:  'awards_up.png',
      positionX:    810,
      positionY:    290,
      offsetX:    -20,
      offsetY:    -5
    });
    $('mainmenu').insert(awardsButton.getButton());
    
    // Define shopButton
    var shopButton = new navButton({
      targetPage:    'xcart/home.php',
      downStateImage:  'shop_down.png',
      upStateImage:  'shop_up.png',
      positionX:    880,
      positionY:    280,
      offsetX:    -55,
      offsetY:    -5
    });
    $('mainmenu').insert(shopButton.getButton());
    
    // Create ad space
    //----------------
    var adSpot = new Element('div');
    var ss = new SlideShow(adSpot, {
      imageFolder:  adImageDir,
      imageArray:    adImages,
      width:      470,
      height:      210,
      animation:    true,
      animationSpeed:  4,
      autoPlay:    true,
      autoPlaySpeed:  5,
      imageClick:    function() {
        window.location = domain + adPages[ss.activeImage];
      }
    });
    adSpot.absolutize();
    adSpot.setStyle({
      top:    '60px',
      left:    '460px'
    });
    $('mainmenu').insert(adSpot);
    
    // Load the logo
    //--------------
    var logo = new Image();
    logo.setStyle({
      margin:    'auto',
      width:     'auto',
      height:    'auto',
      position:  'absolute',
      top:       '58px',
      left:      '10px',
      zIndex:    1,
      display:   'none'
    });
    $('mainmenu').insert(logo);
    logo.onload = function() {
      if (Prototype.Browser.IE)
        logo.show();
      else
        logo.appear({
          from:    .05,
          to:      1,
          duration:  .75
        });
    };
    logo.src = buttonImageDir + 'logo.png';
  }));
})();