/*
 * Script for Goldsboro News-Argus Stories
 *
 * Purpose: Manage photos, story options
 *
 * By Alexis Deveria
 * Created on: April 10, 2008
 * Last update on November 17, 2008
 *
 */

function addEvent(obj, evType, fn){
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, false);
    return true;
 } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
 } else {
    return false;
 }
}

/**
 * Sets the size of the popup mask.
 *
 */
function setIE6lightbox(init) {
	
	var mask = document.getElementById('photoMask');
	if(!mask) return;

	var wrap = document.getElementById('photoWrap');
	var img = wrap.getElementsByTagName('img')[0];
	if(!img) return;

	if(init) {
		mask.style.background = 'black';
		mask.style.position = 'absolute';
		mask.style.filter = "alpha(opacity=50)";
		wrap.style.position = 'absolute';
		img.style.visibility = 'visible';
		
		addEvent(window, "resize", setIE6lightbox);
		addEvent(window, "scroll", setIE6lightbox);
	}

	var de = document.documentElement; 

	mask.style.height = de.clientHeight + "px";
	mask.style.width = de.clientWidth + "px";
	mask.style.top = de.scrollTop + "px";
	mask.style.left = de.scrollLeft + "px";
	
	wrap.style.height = img.height + "px";
	wrap.style.width = img.width + "px";
	wrap.style.marginLeft = (-1*img.width/2) + 'px';
	
	wrap.style.top = (de.clientHeight - img.height)/2 + de.scrollTop + 'px';

}


