(function() {

var Pop = new Popup('http://p.webshots.net/css/photoBubble.css');
var Album = $('album');
var Media = $('media');

function setNav(htm) {
	for (var list = Album.getElementsByTagName('dl'), i = list.length; i--;) {
		if (hasClass(list[i], 'nav')) list[i].getElementsByTagName('dd')[0].innerHTML = htm;
	}
}

function onInfoView(e) {
	delCookie('albumview');
	delClass(Album, 'grid');
	addClass(Album, 'info');
	delEvent(Media, 'mouseover', onMediaHover);
	if (e) setNav(onInfoView.nav);
}

function onGridView(e) {
	setCookie('albumview', 'grid');
	delClass(Album, 'info');
	addClass(Album, 'grid');
	addEvent(Media, 'mouseover', onMediaHover);
	if (e) setNav(onGridView.nav);
}

function onMediaHover(e) {
	for (var a = e.srcElement || e.target; a && a.tagName != 'A'; a = a.parentNode);
	if (!a || !hasClass(a, 'thumb')) return;
	var img = a.getElementsByTagName('img')[0];
 	var list = a.parentNode.parentNode.parentNode.getElementsByTagName('li');

 	var title = img.alt ? img.alt.replace(/[&<>]/g, function(c) { return ({'&': '&amp;', '<': '&lt;', '>': '&gt;'})[c] || c; }) : '(none)';
	/*@cc_on /*@if (@_jscript_version)
	if (0)
	/*@end @*/
	title = title.replace(/([^\s&]{20})/g, '$1&#8203;')

	var info = new PopupInfo;
	info.html = '\
		<table>\
			<tr><td class="tl"></td><td class="t"></td><td class="tr"></td></tr>\
			<tr>\
				<td class="l"></td>\
				<td class="m">\
					<ul>\
						<li class="albumTitle"><span>Title: </span><a href="' + encodeURI(a.href) + '" target="_parent" class="albumTitle">' + title + '</a></li>\
						<li class="editDate">' + list[0].innerHTML + '</li>\
						<li>' + list[1].innerHTML.replace(/<a /i, '<a target="_parent" ') + '</li>\
					</ul>\
				</td>\
				<td class="r"></td>\
			</tr>\
			<tr><td class="bl"></td><td class="b"></td><td class="br"></td></tr>\
		</table>\
		<div class="tail"></div>';

	/*@cc_on /*@if (@_jscript_version >= 5.5)
	info.css = 'http://p.webshots.net/css/iePhotoBubble.css';
	/*@end @*/
	info.classPrefix = '';
	info.origin = 'element';
	info.position = 'horizontal';
	this.showDelay = 250;
	info.offset = [8,35];
	info.keepInView = false;
	Pop.create(a, e, info);
}

addEvent($('info-btn'), 'click', onInfoView);
addEvent($('grid-btn'), 'click', onGridView);

addEvent(Media, 'click', function(e) {
	for (var el = e.srcElement || e.target; el && el.tagName != 'A'; el = el.parentNode);
	if (hasClass(el, 'delete-item')
		&& !confirm("Are you sure you want to delete the " + (hasClass(el.parentNode, 'video') ? 'video' : 'photo')
			+ " '" + el.parentNode.parentNode.getElementsByTagName('img')[0].alt + "'?")) {
		haltEvent(e);
	}
});

var curnav = Album.getElementsByTagName('dd')[0].innerHTML;
var altnav = $('alt-nav');
altnav = altnav.value || altnav.firstChild.nodeValue.replace(/<strong>[\s\S]+?>(\d+)[\s\S]+<\/strong>/i, '<strong>$1</strong>');

if (hasClass(Album, 'info')) {
	onInfoView.nav = curnav;
	onGridView.nav = altnav;
} else {
	onInfoView.nav = altnav;
	onGridView.nav = curnav;
	onGridView(false);
}

curnav = null;
altnav = null;

})()