var scroller = {
	init:   function() {
		if (document.getElementById("scrollArea")) {
	
			//collect the variables
			scroller.docH = document.getElementById("scrcontent").offsetHeight;
			scroller.contH = document.getElementById("scrcontainer").offsetHeight;
			scroller.scrollAreaH = document.getElementById("scrollArea").offsetHeight;
			  
			//calculate height of scroller and resize the scroller div
			//(however, we make sure that it isn't to small for long pages)
			scroller.scrollH = (scroller.contH * scroller.scrollAreaH) / scroller.docH;
			//if(scroller.scrollH < 15) scroller.scrollH = 15;
			document.getElementById("scroller").style.height = Math.round(scroller.scrollH) + "px";
			
			//what is the effective scroll distance once the scoller's height has been taken into account
			scroller.scrollDist = Math.round(scroller.scrollAreaH-scroller.scrollH);
			
			//make the scroller div draggable
			Drag.init(document.getElementById("scroller"),null,0,0,-1,scroller.scrollDist);
			
			//add ondrag function
			document.getElementById("scroller").onDrag = function (x,y) {
			  var scrollY = parseInt(document.getElementById("scroller").style.top);
			  var docY = 0 - (scrollY * (scroller.docH - scroller.contH) / scroller.scrollDist);
			  document.getElementById("scrcontent").style.top = docY + "px";
			}
		}
	}
}
var move_runing = false;
window.onload = function()
{
	scroller.init();
	EventSelectors.start(
	{
		'#mailmsg': function(elem)
		{
			var show_hide = function()
			{
				if (this.value == this.getAttribute('title') || this.value == this.title)
					this.value = '';
				else if (!this.value)
					this.value = this.getAttribute('title');
			}
			
			elem.observe('focus', show_hide.bind(elem));
			elem.observe('blur', show_hide.bind(elem));
		},
		'.arrow:click': function(elem)
		{			
			var dir  = elem.parentNode.className == 'left' ? 1 : -1;
				dir *= 606; // move by 610px;
				
			var side = $('middle_side');	
			var left = parseInt(side.style.left) || 0;
				
			if (dir > 0 && (left > -1 || !left)) return;
			if (dir < 0 && (side.offsetWidth + dir + left < 0 )) return;
			
			$$('#prods .right')[0].style.visibility = !(side.offsetWidth + dir*2 + left > 10) ? 'hidden' : 'visible';
			$$('#prods .left')[0].style.visibility = !(left+dir) ? 'hidden' : 'visible';
			
			//$$('#prods .left')[0].style.visibility = !(left == 0) ? 'hidden' : 'visible';
			
			
			
			if (!move_runing)
			{
				move_runing = true;
				Effect.MoveBy(side, 0, dir, {duration: 0.9, afterFinish: function() { move_runing = false; } });
			}
		},
		'.page:click': function(link)
		{
			$$('#images dd').each(function(elem) { elem[elem.hasClassName(link.id) ? 'show' : 'hide'](); });
			$$('.page .selected').each(function(elem) { elem.removeClassName('selected') });
			
			link.addClassName('selected');
		},
		'#images dd:click': function(elem)
		{
			if (document.all)
				$('mainimage').replace('<div class="right" style="background-image: url(' + elem.getAttribute('imgsrc') + ')" id="mainimage"></div>');
			else
				$('mainimage').style.backgroundImage	= 'url(' + elem.getAttribute('imgsrc') + ')';
			
			$('bigimg').style.backgroundImage		= 'url(' + elem.getAttribute('imgsrcbig') + ')';
			
			$$('#images .selected').each(function(elem) { elem.removeClassName('selected') });
			
			elem.addClassName('selected');
		},
		'.zoom:click': function(elem)
		{
			new Effect.Grow('prodbig');
		},
		'.close:click': function(elem)
		{
			new Effect.Shrink(elem.up('div'));
		}
	});
	
	var side = $('middle_side');	
	var left = parseInt(side.style.left) || 0;
	
	if ( left == 0){
		$$('#prods .left')[0].style.visibility ='hidden';
	}
	
	
	
	
}