var storyActions = function(){

	document.write('<script type="text/javascript" src="/js/ajax.js"></script>');
	
	//Hide story images to prevent flash of unmerged pictures
	document.write('<style type="text/css">.story-image { display:none; }</style>');

	var albumsData = [];
	var curAlbumData = [];
	var extrablock;
	var albums;
	var photos;
	var photoAlbum = [];
	var curPAphoto = 1;
	this.curOption = '';
	this.curElement = false;
	
	var galurl = '/gallery/main.php?';
	var curFiles = [];
	
	function getAlbumData(anum,dir) {
	  if(http.readyState == 4){
		var string = http.responseText;
		
		var curPhotos = string.split('%%');
		
		//Current is 2 if "next", or total if "previous"
		var curNum = dir==1?2:curPhotos.length;
		
		curAlbumData[anum].pnum = curNum;
		
		for(var i=0;i<curPhotos.length;i++) {
			var phData = curPhotos[i].split('|');
			albumsData[anum][i] = {
				'page_id':phData[0],
				'img_id':phData[1],
				'cutline':phData[2]
			};
		}
		
		showFigure(anum,curNum);
	  }
	}
	
	function getElByClass(cname,el,tag,multi) {
		if(!tag) tag = '*';
		var els = el.getElementsByTagName(tag);
		var arr = [];
		for(var i=0;i<els.length;i++) {
			if(els[i].className.indexOf(cname) != -1) {
				if(!multi) return els[i];
				arr.push(els[i]);
			}
		}
		if(arr.length) {
			return arr;
		} else {
			return false;
		}
	}
	
	function attachEvent(el,anum,dir,ph_only) {
		el.onclick = function() {
			if(!albumsData[anum].length && !ph_only) {
				//Get through AJAX first
				var url = "/admin/storyelements.php?js_photo="+curAlbumData[anum].ids;
				
				http.open("GET", url, true);
				http.onreadystatechange = function() {
					getAlbumData(anum,dir);
				};
				http.send(null);
	
			} else {
				var pnum, total;
				
				if(ph_only) {
					pnum = curPAphoto;
					total = photoAlbum.length;
				} else {
					pnum = curAlbumData[anum].pnum;
					total = albumsData[anum].length;
				}
			
				if(dir==1) {
					pnum++;
					if(pnum > total) {
						pnum = 1;
					} 
				} else {
					pnum--;
					if(pnum <= 0) {
						pnum = total;
					} 
				}
				
				if(ph_only) {
					curPAphoto = pnum;
				} else {
					curAlbumData[anum].pnum = pnum;
				}
				showFigure(anum,pnum,ph_only);
			}
		}
	}
	
	function showFigure(anum,pnum,ph_only) {
		var album = albums[anum];
		var figure = getElByClass('figure',album,'div');
		
		var photo,src,descr,total;
		
		if(ph_only) {
			phHTML = photoAlbum[pnum-1];
			total = photoAlbum.length;
		} else {
			photo = albumsData[anum][pnum-1];
			total = albumsData[anum].length;
			descr = photo.cutline;
			//Shows figure based on data
			var href = galurl + 'g2_itemId=' + photo.page_id;
			src = galurl + 'g2_view=core.DownloadItem&g2_itemId=' + photo.img_id;

			var img = document.createElement('img');
			img.setAttribute('src',src);

		}

		var counter = getElByClass('counter',album,'span');
		counter.innerHTML = pnum + ' / ' + total;
		
		figure.innerHTML = '';
		
		if(ph_only) {
			figure.innerHTML = phHTML;
// 			var im = figure.getElementsByTagName('img')[0];
// 			alert(im.src);
// 			im.style.visibility = 'visible';
			
			setLightBox(figure);
		} else {
			var gallink = document.createElement('a');
			gallink.setAttribute('href',href);
			gallink.appendChild(img);
			
			figure.appendChild(gallink);
			figure.innerHTML += descr;
		}
		
	}
	
	function checkImage(img,fn) {
		if(!img.width) {
			setTimeout(function() {
				checkImage(img,fn);
			},100);
			return false;
		} else {
			fn();
		}
	}
	
	function setLightBox(photo) {
		//Get link
		var link = photo.getElementsByTagName('a')[0];
		
		if(!link) return;
		
		link.onclick = function() {
			var file = link.href;
			
			var img = new Image();
			
			img.src = file;
			
// 			setTimeout(function() {
		
			var mask = document.createElement('div');
			mask.setAttribute('id','photoMask');
			document.body.appendChild(mask);
			mask.style.display = 'block';
			gPopupMask = mask;
			
			var bigimg = document.createElement('img');
			
			var imgwrap = document.createElement('div');
			
			var closebut = document.createElement('span');
			
			// var x_char = document.all?'X':'\u2715';
			var x_char = 'X';
			
			closebut.appendChild(document.createTextNode(x_char));

			bigimg.src = file;
			
			imgwrap.setAttribute('id','photoWrap');
			imgwrap.appendChild(bigimg);
			
			//Fix this!
			imgwrap.appendChild(closebut);

			var closeImage = function() {
				imgwrap.parentNode.removeChild(imgwrap);
				mask.parentNode.removeChild(mask);
			}

			imgwrap.onclick = closeImage;
			mask.onclick = closeImage;

			checkImage(img,function() {
	
				/*@cc_on @*/
				/*@if (@_win32 && @_jscript_version<=5.6)
					document.body.appendChild(imgwrap);

					setIE6lightbox(1);
					setIE6lightbox();
					
					return false;
				/*@end @*/
			
				imgwrap.style.marginLeft = (-1*img.width/2) + 'px';
				imgwrap.style.marginTop = (-1*img.height/2) + 'px';
				
				imgwrap.style.width = img.width + 'px';
				imgwrap.style.height = img.height + 'px';
				
				document.body.appendChild(imgwrap);

			});

			return false;
		}
		
		

	}
	
	function prepAlbums() {
		//Search for galleries
		albums = getElByClass('story-album',extrablock,'div',1);	
		if(!albums) return;
	
		for(var i=0;i<albums.length;i++) {
			var anum = i;

			var galAlbum = getElByClass('phdata',albums[anum],'input')?1:0;
			
			albumsData[anum] = [];
			curAlbumData[anum] = {};
			
			var ids = getElByClass('phdata',albums[i],'input');
			
			if(ids) {
				ids = ids.value;
				//Do for gallery albums
				curAlbumData[anum].ids = ids;
				
				if(ids.indexOf('|') == -1) continue;
				
				//Ajax-y, so must have support
				if(!window.XMLHttpRequest) continue;
				
				total = ids.split('|').length;
				ph_only = false;
			} else {
				//Do for photo album
				total = photoAlbum.length;
				ph_only = true;
			}

			//Show pic count
			var curnum = '1 / ' + total;
			
			var countspan = document.createElement('span');
			countspan.className = 'counter';
			countspan.appendChild(document.createTextNode(curnum));
			
			//Create nextlinks to more pics
			var nextlink = document.createElement('span');
			var prevlink = document.createElement('span');
			var navwrap = document.createElement('p');
			navwrap.className = 'navwrap';
			
			prevlink.className = 'photonav';
			prevlink.appendChild(document.createTextNode('Previous'));
			attachEvent(prevlink,anum,-1,ph_only);
						
			nextlink.className = 'photonav';
			nextlink.appendChild(document.createTextNode('Next'));
			attachEvent(nextlink,anum,1,ph_only);
			
			navwrap.appendChild(prevlink);
			navwrap.appendChild(countspan);
			navwrap.appendChild(nextlink);

			var fc = albums[i].firstChild;
			albums[i].insertBefore(navwrap,fc);
		}
	}
	
	function prepPhotos() {
		//Search for single photos
		photos = getElByClass('story-image',extrablock,'div',1);
		if(!photos) {
			return;
		} else if(photos.length == 1) {
			setLightBox(photos[0]);
			getElByClass('story-image',extrablock,'div').style.display='block';
			return;
		}
	
		var figure = photos[0].innerHTML;
		//Get data from all photos, put in array
		for(var i=0;i<photos.length;i++) {
			var phHTML = getElByClass('figure',photos[i],'div').innerHTML;
			
			photoAlbum[i] = phHTML;
			
			photos[i].parentNode.removeChild(photos[i]);
		}
		
		//Create album block
		var aBlock = document.createElement('div');
		aBlock.className = 'story-album';
		aBlock.innerHTML = figure;
		
		setLightBox(aBlock);

		extrablock.appendChild(aBlock);
		
		//Make smaller if headshot
		if( getElByClass('headshot',extrablock,'div') ) {
			
		}
	}
	
	return {
		start:function() {

			storyActions.url = window.location.href;
			storyActions.title = document.getElementById('content').getElementsByTagName('h2')[0].firstChild.nodeValue;
			
			printActions.init();
			emailActions.init();
			
			if(storyActions.url.indexOf('/obituaries/') == -1) {
				shareActions.init();
			}

			/************
			//EXTRA-BLOCKS
			************/
			
			if(!(extrablock = document.getElementById('story-extras'))) return;
			
			prepPhotos();
			
			prepAlbums();
			

		},
		
		includeFiles:function(scripts) {
			if(inArray(curFiles,scripts)) {
				return true;
			} else {
				curFiles.push(scripts);
			}
			
			var scriptElement = new Array(scripts.length);
			var headTag = document.getElementsByTagName("head")[0];
			var fragment = document.createDocumentFragment();
			
			for(var i=0, count = scripts.length; i < count; i++) {
				scriptElement[i] = document.createElement("script");
				scriptElement[i].setAttribute("src", scripts[i]);
				scriptElement[i].setAttribute("type", "text/javascript");
				fragment.appendChild(scriptElement[i]);
			}
			
			headTag.appendChild(fragment);
		},
		
		togglePanel:function(option,element) {
			var element = element.parentNode;
		
			var panel = option.panel;
		
			if(panel && storyActions.curOption == option) {
				//Made panel and is displayed, so hide
				storyActions.cancel();
			} else {
				if(storyActions.curOption && storyActions.curOption != option) {
					storyActions.cancel();
				}
				storyActions.curOption = option;
				storyActions.curElement = element;
				element.setAttribute('id','curOption');
			
				if(!panel) {
					//Make panel
					panel = document.createElement('div');
					
					panel.innerHTML = option.getHTML();
					
					element.appendChild(panel);
				}
			}
			option.panel = panel;
		},
		
		cancel:function() {
			// Unselect current option
			storyActions.curElement.removeAttribute('id');
			storyActions.curOption = false;
			
			// Set default print fields
			printActions.togglePics('show');
			printActions.toggleWeb('screen');
		}
	}

}();


