//var bodywidth = window.getWidth();

/* TOP */

var mySlide = null;
var scroll = null;
function loadtopscrollers(){
	
	var initstep=slidex;
	
	var visiblescrollwidth = 0;
	var marginLeft = parseInt($('topcontent').getStyle('marginLeft'));
	//var bodywidth = $('bodywrapper').getCoordinates().width;
	//var bodywidth = window.getWidth();
	bodywidth = window.getWidth();
	//var scrollbarmargin = parseInt($('topscrollbar').getStyle('marginRight')) + parseInt($('topscrollbar').getStyle('marginLeft'));
	
	
	// calculating width
	var topwidth = 0;
	var currentwidth = 0;
	var topimgs = 0;
	$$('#topcontent #topscrollcontent .contentelement').each(function(item, index){
		
		currentwidth = parseInt(item.getCoordinates().width) + parseInt(item.getStyle('marginRight'));
		item.setStyle('width', parseInt(item.getCoordinates().width));
		topwidth = topwidth + currentwidth;
		
		if (item.getChildren().length>0) {
			topimgs++;
		}
	});
	
	if (topimgs > 0) {
	
		// visiblescrollwidth
		if (bodywidth < topwidth + marginLeft) {
			
			$('topscrollbar').setStyle('display', 'block');
			
			visiblescrollwidth = bodywidth - marginLeft;
			var topfactor = bodywidth/topwidth;
			var scrollwidth = topwidth*2 + (bodywidth - topwidth - currentwidth);
			$('topscrollcontent').setStyle('width', scrollwidth);		// set width style for scrolled element
		
			var topknobwidth = parseInt(topfactor * 11 * 10);
			$('knob').setStyle('width', topknobwidth);
			
			
			var updatingSlideTop = true;
			updateSlideTop = function() {
				if (updatingSlideTop) {
					mySlide.set($('topcontent').getSize().scroll.x);
					window.setTimeout("updateSlideTop()", 20);
				}
			}
			
			
			/* Slider 1 */
			mySlide = new Slider($('area'), $('knob'), {
				steps: topwidth-currentwidth,
				onChange: function(step){
					$('topcontent').scrollTo(step);
				},
				onComplete: function(step){
					slidex = step;
				}
			}).set(initstep);
			
			
			scroll = new Fx.Scroll('topcontent', {
				wait: false,
				duration: 1000,
				offset: {'x': 0, 'y': 0},
				transition: Fx.Transitions.Quad.easeInOut,
				onStart: function(){
					updatingSlideTop = true;
					updateSlideTop();
				},
				onComplete: function(){
					 //mySlide.set($('topcontent').getSize().scroll.x);
					 updatingSlideTop = false;
				}
			});
			
			
			$('prev').removeEvents();
			$('prev').addEvent('click', function(event) {
				
				//alert(mySlide.step);
				var scrolltoitemid = '';
				var scrolltox = 0;
				$$('#topcontent #topscrollcontent .contentelement').each(function(item, index){
					//alert(index + " = " + item.id);
					var posx = item.getPosition( [ $('topcontent') ] ).x - marginLeft;
					//alert(posx);
					if (posx < 0) {
						scrolltoitemid = item.id;
						scrolltox = posx;
					}
				});
				
				//scrolltox = mySlideSteps + scrolltox;
				scroll.toElement(scrolltoitemid);
				//scroll.scrollTo(scrolltox, 0);
			});
			
			$('next').removeEvents();
			$('next').addEvent('click', function(event) {
					
					//alert(mySlide.step);
					var scrolltoitemid = '';
					var scrolltox = 0;
					var itemwidth=0;
					var totalwidth=0;
					var lastitemid = '';
					$$('#topcontent #topscrollcontent .contentelement').each(function(item, index){
						
						itemwidth = item.getCoordinates().width + parseInt(item.getStyle('marginRight'));
						
						// total
						totalwidth = totalwidth + itemwidth;
						
						if (totalwidth - parseInt(item.getStyle('marginRight')) - 10 - mySlide.step > visiblescrollwidth && scrolltox==0) {
							scrolltox = totalwidth - visiblescrollwidth;
							scrolltoitemid = item.id;
						}
						
						lastitemid = item.id;
					});
					
					//scroll.toElement(scrolltoitemid);
					//if (lastitemid==scrolltoitemid || scrolltoitemid=='') {	// scroll to right for last item
					if (scrolltoitemid=='') {									// scroll to right AFTER last item
						scroll.toRight();
					} else if (scrolltox!=0) {
						scroll.scrollTo(scrolltox, 0);
					}
			});
		
		} else {
		
			//visiblescrollwidth = topwidth;
			$('topscrollbar').setStyle('display', 'none');
		}
	
	}
	
	$('topscrollcontent').setStyle('visibility', 'visible');
}



