// addEvent as created by John Resig, http://ejohn.org/projects/flexible-javascript-events/
function addEvent( obj, type, fn ) {
	if ( obj.attachEvent ) {
		obj['e'+type+fn] = fn;
		obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
		obj.attachEvent('on'+type, obj[type+fn]);
	} else
		obj.addEventListener(type, fn, false);
}
function removeEvent(obj, type, fn) {
	if ( obj.detachEvent ) {
		obj.detachEvent( 'on'+type, obj[type+fn] );
		obj[type+fn] = null;
	} else
		obj.removeEventListener(type, fn, false);
}

// Enable flexible Sidenotes in browsers which don't support CSS3 media queries, written by Frans de Jonge
// if this browser is not Opera, apply the Javascript functions
// I couldn't think of a way to test wether the browser supports mediaqueries or not via Javascript and this is true for now anyway...
if (!window.opera) {
	addEvent(window, 'DOMContentLoaded', sidenotes);
	addEvent(window, 'resize', sidenotes);
}

function sidenotes() {
	// declare variables
	var cont, notes, w_medium, w_large, width;
	
	// widths where switching should occur
	// only values you'd have to change on similar setups
	w_medium = 900;
	w_large= 1070;
	
	// assign values to variables
	cont = document.getElementById('container');
	notes = document.getElementsByClassName('sidenote');
	
	if (notes.length > 0) {
		// if Gecko (or Opera as you don't need mediaqueries) get the width this way
		if (window.outerWidth) {
			width = window.outerWidth;
		}
		// otherwise try the IE method
		else if (document.body.offsetWidth) {
			width = document.body.offsetWidth;
		}
		// if that doesn't work then either the browser will support mediaqueries, or use the float version
		else {
			width = 0;
		}
		
		if (width > w_medium) {
			if (width > w_large) {
				cont.style.marginRight = 'auto';
			}
			else {
				cont.style.marginRight = '200px';
			}
			for (var i=0; i<notes.length; i++) {
				if (notes[i].className == 'sidenote') {
					notes[i].className = 'sidenote sidenote2';
				}
			}
		}
		else {
			cont.style.marginLeft = 'auto';
			
			for (var i=0; i<notes.length; i++) {
				if (notes[i].className == ('sidenote sidenote2')) {
					notes[i].className = 'sidenote';
				}
			}
		}
	}
}