/*
Ideas for print:

Black&White (use Canvas:
http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html
)
See also:
http://24ways.org/2007/back-to-the-future-of-print

*/

var printActions = function() {
	document.write('<script src="/js/swapstyle.js" type="text/javascript"></script>');
	document.write('<style type="text/css" media="print">'
		+ '#story-options li div, #story-options { display:none; }'
		+ '#header { margin-top:0; }'
		+ '.outer {	border-left-width: 0.5in; border-right-width: 0.5in }'
		+ '.contentWrap { width: 5.5in; }'
		+ '#logo { margin-left: 0.5in; }'
		+ '</style>'
	);
	
	var format;
	var ppics;
	var printOpts = false;
	var mode = 'screen';
	var pics = true;
	var printHref;
	
	function changeSheet(href) {
		var links = document.getElementsByTagName('link');
		
		for(var i=0;i<links.length;i++) {
			if(links[i].getAttribute('media') == 'print') {
				printHref = links[i].getAttribute('href');
				links[i].setAttribute('href',href);
			}
		}

	}

	return {
		panel:false,
	
		init:function() {
			document.onclick = function() {
// 				var de = document.documentElement; 
// 				var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight);	
// 				var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth);

// 				var w = document.getElementById('page').clientWidth;
				
				
// 				alert(w + '/' + window.innerHeight)
				//alert(window.innerHeight + '/' + self.innerHeight + '/' + (de&&de.clientHeight) + '/' + document.body.clientHeight);
			}
		
			var pr = document.getElementById('print');
			pr.parentNode.className = 'printitem';
			pr.href="#";
			
			pr.onclick = function() {
				//show option panel
				
				storyActions.togglePanel(printActions,this);
				
				format = document.getElementById('print-format');
				ppics = document.getElementById('print-pics');
				
				if(format.checked && storyActions.curOption == printActions) {
					printActions.toggleWeb();
				}
				
				if(!ppics.checked && storyActions.curOption == printActions) {
					printActions.togglePics();
				}

				return false;
			}
		},
		
		toggleWeb:function(option) {
			var logo = document.getElementById('logo');
		
			if(mode != 'print' && option != 'screen') {
				changeStyle('Default','PrintPreview');
				
				logo.innerHTML = logo.innerHTML.replace('.png','-print.png');
				mode = 'print';
			} else {
				changeStyle('Default');

				logo.innerHTML = logo.innerHTML.replace('-print.png','.png');
				mode = 'screen';
			}
			return false;
		},
		
		togglePics:function(option) {
			var imgs = document.getElementById('content').getElementsByTagName('img');

			if(option == 'show') {
				var display = 'inline';
			} else {
				var display = pics?'none':'inline';
			}
			
			for (var i=0;i<imgs.length;i++) {
				imgs[i].style.display = display;
			}
			
			pics = (display == 'inline')?true:false;

		},
		
		printPage:function() {
			
			if(!format.checked) {
				changeSheet('#');
			}
			
			window.print();
			
			if(!format.checked) {
				changeSheet(printHref);
			}

			togglePanel();
		},
		
		getHTML:function() {
			return ''
				+ '<fieldset>'
				+ '<label><input id="print-format" onclick="printActions.toggleWeb()" type="checkbox" checked="checked">Format for printer</label>'
				+ '<label><input id="print-pics" onclick="printActions.togglePics()" type="checkbox" checked="checked">Include picture(s)</label>'
				+ '<p><input onclick="printActions.printPage()" type="button" value="Print page">'
				+ '<input onclick="storyActions.cancel()" type="button" value="Cancel"></p>'
				+ '</fieldset>';
		}
	}
}();

