var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();



var ArticlePopup = Class.create();
ArticlePopup.prototype = {
	// -----------
	// Attributes
	// -----------
	my_iframe : null,
	my_iframe_wrapper : null,
	my_overlay : null,
	my_close_button : null,
	my_window_height : null,
	my_window_width : null,
	my_iframe_height: null,

	// -----------
	// Functions
	// -----------

	initialize : function(anchor_class_name){
		//console.log('initialize() call started');

		// Grab links on page by classname
		var my_links = $$('a.'+anchor_class_name);
		//console.log(my_links);

		if (my_links != null && my_links.size() > 0) {

			//console.log('Adding iframe to the DOM...');
			my_iframe = document.createElement('iframe');
			my_iframe.id = anchor_class_name + "_iframe";
			my_iframe.name = anchor_class_name + "_iframe";
			my_iframe.style.display = "none";
			my_iframe.style.overflow = "hidden";
			my_iframe.style.border = "0";
			my_iframe.scrolling = "no";
			my_iframe.frameBorder = '0';
			my_iframe.style.padding = "0";
			my_iframe.style.margin = "0 0 0 -401px";
			my_iframe.style.width = "802px";
			my_iframe.style.height = "646px";
			my_iframe.style.position="absolute";
			my_iframe.style.zIndex = '999';
			my_iframe.style.top = '500px';
			my_iframe.style.left = '50%';
			my_iframe.style.backgroundColor = "transparent";
			Event.observe(my_iframe, 'load', this.my_iframe_onload);
			this.reset_iframe_content();
			document.body.appendChild(my_iframe);

			//console.log('Adding overlay to the DOM...');
			my_overlay = document.createElement('div');
			my_overlay.id = anchor_class_name + "_overlay";
			my_overlay.style.display = 'none';
			my_overlay.style.height = '100%';
			my_overlay.style.top = '0';
			my_overlay.style.left = '0';
			my_overlay.style.width = '100%';
			my_overlay.style.zIndex = '998';
			my_overlay.style.backgroundColor = '#000000';
			//my_overlay.style.cursor = 'pointer';
			Event.observe(my_overlay, 'click', this.close_popup.bindAsEventListener(this));
			document.body.appendChild(my_overlay);

			//console.log('Adding close button to the DOM');
			my_close_button = document.createElement('div');
			my_close_button.id = anchor_class_name + "_close_button";
			my_close_button.innerHTML = 'Close'
			my_close_button.style.display = "none";
			my_close_button.style.margin = "0 0 0 -401px";
			my_close_button.style.width = "802px";
			my_close_button.style.height = "13px";
			my_close_button.style.lineHeight = "13px";
			my_close_button.style.textIndent = "-9999px";
			my_close_button.style.position="absolute";
			my_close_button.style.zIndex = '999';
			my_close_button.style.left = '50%';
			my_close_button.style.top = '487px';
			my_close_button.style.background = 'transparent url(http://img.fannation.com/images/aggregated_articles/top-bar.gif) no-repeat scroll 0 0';
			my_close_button.style.cursor = 'pointer';
			Event.observe(my_close_button, 'click', this.close_popup.bindAsEventListener(this));
			document.body.appendChild(my_close_button);

			//console.log('Adding onclick events to the relevant links');
			my_links.each(
				function(my_link) {
					Event.observe(my_link, 'click', this.process_click.bindAsEventListener(this))
				}.bind(this)
			);
		}

		//console.log('initialize() call finished');
	},


	process_click: function(event){
		var this_link = Event.findElement(event, 'A');
		if ('A' == this_link.tagName) {
			this.open_popup(this_link.href);
			event.stop('click');
			return false;
		}
	},

	open_popup: function(popup_url){
		//console.log('open_popup called');
		my_iframe.src = popup_url;
		this.show_popup();
		this.show_overlay();
		my_iframe.scrollTo();
		window.scrollBy(0,-20);
		//this.show_close_button();
	},

	show_overlay: function(){
		my_overlay.style.position = "fixed";
		my_overlay.style.opacity = 7/10;
		my_overlay.style.filter = 'alpha(opacity=' + 70 + ')';

		// Some custom styles for IE
		if (BrowserDetect.browser == 'Explorer') {

			// Let's calculate window sizes
			my_window_height = 0;
			my_window_width = 0;
			var xScroll, yScroll;

			if (window.innerHeight && window.scrollMaxY) {	
				xScroll = document.body.scrollWidth;
				yScroll = window.innerHeight + window.scrollMaxY;
			} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
				xScroll = document.body.scrollWidth;
				yScroll = document.body.scrollHeight;
			} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
				xScroll = document.body.offsetWidth;
				yScroll = document.body.offsetHeight;
			}

			var windowWidth, windowHeight;
			if (self.innerHeight) { // all except Explorer
				windowWidth = self.innerWidth;
				windowHeight = self.innerHeight;
			} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
				windowWidth = document.documentElement.clientWidth;
				windowHeight = document.documentElement.clientHeight;
			} else if (document.body) { // other Explorers
				windowWidth = document.body.clientWidth;
				windowHeight = document.body.clientHeight;
			} 

			// for small pages with total height less then height of the viewport
			if(yScroll < windowHeight){
				my_window_height = windowHeight;
			} else { 
				my_window_height = yScroll;
			}

			// for small pages with total width less then width of the viewport
			if(xScroll < windowWidth){	
				my_window_width = windowWidth;
			} else {
				my_window_width = xScroll;
			}

			// Use calculated sizes to explcitily set window sizes!
			var my_html = document.getElementsByTagName('html');
			my_html[0].style.width = my_window_width + 'px';
			my_html[0].style.height = my_window_height + 'px';
			my_html[0].style.overflow = 'scroll';

			document.body.style.width = my_window_width + 'px';
			document.body.style.height = my_window_height + 'px';

			my_overlay.style.height = my_window_height + 'px';
			my_overlay.style.width = my_window_width + 'px';
			my_overlay.style.position = "absolute";
		}

		// Finally, show the overlay!
		my_overlay.style.display = 'block';
	},

	show_popup: function(){
		my_iframe.style.display = "block";
		my_iframe.style.visibility="visible";
	}.bind(this),

	show_close_button: function(){
		my_close_button.style.display = "block";
		my_close_button.style.visibility="visible";
	},

	close_popup: function(){
		//console.log('close_popup called');
		my_iframe.style.display = "none";
		my_overlay.style.display = "none";
		my_close_button.style.display = "none";

		// Restore defaults for IE
		if (BrowserDetect.browser == 'Explorer') {
			this.fix_ie('auto', 'auto');
		};
		this.reset_iframe_content();
	},

	fix_ie: function(height, overflow){
		//console.log('fix_ie called');
		var my_body = document.getElementsByTagName('body');
		my_body[0].style.height = height;
		my_body[0].style.overflow = overflow;
		
		var my_html = document.getElementsByTagName('html');
		my_html[0].style.height = height;
		my_html[0].style.overflow = overflow;
	},

	reset_iframe_content: function(){
		my_iframe.src = ""
	},
	
	my_iframe_onload: function(){
		my_close_button.style.display = my_iframe.style.display;
		my_close_button.style.visibility = my_iframe.style.visibility;
	}

};