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

	var souths = $$('.southslide');
  var wScrollW = window.getScrollWidth();
  var wScrollH = window.getScrollHeight();
  var cp = 8;
  
  var container = new Element('div',{
    'styles': {
    'display': 'block',
    'overflow': 'hidden',
    'position': 'absolute',
		'width': '990px',
		'margin-left': 'auto',
    'padding': cp + 'px'
    }
  });
  container.injectInside(document.body);
  
  var fader = new Element('div',{
    'styles': {
    'display': 'block',
    'position': 'absolute',
    'top': '0px',
    'width': '980px',
    'height': '100%',
    'background': '#000',
    'opacity': '0'
    }
  });
  fader.injectInside(container);
  
  var div1 = new Element('div',{
    'styles':{
      'position': 'relative',
      'float': 'left',
      'border': '0px solid #FFF',
      'opacity': 0,
      'z-index': 2
    }
  });
  
  var div2 = new Element('div',{
    'styles':{
      'position': 'relative',
      'float': 'left',
      'border': '0px solid #FFF',
      'opacity': 0,
      'z-index': 2
    }
  });
  
  var close = new Element('div',{
    'styles':{
      'position': 'absolute',
      'top': cp + 'px',
      'right': cp + 'px',
      'padding': '0px',
      'margin': '0px',
      'font-family': 'Helvetica',
      'font-size': '16pt',
      'font-weight': 'bold',
			'color': '#FFF',
      'border': '0px solid #FFF',
      'opacity': 1,
      'cursor': 'pointer',
      'z-index': 5
    }
  });
  close.setText('x');
  close.injectInside(fader);
  div1.injectInside(container);
  div2.injectInside(container);
  
  var fxc = new Fx.Styles(container, {duration: 1000, transition: Fx.Transitions.Expo.easeOut, fps: 100});
  var fxcl = new Fx.Styles(container, {duration: 1000, transition: Fx.Transitions.Expo.easeOut, fps: 100});
  var fx1 = new Fx.Styles(div1, {duration: 800, transition: Fx.Transitions.Expo.easeOut, fps: 100});
  var fx2 = new Fx.Styles(div2, {duration: 800, transition: Fx.Transitions.Expo.easeOut, fps: 100});
      
  souths.each(function(s, i){
    s.addEvent('click', function(e){
    container.setStyle('display', 'block');
    el = new Event(e).stop();
    div1.empty();
    div2.empty();
    
    var wW = window.getWidth();
    var wH = window.getHeight();
    var wScrollT = window.getScrollTop();
    var wScrollL = window.getScrollLeft();
    

    if(s.getAttribute('rel') != 'divs'){
    
    var img = new Asset.image(this.getAttribute('href'), {
    onload:function(){
    
      var cS;
      div1.adopt(img);
      div2.innerHTML = '<h3>' + s.getAttribute('title') + '</h3>' + '<p>' + s.getAttribute('rel') + '</p>';


    if(s.getAttribute('rev') == 'Bottom'){
      container.setStyles({display: 'block', opacity: 1, width: wScrollW - cp*2 + 'px', top: wScrollT + wH + 'px', left: '0px', right: 'auto'});
      div1.setStyles({opacity: 0});
      div2.setStyles({opacity: 0, width: wScrollW - cp*4 - img.width + 'px', left: cp + 'px'});
      close.setStyles({top: cp + 'px', bottom: 'auto', right: cp + 'px'});
  
      cS = container.getSize();
      fxc.start({'top': wScrollT + wH - cS.size.y + 'px'}).chain(function(){
        fx1.start({'left': [-img.width, 0], opacity: 1}).chain(function(){
          fx2.start({'top': [-cS.size.y, 0], opacity: 1});
        });
      });
    }// If slide is loaded from the Bottom
    
    if(s.getAttribute('rev') == 'Top'){
      container.setStyles({display: 'block', opacity: 1, width: wScrollW - cp*2 + 'px', top: wScrollT - wH + 'px', left: '0px', right: 'auto'});
      div1.setStyles({opacity: 0});
      div2.setStyles({opacity: 0, width: wScrollW - cp*4 - img.width + 'px', left: cp + 'px'});
      close.setStyles({top: cp + 'px', bottom: 'auto', right: cp + 'px'});
  
      cS = container.getSize();
      fxc.start({'top': wScrollT + 'px'}).chain(function(){
        fx1.start({'left': [-img.width, 0], opacity: 1}).chain(function(){
          fx2.start({'top': [-cS.size.y, 0], opacity: 1});
        });
      });
    }// If slide is loaded from the Top
    
    if(s.getAttribute('rev') == 'Right'){
      container.setStyles({display: 'block', opacity: 1, width: img.width + 2 + 'px', top: wScrollT + 'px', left: 'auto', right: -img.width + 'px'});
      div1.setStyles({opacity: 0});
      div2.setStyles({opacity: 0, width: img.width + 'px', left: 0 + 'px'});
      close.setStyles({top: 'auto', bottom: 0 + 'px', right: cp + 'px'});
  
      cS = container.getSize();
      fxc.start({'right': 0 + 'px'}).chain(function(){
        fx1.start({'left': [-img.width, 0], opacity: 1}).chain(function(){
          fx2.start({'top': [-cS.size.y, 0], opacity: 1});
        });
      });
    }// If slide is loaded from the Right 

    if(s.getAttribute('rev') == 'Left'){
      container.setStyles({display: 'block', opacity: 1, width: img.width + 2 + 'px', top: wScrollT + 'px', left: -img.width + 'px', right: 0 + 'px'});
      div1.setStyles({opacity: 0});
      div2.setStyles({opacity: 0, width: img.width + 'px', left: 0 + 'px'});
      close.setStyles({top: 'auto', bottom: 0 + 'px', right: cp + 'px'});
  
      cS = container.getSize();
      fxc.start({'left': 0 + 'px'}).chain(function(){
        fx1.start({'left': [-img.width, 0], opacity: 1}).chain(function(){
          fx2.start({'top': [-cS.size.y, 0], opacity: 1});
        });
      });
    }// If slide is loaded from the Left
  
  }});// Img Loaded
  }// If image
  else{
    var cS;
    var div12 = (s.getAttribute('alt')).split(",");
    //alert(div12[0] + ' - ' + div12[1]);
    var dd1 = $(div12[0]).clone();
    var dd2 = $(div12[1]).clone();
    dd1.setStyle('display', 'block');
    dd2.setStyle('display', 'block');
    
    div1.adopt(dd1);
    div2.adopt(dd2);
    
    if(s.getAttribute('rev') == 'Top'){
		  var cScrollW = fader.getSize().size.x;
			var cent = (wScrollW - cScrollW)/2;
			//alert('w: ' + wScrollW + ' - c: ' + cScrollW + ' = ' + (wScrollW - cScrollW));
			//alert(cent);
			//alert('d1: ' + dd1.getSize().size.x + ' / d2: ' + dd2.getSize().size.x);
      
      container.setStyles({display: 'block', opacity: 1, width: 970 + 'px', top: wScrollT - wH + 'px', left: cent + 'px', right: 'auto', 'border': '0px solid #336699'});
      //container.setStyles({display: 'block', opacity: 1, float: 'left', top: wScrollT - wH + 'px'});
			fader.setStyles({left: 0 + 'px', opacity: 0.9});
      div1.setStyles({opacity: 0, width:dd1.getSize().size.x});
      div2.setStyles({opacity: 0, width:dd2.getSize().size.x, left: cScrollW/2 + cp - dd1.getSize().size.x + 'px'});
      close.setStyles({top: 'auto', bottom: cp + 'px', right: cp + 'px'});

      cS = container.getSize().size; 
      fxc.start({'top': wScrollT + 'px'}).chain(function(){
        fx1.start({'left': [-dd1.getSize().size.x, (cScrollW/2 - dd1.getSize().size.x - cp)], opacity: 1}).chain(function(){
          fx2.start({'top': [-cS.y, 0], opacity: 1});
        });
      });
    }// If slide is loaded from the Top
  
  }
   
  });// Souths(s) addEvent    
  });// Souths listing
  
  close.addEvent('click', function(){
    fxcl.start({'opacity': 0}).chain(function(){
      container.setStyle('display', 'none');
    });
  });

}); // Domready