var emailActions = function() {
	var emailOpts;
	var action = '/news/email.php';
	
	function isValidEmail(str) {
		return str.match(/^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/);
	}


	return {
		init:function() {
			var em = document.getElementById('email');
			em.href="#";
			em.onclick = function() {
				emailActions.element = this;
				storyActions.togglePanel(emailActions,this);

				return false;
			}
		},
		
		getHTML:function() {
			return ''
				+ '<fieldset class="emailbox">'
				+ '<form action="/news/email.php" method="post" name="em_form">'
				+ '<label>Your name: 	 <input type="text" name="sender_name" /></label>'
				+ '<label>Your e-mail address<span class="required">*</span>: <input type="text" name="sender_email" /></label>'
				+ '<label>Recipients\' e-mail address<span class="required">*</span>: <input type="text" name="receiver_email" /></label>'
				+ '<label><input type="checkbox" name="ccme">Send a copy to my address</label>'
				+ '<label>Personal message:<br /> <textarea name="message" rows="7" cols="45"></textarea></label>'
				+ '<input type="hidden" name="url" value="' + storyActions.url + '" />'
				+ '<input type="hidden" name="title" value="' + storyActions.title + '" />'
				+ '<p><input onclick="emailActions.submit()" type="button" value="Send e-mail">'
				+ '<input onclick="storyActions.cancel()" type="button" value="Cancel"></p>'
				+ '</form>'
				+ '<p><span class="required">*</span> Required</p>'
				+ '</fieldset>';
		},
		
		submit:function() {
			//Validate content
			var f = document.em_form;
			
			var formbits = {
				'sender_name':f.sender_name.value,
				'sender_email':f.sender_email.value,
				'receiver_email':f.receiver_email.value,
				'ccme':(f.ccme.checked?'t':''),
				'message':f.message.value,
				'title':f.title.value,
				'url':f.url.value
			};
			
			if(!isValidEmail(f.sender_email.value)) {
				alert('Your email address is invalid.');
				f.sender_email.focus();
				return false;
			} else if(!isValidEmail(f.receiver_email.value)) {
				alert('Receiver email address is invalid.');
				f.receiver_email.focus();
				return false;
			} 
			
			var params = '';
			
			for(i in formbits) {
				var value = encodeURIComponent(formbits[i]);
			
				params += ('&' + i + '=' + value);
			}
			
			// params.replace('/\&/','');
			
			// return false;
			
			
			
			//Submit through ajax if possible
			if (!http) return true;
			
			http.open("POST", action, true);
			http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			http.setRequestHeader("Content-length", params.length);
			http.setRequestHeader("Connection", "close");
			
			http.onreadystatechange = function() {//Call a function when the state changes.
				if(http.readyState == 4 && http.status == 200) {
					f.reset();
					storyActions.cancel();
					alert(http.responseText);
				}
			}
			http.send(params);
			

			
			return false;
		}
	}
}();