/* BOTTOM */
var mySlideB = null;
function loadbottomscrollers(initstep){

	if (typeof initstep == 'undefined') {
		initstep=0;
	}
	
	var visiblescrollbwidth = 0;
	var marginLeft = parseInt($('bottomcontent').getStyle('marginLeft'));
	//var bodywidth = $('bodywrapper').getCoordinates().width;
	var bodywidth = window.getWidth();
	//var bscrollbarmargin = parseInt($('bottomscrollbar').getStyle('marginRight')) + parseInt($('bottomscrollbar').getStyle('marginLeft'));
	
	
	// calculating width
	var bottomwidth = 0;
	var currentbwidth = 0;
	$$('#bottomcontent #bottomscrollcontent .contentelement').each(function(item, index){
		
		currentbwidth = item.getCoordinates().width + parseInt(item.getStyle('marginRight'));
		bottomwidth = bottomwidth + currentbwidth;
	});
	
	if (bottomwidth > 0) {
	
	
		// visiblescrollwidth
		if (bodywidth < bottomwidth + marginLeft) {
			
			$('bottomscrollbar').setStyle('display', 'block');
			
			visiblescrollbwidth = bodywidth - marginLeft;
			var bottomfactor = bodywidth/bottomwidth;
			var scrollbwidth = bottomwidth*2 + (bodywidth - bottomwidth - currentbwidth);
			$('bottomscrollcontent').setStyle('width', scrollbwidth);		// set width style for scrolled element
			
			var bottomknobwidth = parseInt(bottomfactor * 11 * 10);
			$('bottomknob').setStyle('width', bottomknobwidth);
			
			
			var updatingSlideBottom = true;
			updateSlideBottom = function() {
				if (updatingSlideBottom) {
					mySlideB.set($('bottomcontent').getSize().scroll.x);
					window.setTimeout("updateSlideBottom()", 20);
				}
			}
			
			
			/* Slider 2 */
			mySlideB = new Slider($('bottomarea'), $('bottomknob'), {
				steps: bottomwidth-currentbwidth,
				onChange: function(step){
					$('bottomcontent').scrollTo(step);
				}
			}).set(initstep);
			
			
			//var scroll2 = new Fx.Scroll('bottomcontent', {
			scroll2 = new Fx.Scroll('bottomcontent', {
				wait: false,
				duration: 1000,
				offset: {'x': 0, 'y': 0},
				transition: Fx.Transitions.Quad.easeInOut,
				onStart: function(){
					updatingSlideBottom = true;
					updateSlideBottom();
				},
				onComplete: function(){
					 //mySlideB.set($('topcontent').getSize().scroll.x);
					 updatingSlideBottom = false;
				}
			});
			//scroll2.scrollTo(initstep, 0);
			
			
			$('bottomprev').removeEvents();
			$('bottomprev').addEvent('click', function(event) {
				
				//alert(mySlideB.step);
				var scrolltoitemid = '';
				var scrolltox = 0;
				$$('#bottomcontent #bottomscrollcontent .contentelement').each(function(item, index){
					//alert(index + " = " + item.id);
					var posx = item.getPosition( [ $('bottomcontent') ] ).x - marginLeft;
					//alert(posx);
					if (posx < 0) {
						scrolltoitemid = item.id;
						scrolltox = posx;
					}
				});
				
				//scrolltox = mySlideBSteps + scrolltox;
				scroll2.toElement(scrolltoitemid);
				//scroll2.scrollTo(scrolltox, 0);
			});
			
			$('bottomnext').removeEvents();
			$('bottomnext').addEvent('click', function(event) {
					
					//alert(mySlideB.step);
					var scrolltoitemid = '';
					var scrolltox = 0;
					var itemwidth=0;
					var totalwidth=0;
					var lastitemid = '';
					$$('#bottomcontent #bottomscrollcontent .contentelement').each(function(item, index){
						
						itemwidth = item.getCoordinates().width + parseInt(item.getStyle('marginRight'));
						
						// total
						totalwidth = totalwidth + itemwidth;
						
						if (totalwidth - parseInt(item.getStyle('marginRight')) - 10 - mySlideB.step > visiblescrollbwidth && scrolltox==0) {
							scrolltox = totalwidth - visiblescrollbwidth;
							scrolltoitemid = item.id;
						}
						
						lastitemid = item.id;
					});
					
					//scroll2.toElement(scrolltoitemid);
					//if (lastitemid==scrolltoitemid || scrolltoitemid=='') {	// scroll to right for last item
					if (scrolltoitemid=='') {									// scroll to right AFTER last item
						scroll2.toRight();
					} else if (scrolltox!=0) {
						scroll2.scrollTo(scrolltox, 0);
					}
			});
		
		
		} else {
		
			//visiblescrollbwidth = bottomwidth;
			$('bottomscrollbar').setStyle('display', 'none');
		}
		
	}
	
}

function resetScrollers() {
	loadbottomscrollers(0);
	loadtopscrollers();
}



/* EVENTS */

window.addEvent('domready', loadtopscrollers); 
window.addEvent('resize', resetScrollers); 

window.addEvent('domready', loadbottomscrollers); 
window.addEvent('resize', resetScrollers);