var scrollCounter = 0;
	window.addEvent('domready', function(){
		$('enableJS').style.display = 'none';
		$('imgCloudContainer').style.width = '780px'; //576
		
		var dr = $('imgCloudContainer');
		var dra = $('draggable');
		var co = $('container');
		var sc = $('slidecontainer');
		var sl = $('slider');
		
		if (dra.offsetHeight >= dr.offsetHeight){
			sc.style.left = dr.offsetWidth+dr.offsetLeft+co.offsetLeft+'px';
			sc.style.top = dr.offsetTop + co.offsetTop + 'px';
			sc.style.height = dr.offsetHeight+'px';
			sc.style.display = 'block';
			
			var mySlider = new Drag(sl, {
				modifiers: {'y':'top', 'x':''},		
				onDrag: function(el){
					if (el.offsetTop <= 0){
						el.style.top = '0px';
					}	
					if (el.offsetTop >= (sc.offsetHeight - el.offsetHeight)){
						el.style.top = (sc.offsetHeight - el.offsetHeight)+'px';
					}	
					var so = $('draggable').offsetHeight - $('imgCloudContainer').offsetHeight - 2;
					var unit = so/($('slidecontainer').offsetHeight-el.offsetHeight);
					var sd = el.offsetTop*unit;
					slideTo(sd);
				}
			});
		}
		

/* uncomment to enable drag, also add proper SCRIPT tag in prod.php
		var myDragScroller = new Drag('imgCloudContainer', {
    style: false,
    invert: true,
    modifiers: {x: 'scrollLeft', y: 'scrollTop'}
});*/


var myFx = new Fx.Scroll('imgCloudContainer', {
    offset: {
        'x': 0,
        'y': 0
    }, duration: 750
}).toTop();



var el = $('imgCloudContainer');
	
	el.addEvent('mousewheel', function(e){
	    var range = draggableHeight - $('imgCloudContainer').offsetHeight - 2;
	  if (((e.wheel < 0) && (!(scrollCounter >= range))) 
	        || e.wheel > 0 && (scrollCounter != 0)){
		    e.stop(); // stops window from scrolling on srcollevent
       }
		if (e.wheel > 0){
			if (scrollCounter > 0){
				scrollCounter-=50;
			}
		} else {
			if (scrollCounter < (range)){
				scrollCounter+=50;
			} 
		}
		if (scrollCounter <= 0) scrollCounter = 0;
		if (scrollCounter >= draggableHeight) scrollCounter = draggableHeight;
		goScroll();
		
		var sl = $('slider');
		var sc = $('slidecontainer');
		
		var unit = (($('slidecontainer').offsetHeight-sl.offsetHeight))/range;
		$('slider').style.top = (unit*(scrollCounter))+'px';
		
		if (el.offsetTop <= 0){
			el.style.top = '0px';
		}	
		if (sl.offsetTop >= (sc.offsetHeight - sl.offsetHeight)){
			sl.style.top = (sc.offsetHeight - sl.offsetHeight)+'px';
		}
		
	});
}); 

function slideTo(distance){
	scrollCounter = distance;
	goScroll();
}

function goScroll(){
	var myFx = new Fx.Scroll('imgCloudContainer', {duration:0, wait:false}).start(0, scrollCounter);
	//$('draggable').style.top= -scrollCounter+'px';
}


window.addEvent('domready', function() {	
    $('imgCloudContainer').style.overflow = 'hidden';
});