var shareActions = function() {
	return {
		panel:false,
		
		init:function() {
			var li = document.createElement('li');
			var a = document.createElement('a');
			
			a.href = '#Share';
			a.setAttribute('id','share');
			a.appendChild(document.createTextNode('Bookmark / Share'));
			var sa = document.getElementById('story-options');
			
			li.appendChild(a);
			sa.appendChild(li);
			
			a.onclick = function() {
				storyActions.togglePanel(shareActions,this);
				
				return false;
			}
		},
		getHTML:function() {
			var sites = [
				['del.icio.us','del.icio.us/post?url',0],
				['Digg','digg.com/submit?url',0],
				['Facebook','www.facebook.com/sharer.php?u','t'],
				['Reddit','reddit.com/submit?url',0],
				['MySpace','myspace.com/Modules/PostTo/Pages/?u','t'],
				['StumbleUpon','www.stumbleupon.com/submit?url',0],
				['Newsvine','www.newsvine.com/_wine/save?u','h'],
				['Propeller','propeller.com/submit/?U','T'],
				['Mixx','mixx.com/submit/story?page_url',0]
			];
			var list = '';
			
			for(var i=0, site; site=sites[i];i++) {
				var name = site[0];
				var urlq = site[1];
				var titleq = site[2]?site[2]:'title';
				var file = site[0].replace(/[^a-zA-Z0-9]/g,'');
				file = file.toLowerCase();
				var img = '/images/icons/' + file + '.png';

				var url = 'http://' + urlq + '=' 
					+ encodeURIComponent(storyActions.url) 
					+ '&' + titleq + '=' + encodeURIComponent(storyActions.title);
					
					
				
				list += ('<li><a href="'+url+'" target="_blank"><img src="' + img + '" alt="" width="16" height="16" />'+name+'</a></li>');
			}
			
			return '<fieldset class="sharebox">'
				+ '<ul>' + list + '</ul>'
				+ '<input onclick="storyActions.cancel()" type="button" value="Cancel">'
				+ '</fieldset>';
		}
	}
}();


function inArray(arr,value) {
    var i;
    for (i=0; i < arr.length; i++) {
        if (arr[i] === value) {
            return true;
        }
    }
    return false;
};

// Dean Edwards/Matthias Miller/John Resig

function init() {
  // quit if this function has already been called
  if (arguments.callee.done) return;

  // flag this function so we don't do the same thing twice
  arguments.callee.done = true;

  // kill the timer
  if (_timer) clearInterval(_timer);

  storyActions.start();
};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
  document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
  var script = document.getElementById("__ie_onload");
  script.onreadystatechange = function() {
    if (this.readyState == "complete") {
      init(); // call the onload handler
    }
  };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = init;