var ajaxContentLayers = new Class({
  zIndex: 10000,
  curLayer: null,
  firstLoad: true,
  
  initialize: function(){
    this.curLayer = window.location+'';
  },
  
  registerLinks: function(){
    var self = this, loadedLayer = null;
    /*
     * Hide Nav and First layer then fade in after pause
     */
    $$('#globalnav, .layer').each( function(item){
     item.setStyle('opacity', 0);
     if(item.hasClass('layer')) loadedLayer = item;
     item.loadTimer = setTimeout( function(){
        self.initLayer(item);
      }, 12000);
    });
    /*
     * Attach Click Events to Nav Menu
     */
    $$('#menu a').each(
      function(item, index, array){
        if(item.href == self.curLayer) item.el = loadedLayer;
				if(item.target == '_blank') return true;
        item.addEvent('click', function(){
            self.getLayer.apply(self, [item]);
            return false;
          } 
        );
      }
    )
    /*
     * Open Navigation Link
     */
    $('opennavlink').addEvent('click', function(e){
        self.initLayer($('globalnav'));
        return false;
      });
    //self.activeMenuItem();
  },
  
  initLayer: function(layer){
    var self = this;
    layer.setStyle('opacity', 0);
    clearTimeout(layer.loadTimer);
    if(self.firstLoad && layer.hasClass('layer')){
      self.firstLoad = false;
    }else{
      self.fade(layer);
    }
    /*
     * Handle Layers with Close icons
     */
    self.registerCloseLayer(layer);
    /*
     * Register Toggle text
     */
    self.registerToggleText(layer);
		/*
		 * Register Toggleable sublayers
		 */
		self.registerToggleSubLayer(layer);
    /*
     * Add Splash image on delay
     */
    if(layer.getElement('#layercontact')){
      setTimeout( function(){ layer.getElement('#layercontact').addClass('splash')}, 2000 );
    }
    /*
     * Register Polaroids
     */
    if(layer.getElement('#layerplaatjes')){
      self.registerPolaroids(layer);
    }
  },
  
  getLayer: function(link){
    var self = this;
    self.zIndex++;
    self.showPolaroids(link.el);
    if(self.curLayer == link.href && (link.el.getStyle('opacity') != 0)) return false;
    self.curLayer = link.href;
    self.activeMenuItem();
    /* If Layer Loaded Display and bring to front */
    if(link.el){
      link.el.setStyle('opacity', 0);
      link.el.setStyle('visibility', 'hidden')
      link.el.setStyle('zIndex', self.zIndex);
      link.el.setStyle('position', 'absolute');
      link.el.inject($('wrapper'));
      self.fade(link.el);
      return false;
    }
	
	/* Else Get Layer via Ajax */
    var request = new Request({
      method: 'get',
      url: link.href,
      onComplete:function(a){
        link.el = new Element('div', {'styles':{'visibility': 'hidden', 'position':'absolute','zIndex':self.zIndex}}).set('html', a).inject($('wrapper'));
        self.initLayer(link.el);
		
      }
  	});
    request.send();
    return false;
  },
  
  fade: function(el,out){
		if(out){
			setTimeout(function(){ el.setStyle('display','none'); }, 600);
		}else{
			if( el.getStyle('display') == 'none') el.setStyles({'display':'block','opacity':0});
		}
    /* IE Can't render opacity with fade on transparent pngs, so we just display, all others fade correctly */
    if(Browser.Engine.trident){
      out ? el.setStyle('opacity', 0) : el.setStyle('opacity', 1);
    }else{
      var fade = new Fx.Tween(el, { duration: 600 });
      out ? fade.start('opacity', 1, 0) : fade.start('opacity', 0, 1);
    }
  },
	
  registerCloseLayer: function(layer){
    var icon = layer.getElement('.slideClose'), self= this;
    if(icon) icon.addEvent('click', function(){
      self.fade(layer, true);
    });    
  },
  
  registerToggleText: function(layer){
    var links = layer.getElement('#achterLinks');
    if(!links) return;
    var self = this;
    links.getElements('a').each( function(item){
      item.addEvent('mouseover', function(e){
        self.activateLink.apply(self, [this.getParent()]);
      });
      item.addEvent('mouseout', function(e){
        self.deactivateLink.apply(self, [this.getParent()]);
      });
      item.addEvent('click', function(e){
        self.toggleText.apply(self, [this.getParent()]);
        return false;
      });
    });
  },
	
	registerToggleSubLayer: function(layer){
		var links = layer.getElement('.toggleLinks');
		if(!links) return;
		var self = this;
		var subLayers = links.getNext('div').getChildren().setStyle('display','none');
		self.fade(subLayers[0].setStyles({'display':'block','opacity':0}));
		links.getElements('a').each( function(item, i){
			item.addEvent('click', function(e){
				links.getElements('li').removeClass('liactive');
				item.getParent().addClass('liactive');
				subLayers.setStyle('display','none');
				self.fade(subLayers[i].setStyles({'display':'block','opacity':0}));
        return false;
      });
		});
	},
  
  activateLink: function(obj){
    switch(obj.tagName.toLowerCase()){
     case 'li':
       var h1 = $( obj.id.replace('li','hoofd') ).getElement('a');
       h1.addClass(h1.id);
       obj.addClass('liactive');
     break;
     
     case 'h1':
       var h1 = obj.getElement('a');
       h1.addClass(h1.id);
       $( obj.id.replace('hoofd','li') ).addClass('liactive');
     break;
    }    
  },
  
  deactivateLink: function(obj){
    switch (obj.tagName.toLowerCase()) {
      case 'li':
       var txt = $( obj.id.replace('li','text') );
       var h1 = $( obj.id.replace('li','hoofd') ).getElement('a');
       if(txt.getStyle('display') != 'block'){
         h1.removeClass(h1.id);
         obj.removeClass('liactive');
       }
     break;
     
     case 'h1':
       var txt = $( obj.id.replace('hoofd','text') );
       var h1 = obj.getElement('a');
       if(txt.getStyle('display') != 'block'){
         $(obj.id.replace('hoofd', 'li')).removeClass('liactive');
         h1.removeClass(h1.id);
       }
     break;
    }
  },

  toggleText: function(obj, evt){
    var self = this;
    $$('#achterText p').setStyles({'display':'none'});
    switch(obj.tagName.toLowerCase()){
     case 'li':
       $( obj.id.replace('li','text') ).setStyles({'display':'block'});
       var h1 = $( obj.id.replace('li','hoofd') ).getElement('a');
       h1.addClass(h1.id);
     break;
     
     case 'h1':
       $( obj.id.replace('hoofd','text') ).setStyles({'display':'block'});
       var li = $( obj.id.replace('hoofd','li') );
       li.addClass('liactive');
     break;
    }
    $('achterLinks').getElements('a').each( function(item){
      self.deactivateLink(item.getParent())
    });
  },
  
  activeMenuItem: function(){
    var self = this;
    $$('#menu a').each(
      function(item){
        item.removeClass('active');
        if(item.href == self.curLayer) item.addClass('active');
      }
    );
  },
  
  registerPolaroids: function(layer){
    var polaroids = {}, self= this;
    layer.getElements('.polaroid').each( function(item){
      var img = item.getElement('img');
      img.parentId = item.id;
      /*
       * Build Polaroids Object
       */
      polaroids[item.id] = {};
      polaroids[item.id].src = img.src;
      polaroids[item.id].img = new Image();
      polaroids[item.id].img.src = polaroids[item.id].src.replace('_gr','');
      /*
       * Add Draggable Events to each polaroid
       */
      polaroids[item.id].drag = new Drag(item,{
        handle: img,
        snap: '1',
        onBeforeStart: function(ui){
          ui.setStyle('zIndex', self.zIndex++);
        }
      });
      /*
       * Attach Events to each polaroid
       */
      item.addEvent('mouseover', function(e){
        img.src = polaroids[img.parentId].img.src;
      });
      item.addEvent('mouseout', function(e){
        img.src = polaroids[img.parentId].src;
      });
      item.getElement('.close_polaroid').addEvent('click', function(e){
        self.fade(item, true);
      });
      
    });
  },

  showPolaroids: function(el){
    if(!el) return;
    var self = this;
    if(el.getElement('#layerplaatjes')){
      el.getElements('.polaroid').each(function(item){
        if(item.getStyle('opacity')== 0) self.fade(item);
      });
    }
  }
  
});
	
/*
 * On Dom Ready, Register new Layers Handler and initialise.
 */
window.addEvent('domready',function(){
  var layers = new ajaxContentLayers();
  layers.registerLinks();
});