var cards = [
	{thumb: 'images/ct_postcard1.jpg', full: 'images/postcard1.jpg', text: 'A combination of Black bearded (taller heads) and Copper wheat planted with poppies for contrasting colour and foliage. South facing in full sun, the beards appear to be producing light rather than reflecting it.'},
	{thumb: 'images/ct_postcard2.jpg', full: 'images/postcard2.jpg', text: 'Canary Grass demonstrates that mass or cluster planting of grasses produces a unique repetitive effect. Use Canary Grass in your gardens or in large containers to display on your patio and decks.'},
	{thumb: 'images/ct_postcard3.jpg', full: 'images/postcard3.jpg', text: 'Frosty December view of Black bearded and Copper wheat combination, the low light sets them off. Annual grasses give you enjoyment for a much longer timeframe than our short gardening season allows, leave grasses stand for fall and winter interest.'},
	{thumb: 'images/pc0705/thumbs/3.jpg', full: 'images/pc0705/full/3.jpg', text: 'Mock Rush is a good Xeriscape choice. Drought tolerant grass gives you a bulrush feature with no water.'},
	{thumb: 'images/pc0705/thumbs/9.jpg', full: 'images/pc0705/full/9.jpg', text: 'Teal Wheat Grass planted in an X gives 4 spaces to fill with flowering plants.'},
	{thumb: 'images/pc0705/thumbs/7.jpg', full: 'images/pc0705/full/7.jpg', text: 'Mix any flowering annual with your annual grass seeds and plant together. Experiment and have fun!'},
	{thumb: 'images/postcard7_thumb.jpg', full: 'images/postcard7.jpg', text: 'Foxtail Millet; majestic grass that reaches 3 to 4 feet in height. Thick green leaves and large fuzzy "Foxtail" heads, leaves turn crimson in fall.'},
	{thumb: 'images/pc0705/thumbs/2.jpg', full: 'images/pc0705/full/2.jpg', text: 'Mock Rush will stand through the winter and will attract birds to this natural feeder.'},
	{thumb: 'images/pc0705/thumbs/5.jpg', full: 'images/pc0705/full/5.jpg', text: 'Planted from seed, Sudan Grass will grow 6 to 8 feet in one growing season.'},
	{thumb: 'images/pc0705/thumbs/8.jpg', full: 'images/pc0705/full/8.jpg', text: 'Teal Wheat and Sudan Grass add a little extra to this bed.'},
	{thumb: 'images/pc0705/thumbs/10.jpg', full: 'images/pc0705/full/10.jpg', text: 'Sudan Grass and Sunflowers, contrasting colour and foliage, and similar height.'},
	{thumb: 'images/pc0705/thumbs/6.jpg', full: 'images/pc0705/full/6.jpg', text: 'Perennial grasses mix well with annual grasses. Fountain grass and Mock Rush.'},
	{thumb: 'images/postcard13_thumb.jpg', full: 'images/postcard13.jpg', text: '"The Grass Menagerie" This bed is filled with 9 varieties of annual grasses! More pictures and information on Ornamental Grasses can be seen at www.williammoorefarms.ca'},
	{thumb: 'images/pc0705/thumbs/1.jpg', full: 'images/pc0705/full/1.jpg', text: 'Contrasting colour and foliage, Teal Wheat Grass and Cosmos.'},
	{thumb: 'images/pc0705/thumbs/4.jpg', full: 'images/pc0705/full/4.jpg', text: 'Setting sun illuminates grasses, consider planting grasses so you can benefit from the setting sun.'}
];


var thumb_cur_pos = 0;
var thumb_tray_full_thumbs = 3;
var thumb_width = 129;
			
$(document).ready(function() { //init
	
	// preload images
	for(i=0;i<cards.length;i++) { jQuery("<img>").attr("src", '/'+cards[i].full); }
	
	// add arrows
	$('div#thumb_tray').append('<span class="left_arrow">Prev</span><div id="thumbs"><div id="inner"></div></div><span class="right_arrow">Next</span>');
	
	// attach arrow events
	$('span.left_arrow').click(function(e) {
		e.preventDefault();
		arrowClicked('left');
	});
	$('span.right_arrow').click(function(e) {
		e.preventDefault();
		arrowClicked('right');
	});
	
	// add thumbnails
	for(i=0;i<cards.length;i++)
	{
		$('div#thumbs div#inner').append('<img src="/'+cards[i].thumb+'" alt="'+cards[i].text+'" width="124" height="88px" rel="'+i+'" />');
	}
	
	// add thumbnail events
	$('div#thumbs div#inner img').mouseover(function() {
			if ($(this).attr('class') != 'current') { $(this).fadeTo(1, 1); }
		}).mouseout(function() {
			if ($(this).attr('class') != 'current') { $(this).fadeTo(1, 0.5); }
		}).click(function() {
			if ($(this).attr('class') != 'current') {
				setPostcard($(this).attr('rel'));
				checkOnScreen($(this).attr('rel'));
			}
		});
	
	
	// set div#inner size
	$('div#thumbs div#inner').width(cards.length * thumb_width);
	$('div#inner img').fadeTo(1, 0.5);
	
	// set first card as default
	setPostcard(0);
});

setPostcard = function(id) {
	// adjust fades on thumbnails
	$('div#inner img').fadeTo(1, 0.5).removeClass('current');
	$('img[rel='+id+']').fadeTo(1, 1).addClass('current');
	
	// add postcard image
	$('p#postcard_img').fadeOut('fast', function() {
		$('p#postcard_img').empty().append('<img src="/'+cards[id].full+'" alt="'+cards[id].text+'" />').fadeIn('fast');
	});
	
	$("#postcard_image").val(cards[id].full);
	
	// add postcard text
	$('textarea#message').val(cards[id].text);
}

// if a thumbnail is only partially on the screen, then scroll that one over so its the first one on the screen.
checkOnScreen = function(id) {
	var limit = parseInt(thumb_cur_pos) + parseInt(thumb_tray_full_thumbs) - 1;

	if (id > limit)
	{
		thumb_cur_pos = parseInt(id);	
		$('div#inner').animate({left: 0-(thumb_cur_pos*thumb_width)}, 'slow');
	}
}

// process side arrow clicks - animate if needed.
arrowClicked = function(dir) {
	switch (dir)
	{
		case 'left':
			if ((parseInt(thumb_cur_pos) - parseInt(thumb_tray_full_thumbs)) >= 0)
			{	
				thumb_cur_pos -= parseInt(thumb_tray_full_thumbs);
				$('div#inner').animate({left: 0-(thumb_cur_pos*thumb_width)}, 'slow');
			}
			break;
			
		default:
		case 'right':
			if ((thumb_cur_pos) < (cards.length - parseInt(thumb_tray_full_thumbs)))
			{
				thumb_cur_pos += parseInt(thumb_tray_full_thumbs);
				$('div#inner').animate({left: 0-(thumb_cur_pos*thumb_width)}, 'slow');
			}
			break;
	}
}