// trickery to prevent child elements from messing with our shit
function eventAllowed(event) {
  if(Prototype.Browser.IE) {
    return true;
  }
  
	Event.extend(event);
	var rel = event.relatedTarget, cur = event.currentTarget;     
	Element.extend(rel);     
		Element.extend(cur);      
	if (rel && rel.nodeType == Node.TEXT_NODE) rel = rel.parentNode;   
	if (rel && rel != cur && !rel.descendantOf(cur)) {
		return true;
	} else {
		return false;
	}
}

Event.observe(document, 'dom:loaded', function() {
	var sHeight = 0;	//used to compensate for largest slide in slideshow
	if($('slideshow')) {
		
		app.slides = $$('#slideshow p');
		if(app.slides.length > 1) {
			app.slides.each(function(e,i){
					sHeight = (e.getHeight() > sHeight) ? e.getHeight() : sHeight;
					Event.observe(e, 'click', app.slideClick);
				if(i>0) {
					e.hide();
				}
			});
			
			Event.observe($('nextSlide'), 'click', app.slideNext);
			Event.observe($('prevSlide'), 'click', app.slidePrev);
			
		} else {
			// don't display the arrows
			$('photobrowser').setStyle({visibility: 'hidden'});
		}
	}

  //initialize the content height
  app.contentHeight = $('content').getHeight();
  sHeight+=400;
  
  app.contentHeight = Math.max(app.contentHeight, ($('left').getHeight()+60));
  
  app.contentHeight = (app.contentHeight > (sHeight)) ? app.contentHeight : sHeight;
  
  $$('.submenu-title').each(function(el){
    el.observe('mouseover', function(e){
      this.children[1].addClassName('open');
    });
  });
  
  $$('.submenu-title').each(function(el){
    el.observe('mouseout', function(e){
      //this.up().children[1].addClassName('open');
      
      $$('#left .open').each(function(e){
        Element.removeClassName(e, 'open');
      });
      
    });
  });
  
  Event.observe($$('h1')[0], 'click', function(e){
    window.location = '/'+app.locale;
  } );
  
  // if we're on the landing page and the page closed
  if(!$('content').hasClassName('open')) {
    app.open = false;
    
    // clicking a link will open the content area
    $$('#menu a').each(function(e){
      Event.observe(e, 'click', app.closedMenuClick);    
    });
    
    /*
    // hovering will peek into the content area
    if(Prototype.Browser.IE) {
      Event.observe($('menu'), 'mouseenter', app.closedMenuOver);
      Event.observe($('menu'), 'mouseleave', app.closedMenuOut);
    } else {
      Event.observe($('menu'), 'mouseover', app.closedMenuOver);
      Event.observe($('menu'), 'mouseout', app.closedMenuOut);
    
    }    
    */
    
    
    $$('#gallery-overlay a').each(function(e){
      Event.observe(e, 'click', app.closedMenuClick);    
    });

  }
  
  //resize, and keep resizing
  app.resizeApp();
  Event.observe(window, 'resize', app.resizeApp );
  
});

var app = { 
  ratio:(4/3), 
  open: true, 
  closedWidth: 258,
  peekWidth: 268,
  openWidth: 918,
  contentHeight: 100,
  home: false,
  slides: [],
  currentSlide: 0
};

app.resizeApp = function() {

  var w = document.viewport.getWidth();
  var h = document.viewport.getHeight();
  
  $('left').setStyle({height: h+'px'});
  
  // resize content frame & language box
  if(h > app.contentHeight) {
    $('content').setStyle({height: h+'px'});
  } else {
    $('content').setStyle({height: app.contentHeight+'px'});
  }
  
  // resize gallery container
  $('gallery').setStyle({width: w+'px', height: h+'px'});
  
  if(!app.open) {
    if(w < app.openWidth) {
	    $('gallery-overlay').setStyle({marginLeft: app.closedWidth+40 + 'px'})
    } else {
	    $('gallery-overlay').setStyle({marginLeft: ((w-app.openWidth)/2)+app.closedWidth+40 + 'px'})
	  }
  }
  
  // calculate the smallest image size that will fill the screen
  if(w/h >= app.ratio){
  	h = w/app.ratio;
  } else {
  	w = h * app.ratio;
  }
  
  // scale the image preserving it's aspect
  $$('#gallery img').invoke('setStyle', {width: w+'px', height: h+'px'});
  
};

app.closedMenuOver = function(e) {
  if(!app.open && eventAllowed(e)) {
    app.peek = true;
    $('content').morph({ width: app.peekWidth+'px' }, {duration: 0.2, queue: 'end'});
    e.preventDefault();
  }
};

app.closedMenuOut = function(e) {
  if(!app.open && eventAllowed(e)) {
    $('content').morph({ width: app.closedWidth+'px' }, {duration: 0.2, queue: 'end'});
    e.preventDefault();
  }
};

app.closedMenuClick = function(e) {
  $('gallery-overlay').setStyle({zIndex: -400});
  $('content').morph({ width: app.openWidth+'px' }, {duration: .2, queue: 'end', afterFinish : function() {
    var e = this || window.event; // event object  
    var a = this.target || this.srcElement; // event target
    
    if(a.nodeName != "A") {
       //find the first A element
       a = a.up('a');
     }
      
     // go there
     window.location = a.href;
   
  }.bind(e)});
  
  app.open = true;
  e.preventDefault();
};

app.slideClick = function(e) {
	//find out the url to the large image. if it ends in -s, accept the click and find the -l version
	var src = (e.target || e.srcElement)
	Element.extend(src);
	if(src.nodeName != 'P')	{ src = src.up('p'); }
	src = src.down('img').src;
	

	if(src.substr(src.length-6, 2) == "-s") {
		src = src.replace('-s', '-l');
		
		var p = new Element('p', { 'id': 'spinner' });
		
		//load slide in bg gallery
		var im = new Element('img', {'style': 'display: none', 'alt': ''});		

		Event.observe(im, 'load', function(e){
			if($('spinner')) { $('spinner').remove(); }
			var ea = (e.target || e.srcElement)
			Element.extend(ea);
			Event.observe(ea, 'click', function(f){
				app.slideUnclick(f);
			});
			ea.appear({duration: 0.4});
			app.resizeApp();
		});		
		
		$('gallery').appendChild(im);
		$('gallery').appendChild(p);
		
		im.setAttribute('src', src);
		
		$('wrap').fade({ duration: .4 });
	};
	
app.slideUnclick = function(e) {
		e.target.fade({duration: .4, afterFinish: function(e) {
			e.element.remove();
		}});
		
		$('wrap').appear({ duration: .4 });
	}
	
	e.preventDefault();
};

app.slideNext = function(e) {
	app.slides[app.currentSlide].hide();	
	app.currentSlide++;
	if(app.currentSlide >= app.slides.length) { app.currentSlide = 0; }
	app.slides[app.currentSlide].show();	
	e.preventDefault();
};

app.slidePrev = function(e) {
	app.slides[app.currentSlide].hide();
	app.currentSlide--;
	if(app.currentSlide < 0) { app.currentSlide = (app.slides.length-1); }
	app.slides[app.currentSlide].show();	
	e.preventDefault();
};