function htmlencode(str)
{
	if ( !str )
		return str;
	return str.replace('&','&amp;').replace('<', '&lt;').replace('>', '&gt;');
}

var Browser =
{
	AjaxPath: 'common/',
	Archives: null,
	FadeTime: 500,
	Back: function()
	{
		if ( Browser.Selection.SelectedChapter )
			Browser.UnselectChapter();
		else if ( Browser.Selection.SelectedArchive )
			Browser.UnselectArchive();
		else
			$.colorbox.close();
	},
	Toggle: function(archiveIDs)
	{
		Browser.Selection =
		{
			OrigArchiveNode: null,
			CloneArchiveNode: null,
			OrigArchiveNodePos: null,

			ChaptersBlock: null,

			OrigChapterNode: null,
			CloneChapterNode: null,
			OrigChapterNodePos: null
		};

		function RefreshAvailableArchives()
		{
			var sb = [];
			var i, l = Browser.Archives.length;
			for ( i = 0 ; i < l; i++ )
			{
				var archive = Browser.Archives[i];
				if ( !archiveIDs || $.inArray(archive.ID, archiveIDs) >= 0 )
				{

					sb.push('<div class="browser_item" data-index="', i, '" onclick="Browser.SelectArchive(this);"><div><img src="',
						htmlencode(archive.Thumbnail), '" alt="Thumbnail"/></div><div>', htmlencode(archive.Name),'</div></div>');
				}
			}
			var elem = $('#archives');
			elem.css('background-image', 'none');
			elem.html(sb.join(''));
		}

		$.colorbox({
			html:'<div id="content_browser"><div id="browser_shield" class="browser_group" style="display:none;"></div><div id="browser_back" onclick="Browser.Back();">Back</div><div id="archives" class="browser_group"></div></div>',
			open:true,
			transition:'elastic',
			onComplete: function()
			{
				if ( !Browser.Archives )
				{
					$.ajax(Browser.AjaxPath+'listarchives.php', { dataType: 'text', success: function(data)
					{
						Browser.Archives = eval(data);
						imgs = [];
						var i;
						for ( i = Browser.Archives.length-1; i >= 0; i-- )
						{
							imgs.push(Browser.Archives[i].Thumbnail);
						}
						Browser.PreloadImages(imgs, RefreshAvailableArchives);
					}});
				}
				else
					RefreshAvailableArchives();
			}
		});
	},
	ShowShield: function()
	{
		$('#browser_shield').css('display', 'block');
	},
	HideShield: function()
	{
		$('#browser_shield').css('display', 'none');
	},
	Selection:
	{
		SelectedArchive: null,
		SelectedChapter: null,
	
		OrigArchiveNode: null,
		CloneArchiveNode: null,
		OrigArchiveNodePos: null,
		
		OrigChapterNode: null,
		CloneChapterNode: null,
		OrigChapterNodePos: null
	},
	SelectArchive:function(me)
	{
		Browser.ShowShield();
		me = $(me);
		var clone = me.clone();
		var id = me.attr('data-id');
		var archive = Browser.Archives[parseInt(me.attr('data-index'))];
		var chapterElem = $('<div>');
		var pos = me.position();
		var height = me.height();
		var outerHeight = me.outerHeight();

		chapterElem.addClass('browser_group');
		chapterElem.css('display', 'none');
		chapterElem.attr('id', 'chapters');
		$('#content_browser').append(chapterElem);
		
		pos.left += 10;
		pos.top += 10;
		
		Browser.Selection.SelectedArchive = archive;
		Browser.Selection.OrigArchiveNode = me;
		Browser.Selection.CloneArchiveNode = clone;
		Browser.Selection.OrigArchiveNodePos = pos;
		
		clone.css({
			position: 'absolute',
			top: pos.top,
			left: pos.left,
			width: me.width(),
			height: height,
			margin: 0
		});
		clone.attr('onclick', '');
		clone[0].onclick = null;
		clone.click(Browser.UnselectArchive);
		
		chapterElem.css({
			top: outerHeight+20,
			height: 520-outerHeight
		});
		chapterElem.empty();
		chapterElem.css('background-image', '');
		
		var i, imgs=[];
		for ( i = archive.Chapters.length-1; i >= 0; i-- )
			imgs.push(archive.Chapters[i].Thumbnail);
		Browser.PreloadImages(imgs, function()
		{
			var sb = [];
			var i, l = archive.Chapters.length;
			for ( i = 0 ; i < l; i++ )
			{
				var chapter = archive.Chapters[i];
				sb.push('<div class="browser_item" data-index="', i, '" onclick="Browser.SelectChapter(this);"><div><img src="',
					htmlencode(chapter.Thumbnail), '" alt="Thumbnail"/></div><div>',chapter.Number,': ', htmlencode(chapter.Name),'</div></div>');
			}
			chapterElem.css('background-image', 'none');
			chapterElem.html(sb.join(''));
		});
		
		$('#content_browser').append(clone);
		me.css('visibility', 'hidden');
		clone.animate({ top: 10, left: 490-me.outerWidth()}, Browser.FadeTime);
		$('#archives').fadeOut(Browser.FadeTime/2, function(){ chapterElem.fadeIn(Browser.FadeTime/2, function() { Browser.HideShield(); }); });
		
	},
	UnselectArchive: function()
	{
		Browser.ShowShield();
		
		Browser.Selection.CloneArchiveNode.animate(
			{top: Browser.Selection.OrigArchiveNodePos.top, left: Browser.Selection.OrigArchiveNodePos.left},
			Browser.FadeTime);
		
		function FadeInArchives()
		{
			$('#pages').remove();
			$('#chapters').remove();
			$('#archives').fadeIn(Browser.FadeTime/2,
				function()
				{
					Browser.Selection.CloneArchiveNode.remove();
					Browser.Selection.OrigArchiveNode.css('visibility', 'visible');
					Browser.HideShield();
					
					Browser.Selection.OrigArchiveNode = null;
					Browser.Selection.CloneArchiveNode = null;
					Browser.Selection.OrigArchiveNodePos = null;
					Browser.Selection.SelectedArchive = null;
				});
		}
		
		if (Browser.Selection.OrigChapterNode)
		{
			Browser.Selection.OrigChapterNode.css('visibility', 'visible');
			Browser.Selection.CloneChapterNode.fadeOut(Browser.FadeTime/2);
			$('#pages').fadeOut(Browser.FadeTime/2, FadeInArchives);
			
			Browser.Selection.OrigChapterNode = null;
			Browser.Selection.CloneChapterNode = null;
			Browser.Selection.OrigChapterNodePos = null;
			Browser.Selection.SelectedChapter = null;
		}
		else
		{
			$('#chapters').fadeOut(Browser.FadeTime/2, FadeInArchives);
		}
	},
	SelectChapter: function(me)
	{
		me = $(me);
		var clone = me.clone();
		var chapter = Browser.Selection.SelectedArchive.Chapters[parseInt(me.attr('data-index'))];
		var pos = me.position();
		var height = me.height();
		var pagesElem = $('<div>');		
		var outerHeight = Math.max(me.outerHeight(), Browser.Selection.CloneArchiveNode.outerHeight());

		pagesElem.addClass('browser_group');
		pagesElem.css('display', 'none');
		pagesElem.attr('id', 'pages');
		$('#content_browser').append(pagesElem);
		
		pos.left += 10;
		pos.top += parseInt($('#chapters').css('top').replace('px',''))+10;
		
		Browser.Selection.OrigChapterNode = me;
		Browser.Selection.CloneChapterNode = clone;
		Browser.Selection.OrigChapterNodePos = pos;
		Browser.Selection.SelectedChapter = chapter;
		
		clone.css({
			position: 'absolute',
			top: pos.top,
			left: pos.left,
			width: me.width(),
			height: height,
			margin: 0
		});
		clone.attr('onclick', '');
		clone[0].onclick = null;
		clone.click(Browser.UnselectChapter);
			
		pagesElem.css({
			top: outerHeight+20,
			height: 530-outerHeight
		});
		
		$('#content_browser').append(clone);
		me.css('visibility', 'hidden');
		clone.animate({ top: 10, left: 510}, Browser.FadeTime);
		$('#chapters').fadeOut(Browser.FadeTime/2, function(){ pagesElem.fadeIn(Browser.FadeTime/2); });
		Browser.FillPages();
	},
	UnselectChapter: function()
	{
		Browser.ShowShield();
		
		Browser.Selection.CloneChapterNode.animate(
			{top: Browser.Selection.OrigChapterNodePos.top, left: Browser.Selection.OrigChapterNodePos.left},
			Browser.FadeTime);
		
		function FadeInChapters()
		{
			$('#pages').remove();
			$('#chapters').fadeIn(Browser.FadeTime/2,
				function()
				{
					Browser.Selection.CloneChapterNode.remove();
					Browser.Selection.OrigChapterNode.css('visibility', 'visible');
					Browser.HideShield();
					
					Browser.Selection.OrigChapterNode = null;
					Browser.Selection.CloneChapterNode = null;
					Browser.Selection.OrigChapterNodePos = null;
					Browser.Selection.SelectedChapter = null;
				});
		}
		
		$('#pages').fadeOut(Browser.FadeTime/2, FadeInChapters);
	},
	FillPages: function()
	{
		var ArchiverURL = Browser.Selection.SelectedArchive.ArchiverURL;
		var ThumbnailURL = Browser.Selection.SelectedArchive.PreviewURL;
		
		var pages = $('#pages');
		pages.empty();
		pages.css({display:'block', 'background-image':''});
		$.ajax(Browser.AjaxPath+'listpages.php?archive='+Browser.Selection.SelectedArchive.ID+'&chapter='+Browser.Selection.SelectedChapter.ID,
		{
			dataType: 'text',
			success: function(data)
			{
				data = eval(data);
				var i, l = data.length;
				var sb = [];
				var imgs = [];
				for ( i = 0; i < l; i++ )
				{
					var item = data[i];
					sb.push('<a class="browser_item" href="',htmlencode(ArchiverURL+'?sid='+item.ID),
						'"><img src="',htmlencode(ThumbnailURL+item.Thumbnail),'" alt="Thumbnail" />',
						htmlencode(item.Title),'</a>')
					imgs.push(ThumbnailURL+item.Thumbnail);
				}
				
				Browser.PreloadImages(imgs, function()
				{
					pages.css('background-image', 'none');
					pages.html(sb.join(''));
				});
			}
		});
	},
	PreloadImages: function(images, callback)
	{
		if ( !images )
		{
			if ( typeof(callback) == 'function' )
				callback();
			return;
		}
		var i, cnt = 0, done = 0, l = images.length;
		
		function ImageDone()
		{
			done++;
			if ( done == cnt && typeof(callback) == 'function')
				callback();
		}
		var arr = [];
		for ( i = 0; i < l; i++ )
			if ( images[i] )
				cnt++;
		
		if ( cnt < 1 )
		{
			if ( typeof(callback) == 'function' )
				callback();
			return;
		}

		for ( i = 0; i < l; i++ )
		{
			if ( !images[i] )
				continue;
				
			var img = new Image();
			img.onload = ImageDone;
			img.onerror = ImageDone;
			img.src = images[i];
			arr.push(img);
		}
	}
};