document.observe('dom:loaded', initClient);

function initClient(){
	
	
		//no isset in JS, this does the same job - weird structure due to FireFox...
		if(undefined!==window.clientSingle){
			
			$('wrapper').insert({bottom: new Element('div', {id: 'overlay_container'})});
			$('overlay_container').setStyle({width: '494px', height: '429px', position:'absolute', top:'120px', right:'95px'});
			initGallery();
		}
	else{
			var _agEditDrag = new Draggable('display_content', {
				handle: 'large_editorial_handle', onEnd:function(){
					if (parseInt($('display_content').style.top.split('px')[0]) < 100) {
						var xpos = parseInt($('display_content').style.left.split('px')[0]);
						var _emergency = new Effect.Move('display_content',{y:120,x:xpos,mode:'absolute'})
					}
				}
			});
		}
		
		//initGallery();
}

	function initGallery(){
	//set up gallery clickables
	
	var _clickArray = $('imageContainer').select('dt');
	var _imageArray = $('imageContainer').select('img');
	var _count = 1;
	
	
	_clickArray.each(function(el){
		
		
		//smooth gallery attempts to load all images in the page, including the image of the person giving the insight
		//ensure this image is last in the gallery and we'll make sure it's hidden
		if (_count > _clickArray.length) {
			el.setStyle({display: 'none'})
		}
		else {
			el.observe('click', handleElementClick);
			el.insert({
				top: _count
			})
			_count++;
		}
		
	})

	_imgName = 'url('+_imageArray[0].src.split('-74x56')[0]+'.png)';
	
	$('overlay_container').setStyle({backgroundImage: _imgName, backgroundRepeat: 'no-repeat', backgroundPosition: 'top center'});
	
	//setup gallery scrolling
	
	$('scrollLeft').observe('click', scrollGalleryLeft);
	$('scrollRight').observe('click', scrollGalleryRight);
		
	}


	function handleElementClick(evt){
		
		_evt = Event.element(evt);
		_img = _evt.getElementsByTagName('img')[0];

		_imgName = 'url('+_img.src.split('-74x56')[0]+'.png)';
		
		$('overlay_container').setStyle({backgroundImage: _imgName, backgroundRepeat: 'no-repeat', backgroundPosition: 'top center'});
		
		//return false;
		Event.stop(evt);
	}
	
	
	function scrollGalleryLeft(){
		var _width = $('gallery').getWidth();
	}

	
	function scrollGalleryRight(){
		
		
	}