//Scripting for gallery Items
	//if adding a new Item, modify CSS also!!!

	//First Gallery

	
	
//End Gallery Items


//----------------------------------


//Start morphset for Content Box 1
	var morphSet = function(){
			
		//change the button location.
		document.getElementById("button").style.marginLeft = '410px';
		document.getElementById("button").style.marginTop = '445px';
		document.getElementById("conservation").style.height = '407px';
	
		//now we can set the style properties just like Fx.Tween
		//except now we can set multiple style properties
		this.set({
			'width': 471,
			'height': 477,
		
			//CHANGE IMAGE
			'background-image': 'url("images/conservationContentBox.png")'
			
			
	
	});
	}
	 
	var morphStart = function(){
		//we can also start out morph like we would start a tween
		//except we can now input multiple style properties
		
		//code modded by Mr. Enos, and Marcello!!
		if (document.getElementById("morph_element").clientHeight < 500)
		//Make Bigger	
		{	
		
			//change button location.
			document.getElementById("button").style.marginLeft = '410px';
			document.getElementById("button").style.marginTop = '900px';
			document.getElementById("conservation").style.height = '830px';
			
			this.start({			
				'width': 470,
				'height': 936,
				
				//CHANGE IMAGE
				'background-image': 'url("images/conservationContentBoxLg.png")',
				'background-repeat': 'no-repeat'
				
				
			});
		}
		
		
		else
		//make normal size again
		
	{	
		//change button location.
		document.getElementById("button").style.marginLeft = '410px';
		document.getElementById("button").style.marginTop = '445px';
		document.getElementById("conservation").style.height = '407px';
		
		
		this.start({		
			'width': 471,
			'height': 477,
			
			//CHANGE IMAGE
			'background-image': 'url("images/conservationContentBox.png")'
		});
		}	
		
	}
//End morphset for Bontent Box



//-------------------------------------------------------------------



//CONTENTBOX SCRIPTING TO DISPLAY
       
        window.addEvent('domready', function() {
            //first, lets throw our element into a var
            var morphElement = $('morph_element');
         
            //now, we create our morph
            var morphObject = new Fx.Morph(morphElement);
         
            //here we add the click event to the buttons
            //and we bind morphObject and the function
            //allowing us to use "this" above
            //$('morph_set').addEvent('', morphSet.bind(morphObject));  
            

  	 window.addEvent('domready', morphSet.bind(morphObject) )
   
       //onClick load the making it bigger..  To edit the image
                //we have to edit the greenScript file.
            $('morph_start').addEvent('click', morphStart.bind(morphObject));
        });
		
		/*For the contentBox to work we need a: 
    	<div id="morph_element">
				//this is the button that resizes the image
				<div id="button">
				<button id="morph_start">Start</button>
				// or a <img src><a href> too
    		</div>
		</div>
		*/

//End Scripting For contentBox