function show_tools(id)
	{
	var thumb = document.getElementById('thumb'+id);
	var tools = document.getElementById('thumb-tools'+id);
	
	tools.style.display = 'block';	
	}
	
function hide_tools(id)
	{
	var thumb = document.getElementById('thumb'+id);
	var tools = document.getElementById('thumb-tools'+id);
	
	tools.style.display = 'none';	
	}
	
	
	
	
function select_design(id, type)
	{
	var input = document.getElementById('input-design');
	var inputID = document.getElementById('input-designID');
	var input_n = document.getElementById('input-n');
	var input_size = document.getElementById('input-size');
	var input_type = document.getElementById('input-type');
	var i;


		for(i=1; i<cards.length; i++)
		{
		var star = document.getElementById('selected'+i);
		var title = document.getElementById('title'+i);

			if(i == id)
			{
			star.innerHTML = '<em><span class="hidden">(Selected) </span></em>';
			input.value = title.innerHTML;
			input_size.value = cards[i]['size'];
			input_type.value = type;
			input_n.value = i;
			inputID.value = cards[i]['id'];
			} else {
			star.innerHTML = '';
			}

		}
	
	}
	
	
function deselect_designs()
	{
	$('input-design').value = '';
	$('input-designID').value = '';
	$('input-n').value = '';
	$('input-size').value = '';
	$('input-type').value = '';

	var i;

		for(i=1; i<cards.length; i++)
		{

			if($('selected'+i))
			{
			var star = $('selected'+i);
			star.innerHTML = '';
			}
			
		}
	
	}
	
	
	
	
function load_large_image(id, type)
	{

		if(type == 'ecard')
		{
		var so = new SWFObject('system/cards/'+cards[id]['id']+'-preview.swf?' + Math.round(new Date().getTime()/1000.0),'mpl','700','351','9', '#ffffff');
		so.addParam('wmode','opaque');
		so.write('large-design');
		hide_thumbs();
		show_large_image();
		$('large-design').setStyle('overflow', 'hidden');
		} else {
		var large = document.getElementById('large-design');
		var title = document.getElementById('title'+id).innerHTML;
		
		show_preloader();
		hide_thumbs();
		large.innerHTML = '<img onload="show_large_image()" src="system/cards/'+cards[id]['id']+'-front.jpg" alt="'+title+'" width="450" />';
		}
		
	}
	
	
function show_large_image()
	{
	$('back').style.display = 'none';
	$('back-to-gallery-button').style.display = 'block';
	$('continue-button').style.display = 'none';
	
	update_statusbar('Click the Back to Gallery button to return to the design gallery.', 'normal');
	hide_preloader();
	show_large();
	}
	
	
function close_large()
	{
	$('back').style.display = 'block';
	$('back-to-gallery-button').setStyle('display', 'none');
	hide_large();
	show_thumbs()	
	$('large-design').setStyle('overflow', 'auto');
	}
	
	
	
	
	



	
	
function show_thumbs()
	{
	update_statusbar('Choose a design by clicking on its thumbnail, then select the Continue button.', 'normal');
	var all_thumbs = document.getElementById('thumbs');
	
/*
	var fxThumbs = new Fx.Tween(all_thumbs.id, {duration:500});
	fxThumbs.set('opacity', 0);
	fxThumbs.set('display', 'block');
	fxThumbs.start('opacity', all_thumbs.getStyle('opacity'), 1);
*/

	all_thumbs.style.display = 'block';
	document.getElementById('continue-button').style.display = 'block';
	}
	
	
function hide_thumbs()
	{
	var all_thumbs = document.getElementById('thumbs');
	
/*
	var fxThumbs = new Fx.Tween(all_thumbs.id, {duration:500});
	fxThumbs.start('opacity', all_thumbs.getStyle('opacity'), 0);
	
	setTimeout(function() {set_display_none('thumbs')}, 550);
*/

	all_thumbs.style.display = 'none';
	}
	
	
	
	
	
	
	
	
	
function show_large()
	{
	var large = document.getElementById('large-design');
	large.style.display = 'block';
	}
	
	
function hide_large()
	{
	var large = document.getElementById('large-design');
	large.style.display = 'none';
	}
	
	
	
	
	
	
	
	
	
function prepare_step2()
	{
	close_large();

	$('continue-button').setStyle('display', 'block');
	$('status').setStyle('display', 'block');
	$('printed-card-button').setStyle('display', 'none');
	$('e-card-button').setStyle('display', 'none');
	
	
	var n;
	var ul = '';

	$('thumbs').set('html', '');

		if(strlen(trim(document.getElementById('thumbs').innerHTML)) > 10) //have the thunbs already been loaded? 10 char buffer used in case of browser issues
		{
		//thumbs already loaded
		} else {

			for(n = 1; n < cards.length; n++)
			{
//			var id 			= cards[n]['id'];
			var id 			= n;
			
			var card_id 	= cards[id]['id'];
			var title 		= cards[n]['title'];
			var orientation = cards[n]['orientation'];
			var price 		= cards[n]['price'];
			var size 		= cards[n]['size'];
			var width 		= cards[n]['width'];
			var height 		= cards[n]['height'];
			var styles 		= cards[n]['styles'];
			
			var type;
			(size == 'ecard') ? type='ecard' : type='paper';
//			(type == 'ecard') ? title=title+' <span class="ecard-type">(E-Card)</span>' : title;
			(type == 'ecard') ? card_id=card_id+'<br />E-Card</span>' : card_id;
			
			
			ul = ul+'<li style="'+styles+'" class="thumb '+type+' '+orientation+'-thumb" id="thumb'+id+'" onmouseover="show_tools('+id+')" onmouseout="hide_tools('+id+')"><img src="system/cards/'+cards[id]['id']+'-thumb.jpg" alt="" width="145"/>';
			ul = ul+'<h2><span class="thumb-title" id="title'+id+'">'+title+'</span> <span id="selected'+id+'" class="selected"></span></h2>';
			ul = ul+'<p class="thumb-info" style="line-height: 11px; ">';
			ul = ul+'<span style="display: block; width: 100px;">'+title+'</span> <span class="dimensions">'+card_id+'</span></p>';
			ul = ul+'<p class="thumb-info">';
			
				if(!width || !height)
				{
				//ul = ul+'<span class="dimensions-ecard">E-Card</span></p>';
				} else {
				ul = ul+'<span class="price">$'+price+' ea.</span> <span class="dimensions">'+width+' x '+height+'mm</span></p>';
				}

			ul = ul+'<ul id="thumb-tools'+id+'" class="thumb-tools">';
			ul = ul+'<li><a class="thumb-tool enlarge" href="#" onclick="load_large_image('+id+', \''+type+'\'); return false;"><span class="hidden">Enlarge</span></a></li>';
			ul = ul+'<li><a class="thumb-tool select" href="#" onclick="select_design('+id+', \''+type+'\'); return false;"><span class="hidden">Select</span></a></li>';
			ul = ul+'</ul>';
			ul = ul+'<input type="hidden" id="orientation'+id+'" name="orientation'+id+'" value="portrait" />';
			ul = ul+'</li>';
			
			
			}
		
		$('thumbs').set('html', ul);
		}

		if($('input-type').value == 'ecard')
		{
		$$('.ecard').setStyle('display', 'block');
		$$('.paper').setStyle('display', 'none');
		} else {
		$$('.ecard').setStyle('display', 'none');
		$$('.paper').setStyle('display', 'block');
		}
	
	}