if (!Ascribe) {
  var Ascribe = { }; 
}

Ascribe.Marks = {
	toggleMarks : function(klass) {
			Event.observe(window, 'load', function() {	
				$$(klass).each( function(e) {
					var wrapper = $('mark-'+e.id.gsub('toggle-',''));
					Event.observe(e, 'mouseover', function() {	
						Ascribe.Marks.showMark(wrapper);
					});	 
					Event.observe(e, 'mouseout', function() {	
						Ascribe.Marks.closeMark(wrapper);
					});	 
					Event.observe(wrapper, 'mouseover', function() {	
						Ascribe.Marks.showMark(wrapper);
					});	 
					Event.observe(wrapper, 'mouseout', function() {	
						Ascribe.Marks.closeMark(wrapper);
					});	
				});
				
        $$('a[class="other-context"]').each(function(link){
          if(link.readAttribute('href') != '' && link.readAttribute('href') != '#'){
            link.writeAttribute('target','_blank');
          }
        });
			});
      // console.log('done attaching observers');
	},
	
	showMark : function(wrapper) {
		wrapper = $(wrapper);
		
		if (wrapper.visible()) {
			return;
		}
		this.calculatePosition(wrapper);
		wrapper.show();
		wrapper.up('li').setStyle('z-index: 20;');
	},
	
	closeMark : function(wrapper) {
		wrapper = $(wrapper);
		
		if (!wrapper.visible()) {
			return;
		}	
		
		wrapper.hide();
		wrapper.up('li').setStyle('z-index: 10;');
	}, 
	
	calculatePosition : function(wrapper) {
		wrapper = $(wrapper);
    var generatedIdPortion = wrapper.id.match(/-(\d+)$/)[1];
    var toggle = $("toggle-" + generatedIdPortion);
    var x = toggle.cumulativeOffset()[0]
    var y = toggle.getDimensions().height + toggle.cumulativeOffset()[1]
    var wrapperWidth = 410;
    var wrapperHeight = 160;
		var documentWidth = document.width || document.body.scrollWidth;
		var documentHeight = document.height || document.body.scrollHeight;
		
    // console.log(x);
    // console.log(y);
    // console.log(wrapperWidth);
    // console.log(wrapperHeight);
    // console.log(documentWidth);
    // console.log(documentHeight);
    // console.log('changing class');
    		
		if(x - wrapperWidth > 0 && y + wrapperHeight < documentHeight) {
		  wrapper.addClassName("bottom-left");
		} else if (x + wrapperWidth < documentWidth && y + wrapperHeight < documentHeight) {
		  wrapper.addClassName("bottom-right");
		} else if (x + wrapperWidth < documentWidth && y - wrapperHeight > 0) {
		  wrapper.addClassName("top-right");
		} else {
		  wrapper.addClassName("top-left");
		}
	}
}