// Add addEventListener and removeEventListener for IE 8 (note that IE 8 has 
// no support for the capturing event model, so although this has a useCapture 
// argument, it always behaves as if it were false; the implementation of 
// removeEventListener here will only remove the most recent
// event of the given type that was attached to the given element).
if( !Element.prototype.addEventListener && Element.prototype.attachEvent ) {
    Element.prototype.addEventListener = function(event, listener, useCapture) {
        var target = this;
        if( event == 'mouseout' )
            event = 'mouseleave';
        var handler = function(e) {
            return listener.call(target, e);
        }
        this[event+'_handler'] = handler;
        this.attachEvent('on'+event, handler, false);
    }
    document.addEventListener = Element.prototype.addEventListener;

    Element.prototype.removeEventListener = function(event, listener, useCapture) {
        if( event == 'mouseout' )
            event = 'mouseleave';
        this.detachEvent('on'+event, this[event+'_handler']);
    }
    document.removeEventListener = Element.prototype.removeEventListener;
}

// Return an event object that will persist after the event has been handled
// (which you might use, for instance, if you want to set a timeout in an 
// event handler and use some of the details of the event in this handler).
// Note that the object created, because it is (or might be) a copy of the
// original event, cannot be used to do things like stop the propagation of the
// original event.
if( !document.createEventObject || document.createEvent ) {
    document.createEventObject = function(e) { return e; }
}

// Add stopPropagation for IE 8
if( !Event.prototype.stopPropagation ) {
    Event.prototype.stopPropagation = function() {
        this.cancelBubble = true;
    }
}
       
// Add preventDefault for IE 8
if( !Event.prototype.preventDefault ) {
    Event.prototype.preventDefault = function() {
        this.returnValue = false;
    }
}

// Add getElementsByClassName to document and Element for IE 8
if( !document.getElementsByClassName && document.querySelectorAll ) {
    document.getElementsByClassName = function(className) {
        return this.querySelectorAll('.'+className);
    }
}
if( !Element.prototype.getElementsByClassName && document.getElementsByClassName ) {
    Element.prototype.getElementsByClassName = document.getElementsByClassName;
}


(function() {
    var popupWait = 200;

    var reference = null;
    var timeoutID = null
    var bindLeave = null
    var bindEnter = null;
    
    function showReference(e) {
        var reference_id = this.href.split('#')[1];
        if( reference_id === undefined )
            return true;

        var new_reference = document.getElementById(reference_id);
        if( new_reference === null )
            return;
            
        e.stopPropagation();
        e.preventDefault();

        old_reference = reference;                                
        hideReference(e);          
        reference = new_reference;

        reference.className="show";
        reference.style.top = this.offsetTop + 'px';
        reference.style.left = this.offsetLeft + 'px';

        if( e.type == 'mouseover' ) {
            bindLeave = function(e) { 
                var target = this;
                e = document.createEventObject(e);
                timeoutID = setTimeout( function () { hideReference.call(target, e); }, popupWait );
            }
            bindEnter = function(e) { clearTimeout(timeoutID); }
            reference.addEventListener('mouseout', bindLeave, false);
            reference.addEventListener('mouseover', bindEnter, false);
        }

        return false;
    }

    function hideReference(e) {
        if( reference == null )
            return true;
        /*if( e.type == 'mouseout' || e.type == 'mouseleave' ) */{
            reference.removeEventListener('mouseout', bindLeave, false);
            reference.removeEventListener('mouseover', bindEnter, false);
        }
        reference.className='';
        reference = null;
    }
       
    var citations = document.querySelectorAll('.citation, .footnote');
    for( var i = 0; i < citations.length; i++ ) {
        var citation = citations[i];
        citation.addEventListener('click', showReference, false);
        citation.addEventListener('mouseover', function(e) { 
                var target = this; 
                e = document.createEventObject(e);
                timeoutID = setTimeout( function() { showReference.call(target, e); }, popupWait); 
            }, false);                
        citation.addEventListener('mouseout', function(e) { clearTimeout(timeoutID); }, false);
    }
    document.addEventListener('click', hideReference, false);

    var focused = null; 

    function popUp(event) { 
        event.stopPropagation();
	    if( focused == this ) { 
		    this.className = this.className.replace('open', 'closed');
		    focused = null;
	    } else {
		    if( focused !== null ) { 
			    focused.className = focused.className.replace('open', 'closed');
		    }
		    this.className = this.className.replace('closed', 'open');
		    focused = this;
	    }
    }

    function popDown(event) { 
	    if( focused ) { 
		    focused.className = focused.className.replace('open', 'closed');
		    focused = null;
	    }
    }

    var sections = document.querySelectorAll('#section-map .subsections');
    for(var i = 0; i < sections.length; i++ ) {
	    sections[i].addEventListener('click', popUp, false);
    }
    document.addEventListener('click', popDown, false);
    
    function showFigure(e) {
      e.preventDefault();
      var lightbox = document.createElement('div');
      lightbox.setAttribute('class', 'lightbox');
      lightbox.addEventListener('click', hideFigure);
      var image = document.createElement('img');
      lightbox.appendChild(image);
      image.addEventListener('load', function(e) {
        this.parentElement.style.paddingTop = ((window.innerHeight - this.height) / 2) + "px";
      });
      image.src = this.href;
      document.body.appendChild(lightbox);
    }
    function hideFigure(e) {
      document.body.removeChild(this);
    }
    
    var figures = document.getElementsByClassName('figure');
    for( var i = 0; i < figures.length; i++ ) {
      var figure = figures[i];
      var a = figure.getElementsByTagName('a')[0];
      a.addEventListener('click', showFigure);
    }
    
})();