pieceBrowser = Class.create({
		
	//create the scrollbars 
	initialize: function() {
		this.paddedPieceHeight = 158;
		this.scrollMultiples = 2;
		var scrollbar;
		var modal; //for fullscreen preview		
	},
	scrollbar: function() {
		return this.scrollbar;	
	},
	startScrollBar: function() {
		this.scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');
	},
	reCalcScrollBar: function() {
		//this.scrollbar.reset();
		this.scrollbar.recalculateLayout();
	},
	downScrollBar: function() {
		//customised scrollbar.js - added getScrollTop()
		//changed the onChange func to remove buttons if at top or bottom
		myStartPoint = this.scrollbar.getScrollTop()-(this.scrollbar.getScrollTop()%this.paddedPieceHeight);
		scrollDestination = myStartPoint + this.paddedPieceHeight*this.scrollMultiples;
		this.scrollbar.scrollTo(scrollDestination, true);
	},
	upScrollBar: function() {
		myStartPoint = this.scrollbar.getScrollTop()-(this.scrollbar.getScrollTop()%this.paddedPieceHeight);
		scrollDestination = myStartPoint - this.paddedPieceHeight*this.scrollMultiples;
		this.scrollbar.scrollTo(scrollDestination, true);
	},
	fullScreenPreview: function(myFullSrc,pieceTitle) {
		myFullScreen = new Element('div', {'id'  : 'smlFullScrnPreview', 'class' : 'fullScrPreview' });
		myContent = new Element('div', {'class' : 'centered' });
		myCloseIcon = new Element('img', {'src':'close.png', 'style' : 'float: right;padding-right:50px;cursor:pointer;cursor:hand;'});
		//set size to 80% of viewport, or 1000px - whichever is smaller
		maxHeight = Math.min(0.8*document.viewport.getHeight(),800);
		//build new image
        var attrs = {
                'src'  : myFullSrc,
                'height': maxHeight,
                'width': maxHeight
      			};
        var myImage = new Element('img',attrs);
        myContent.insert(myCloseIcon);
        myContent.insert(myImage); 
        myContent.insert('<p class=subTitle >'+pieceTitle+'</p>');
        myFullScreen.update(myContent); //added ;
        myFullScreen.observe('click', function(event){ new Effect.Shrink(myFullScreen, { afterFinish: function(effect){ $('wrap').show(); myFullScreen.remove(); oPieceBrowser.reCalcScrollBar.defer(); }}); event.stop()} );
        myFullScreen.hide();
        document.body.appendChild(myFullScreen);
        new Effect.Fade($('wrap'), { afterFinish: function(effect){ new Effect.Grow(myFullScreen);}});
	},
	getPieces: function(queryCode, p_id){
					             
					var url     = 'php/getData.php';
	                var options = {
	                	    method : 'post',
	                	    parameters : {
	                	        query    : queryCode,
								piece_id : p_id
	                	    },
	                	    onSuccess  : this.processAjaxPieces,
	                	    onFailure  : this.informAjaxPiecesFailure
	                	};
	                 
	                new Ajax.Request(url, options);
	                
	            },
	
	processAjaxPieces: function(transport){
	                var jsonObj = transport.responseJSON;
	                //now have the result set as a variable
					//lets loop through and add them as list items
	
	
	               var lis =  $('thumbBrowser').childElements(); //find all existing lis 
					lis.each(function(item){
						item.remove(); //and remove them
					})
	
					 
	                 jsonObj.each(function(item) {
							//build new list item
	                    	var attrs = {
	                            'class'  : 'pieceThumb'
	                            };
	                        var li = new Element('li', attrs);
	
	                        //build new image to put in list item
	                        var attrs = {
	                                'src'  : 'img.php?ID='+item.imageID+'&size=t',
	                      			'title': item.piece_name,
	                      			'height': '150px',
	                      			'width': '150px'
	                      			};
							var myImage = new Element('img',attrs);
							
							//add a null link to the thumbnails, so they get the pointer finger
							myThumbLink = new Element('a', {'href':'','border':'0'});
							myThumbLink.update(myImage);
	
	                        li.update(myThumbLink); //update listitem to contain image
	
	                        //****add slide in effect here
	                        $('thumbBrowser').insert(li); //stick into thumbBrowser
                      	                        
	                        //create elements to show in browser when they have focus
	                        	//create img element
	                            var attrs = {
	                                    'src'  : 'img.php?ID='+item.imageID+'&size=m',
	                          			'title': item.piece_name
	                                    };
								var myImage = new Element('img',attrs);
																
								var myFullSrc = 'img.php?ID='+item.imageID+'&size=l';
								
								var emptyMagQueue = function() {
									//remove queued events
									var queue = Effect.Queues.get('magGlass');
			                    	queue.each(function(effect) { effect.cancel(); });
								};
														
														
								//observe if click on link   *****should bind to this rather than have to use object name
								myImage.observe('mouseover', function(event){ emptyMagQueue(); new Effect.Appear($('medImgOptions'), {queue: {scope: 'magGlass', position: 'front' }});  event.stop();} );
								myImage.observe('mouseout', function(){ new Effect.Fade($('medImgOptions'), {queue: {scope: 'magGlass', position: 'end'}, delay: 5} );} );
														
								
								var pieceDetails = function() {
									$('mediumImage').update(myImage);
									$('mediumImage').insert('<div id="socialMediaLinks"><a href="https://twitter.com/share?original_referer=http%3A%2F%2Flauragravestock.com%2Fpieces.php%3F%26col%3D'+item.piece_collection_name+'%26p_id%3D'+item.imageID+'&text=I%20want%2Fneed%2Flove%20this%20piece%20of%20%40LauraGravestock%20Jewellery%20-%20the%20'+ encodeURIComponent(item.piece_name) +'&url=http%3A%2F%2Flauragravestock.com%2Fpieces.php%3F%26col%3D'+item.piece_collection_name+'%26p_id%3D'+item.imageID+'&related=LauraGravestock" title="Share on Twitter" target="_blank"><img width="21" height="14" style="border: 0pt none;" src="twitter_share.png"  ></a> <a href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flauragravestock.com%2Fpieces.php%3F%26col%3D'+item.piece_collection_name+'%26p_id%3D'+item.imageID+'&t=title" title="Share on Facebook"  target="_blank" ><img width="14" height="14" style="border: 0pt none;" src="facebook_sml.png"  ></a></div>'); //inserts the links to social media
									$('medImgOptions').hide();
									$('medImgOptions').absolutize(); //move to above img
									$('medImgOptions').clonePosition($('mediumImage'));
									$('magLink').stopObserving('click');
									$('magLink').observe('click', function(event){ oPieceBrowser.fullScreenPreview( myFullSrc, item.piece_name); $('medImgOptions').hide(); event.stop()} );			
									Event.observe(window, "resize", function(){
									    $('medImgOptions').clonePosition($('mediumImage')); //if widow gets resized, reposition mag glass
									});
									emptyMagQueue(); //remove all current effects
									new Effect.Appear( $('medImgOptions'), {queue: {scope: 'magGlass', position: 'front' }, delay: 3});
									new Effect.Fade($('medImgOptions'), {queue: {scope: 'magGlass', position: 'end'}, delay: 5} );
									$('pieceDescription').update('<span class="subTitle">'+item.piece_name + '</span> ' + item.piece_description);
									//need to check it has a price
									$('pieceAddToCart').update(null); //no button unless there is a price
									if ( item.piece_price > 0 ) {
										$('pieceAddToCart').update('<div class="product"><input type="hidden" class="product-title" value="'+ item.piece_name + '"><input type="hidden" name="analyticsdata" value="">' + '<input type="hidden" class="product-image" value="img.php?ID=' + item.imageID + '&size=t"  >'+ '<input type="hidden" class="product-url" value="/pieces.php?&col=' + item.piece_collection_name + '&p_id=' + item.imageID + '">'  + '<input type="hidden" class="product-price" value="' + item.piece_price + '">' + item.piece_cart_options + '<div class="googlecart-add-button" tabindex="0" role="button" title="Add to cart" style="margin-top:5px; margin-left:190px;"><img src="https://checkout.google.com/seller/gsc/v2_2/public/add.png"></div></div>');
									};//end if
									$('pieceMaterials').update(item.piece_materials);
									$('piecePrice').update(null);
									if ( item.piece_price > 0 ) {
										//when there is no price - ie commissions etc
										$('piecePrice').update('&pound;'+ item.piece_price );
									};//end if
									oPieceBrowser.reCalcScrollBar();
		                        };
								
							//set an observer to insert this into DOM when focussed
		                    myThumbLink.observe('click', function(event) {
								//insert into DOM
								pieceDetails();
								event.stop();
	                        });
		                    
		                    
							//if current item is first item, then stick it in the DOM
							if ( item == jsonObj.first()){
								//insert into DOM
								pieceDetails();								
							}
	                       
	                }); //end of each piece
					
					this.reCalcScrollBar();
					
	            }, //end of processAjaxPieces
	
	   informAjaxPiecesFailure: function(transport){
	            	//should add some error handling in here
	            }
 
            
});