$(document).ready(function(){
	var pixelsperpage=816; // constant
	var imagesperpage=6; // constant
	var numimages=0;
	var pages=0;
	var clickable=true;
	
	build_thumbs_bar('all');
	
	function build_thumbs_bar(filter) {
		$("#thumbsbar").empty();
	// build thumbsbar image strip, add unique bag_id to each thumb
		for (bagid in bags) {
			//alert(bags[bagid]["tags"].search(filter));
			if (filter=='all'||bags[bagid]["tags"].search(filter)!='-1') {
				$("#thumbsbar").append('<img src="img/'+bags[bagid]["thumb_url"]+
					'" class="bagthmb '+bags[bagid]["tags"]+'" />');
				$("#thumbsbar img:last").data('bag_id',bagid);
			}
		}
		
		numimages=$('#thumbsbar img').size(); // count total images in page
		pages=Math.round((numimages/imagesperpage)+.49); // calculate number of pages
		
		// figure out if there is already a thumbnail page selected and set to that page
		var curpagepos=$.cookies.get('curpageposcookie');
		if (curpagepos==null||curpagepos>pages) {
			curpagepos=1; // there either was no cookie value or it is old and greater than the total number of available pages
			$.cookies.set('curpageposcookie',curpagepos);
		}
		
		$('#thumbsbar').css('left',(curpagepos-1)*-pixelsperpage).show();
		redraw_page_indicators();
	}
	

	//figure out if there is already a bag selected
	var bagchosen=$.cookies.get('chosenbagcookie');
	if (bagchosen) {
		$('#bag_zoom').attr('src','img/'+bags[bagchosen]["img_url"]);
	} else {
	// there is no bag chosen, pick the first bag in the array
		bagchosen=0;
		$("#bag_zoom").attr('src','img/'+bags[bagchosen]["img_url"]);
		$.cookies.set('chosenbagcookie',bagchosen);
		
	}
	

	$('body').click(function(event) {

		// right and left arrow clicks on thumbs bar interface
		if ($(event.target).is('#right_page_arrow')&&clickable) {
			
			var leftpos=$('#thumbsbar').position().left;
			
			if (curpagepos<pages) {
				clickable=false;
				var newpos=leftpos-pixelsperpage;
				curpagepos++;
				$.cookies.set('curpageposcookie',curpagepos);
				
				$('#thumbsbar').animate(
					{
						left: newpos
					},
					{
						duration: 900,
						easing: 'easeInOutBack',
						complete: function(){
							redraw_page_indicators();
							clickable=true;
						}
					}
				);
			} // if newpos>leftposmin
		} // right arrow click
		
		
		if ($(event.target).is('#left_page_arrow')&&clickable) {
			
			var leftpos=$('#thumbsbar').position().left;
			
			if (curpagepos>1) {
				clickable=false;
				var newpos=leftpos+pixelsperpage;
				curpagepos--;
				$.cookies.set('curpageposcookie',curpagepos);
				
				$('#thumbsbar').animate(
					{
						left: newpos
					},
					{
						duration: 900,
						easing: 'easeInOutBack',
						complete: function() {
							redraw_page_indicators();
							clickable=true;
						}
					}
				);
			} // if newpos<0
		} // left arrow click
		
		// bag thumbnail clicked
		if ($(event.target).is('.bagthmb')&&clickable) {
			var bagchosen=$(event.target).data('bag_id');
			$("#bag_zoom").attr('src','img/'+bags[bagchosen]["img_url"]);
			$.cookies.set('chosenbagcookie',bagchosen);
		}
		
	}); // body.click
	
	// hovering over any bag zoom image
	$("#preview_frame").hover(function(){
		var bagchosen=$.cookies.get('chosenbagcookie');
		$('#bag_info_box').css("opacity","0.75").fadeIn(300);
		$('#bag_info_box').html('<p>'+bags[bagchosen]["caption"]+'</p>');
		if (bags[bagchosen]["swatch_url"]) {
			$('#bag_info_box').append('<p>'+'<img src="img/'+bags[bagchosen]["swatch_url"]+
			'" /></p>');
		}
		$('#bag_info_box').append('<p><small>Available in multiple styles, colors '+
			'and fabrics. <a href="contactus.php">Contact Envi</a> for details.</small></p>');
	},function(){
		var bagchosen=$.cookies.get('chosenbagcookie');
		$('#bag_info_box').fadeOut(300);
	});

	
	// generic function that draws those little circle icons that indicate available pages and current page of thumbs
	function redraw_page_indicators() {
		curpagepos=$.cookies.get('curpageposcookie');
		$('#page_indicators').empty();
		for (var i=1;i<=pages; i++) {
			if (curpagepos==i) $('#page_indicators').append('<img src=\"img/filled.png\" />');
			else $('#page_indicators').append('<img src=\"img/unfilled.png\" />');
		} // for
	}


	
}); // document.ready