window.addEvent('domready', function(){

		//create the gallery scroller
		var size = 218;
		var scrollNumber = 3;
		var inView = 3;
		var oldMargin = $('photosActual').getStyle('marginLeft').toInt();
		var maxScroll = ( ($$('a.thumb').length * -size) + (inView * size) );

		$('moveRight').addEvent('click', function(e){ e.stop();
			var oldMargin = $('photosActual').getStyle('marginLeft').toInt();
			var maxScroll = ( ($$('a.thumb').length * -size) + (inView * size) );
			var newMargin = oldMargin - (size * scrollNumber);
			$('photosActual').set('morph', { duration: 500 });
			if(oldMargin === maxScroll){
				$('photosActual').morph({ marginLeft: '0px' });
			}else{
				$('photosActual').morph({ marginLeft: ((newMargin < maxScroll) ? maxScroll : newMargin) });
			}
		});
		$('moveLeft').addEvent('click', function(e){ e.stop();
			var oldMargin = $('photosActual').getStyle('marginLeft').toInt();
			var maxScroll = ( ($$('a.thumb').length * -size) + (inView * size) );
			var newMargin = (size * scrollNumber);
			$('photosActual').set('morph', { duration: 500 });
			if( (oldMargin) >= (0) ){
				$('photosActual').morph({ marginLeft: maxScroll });
			}else{
				$('photosActual').morph({ marginLeft: (((oldMargin + newMargin) > 0 ) ? 0 : (oldMargin + newMargin)) });
			}
		});


		//create the popup effect on gallery images
		$$('a.thumb').each(function(el, i){
			el.addEvent('click', function(e){
				e.stop();
				var cloud = new Element('div', { "id":"cloudy" }).setStyles({
					"background":"#000", "opacity":".5", "height": window.getScrollSize().y, "width": window.getScrollSize().x,
					"position":"absolute", "top":"0", "left":"0"
				});
				var biggerImgSrc = el.getChildren("img")[0].getProperty("src").replace("_sm", "_bg");
//				var bigHTML = '<div id="bigPicWrap"><div id="closeMeWrap"><a href="#" id="closeMe">Close</a></div><div id="picWrap"><img id="bigPic" src="'+biggerImgSrc+'" /></div></div>';
				var bigHTML = new Element('div', {"id":"bigPicWrap"}).set('html', '<div id="closeMeWrap"><a href="#" id="closeMe">Close</a></div><div id="picWrap"><img id="bigPic" src="'+biggerImgSrc+'" /></div>');
				$$("body").grab(cloud);
				$$("body").grab(bigHTML);
				$("bigPicWrap").setStyles({
					"background":"#FCF6CE", "border":"2px solid #81100C", "textAlign":"center",
					"position":"fixed", "top":"35px", "left":"30%"
				});
				$("closeMeWrap").setStyles({ "textAlign":"right", "margin":"10px" });
				$("bigPic").setStyles({"margin":"0 15px 15px"});
				$("closeMe").addEvent('click', function(e){
					e.stop();
					$("cloudy").dispose();
					$("bigPicWrap").dispose();
				});
			});
		});


	});