/*
Sliding Strip Gallery
Written by: Carlos Pissaco

TODO:
 - Enforce strip limits
 - set step from DOM info
 - ser scroller width automatically
*/

var ssg_imgStack;
var ssg_initFlag = false;
var scrollTween;
var ssg_hoverOption = false;

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

	if($('ssg_leftArrow') != null) {

		if(ssg_hoverOption) {
		
			$('ssg_leftArrow').addEvent('mouseover', function() {
				ssg_scrollLeft();
			});

			$('ssg_leftArrow').addEvent('mouseout', function() {
				scrollTween.cancel();
			});

			$('ssg_rightArrow').addEvent('mouseover', function() {
				ssg_scrollRight();
			});

			$('ssg_rightArrow').addEvent('mouseout', function() {
				scrollTween.cancel();
			});
			
		
		} else {

			$('ssg_leftArrow').addEvent('click', function() {
				ssg_slideRight(135*3);
			});
			


			$('ssg_rightArrow').addEvent('click', function() {
				ssg_slideLeft(135*3);				
			});	
		
		}
		
		
		//$('ssg_scroller').setStyle('position', 'relative');
		
		ssg_imgStack = $$('div.ssg_photos');
		ssg_imgStack.each(function(obj, index) {
			obj.addEvent('click', function() {
				ssg_showImgBig(index);
			});			
		});

		
		img_arr = ssg_imgStack[0].getElementsByTagName('img');

		if(staticContainerWidht < 0) {
			containerWidth = $('ssg_displayContainer').getStyle('width').toInt();
		} else {
			containerWidth = staticContainerWidht;
		}
		
		ssg_showImgBig(0);
		//img_width = img_arr[0].getStyle('width');
		//img_width = 127;
		//alert(ssg_imgStack.count * img_width);
		//$('ssg_scroller').setStyle('width', (count(ssg_imgStack) * img_width) + 'px');
	}
  });
  
 /*
 window.addEvent('load', function() {
	if($('ssg_leftArrow') != null) {
		ssg_showImgBig(0);
	} 
});
*/

function ssg_showImgBig(index) {
	
	var fade = new Fx.Tween('ssg_bigDisplay', {
		property: 'opacity',
		duration: 400, 
		transition: Fx.Transitions.Quart.easeInOut,
		link: 'chain'
	});

	
	temp = ssg_imgStack[index].getElementsByTagName('img');
	
	if(ssg_extra) {
		$('imgName').innerHTML = ssg_extra[index][0];
		$('imgDesc').innerHTML = ssg_extra[index][1];
		//$('ssg_bigDisplay').addEvent('click', function () { alert(ssg_extra[index][2]);});
		if(ssg_extra[index][2] != ' ') {
			document.getElementById('ssg_bigDisplay').onclick = function () { window.location = ssg_extra[index][2]; };
			document.getElementById('ssg_bigDisplay').style.cursor = 'pointer';
		} else {
			document.getElementById('ssg_bigDisplay').onclick = function () { };
			document.getElementById('ssg_bigDisplay').style.cursor = 'default';
		}
	}
	fade.addEvent('complete', function() {
	
		if($('ssg_bigDisplay').src != temp[0].src) {
			$('ssg_bigDisplay').src = temp[0].src;
			var img1 = new Asset.image(temp[0].src, { onload: imageloaded});
/*
			img1 = new Image();
			img1.src = temp[0].src;
			img1.onLoad = imageloaded(img1);	
			*/
		}
	});	
	//fade.start(1,0).start(0,1);	
	fade.start(1,0);
}

function imageloaded() {
			var fade2 = new Fx.Tween('ssg_bigDisplay', {
				property: 'opacity',
				duration: 400, 
				transition: Fx.Transitions.Quart.easeInOut,
				link: 'chain'
			});

				//alert('onLoad');
				prevWidth = this.width;
				tempHeight = this.height;

				if( prevWidth > containerWidth ) {
					//alert("width " + prevWidth);
					l = containerWidth / prevWidth;
					//document.write("<!-- BP1\n Image Object: " +  prevWidth + tempHeight + "\n l: " + l + "\n containerWidth: " + containerWidth + "-->");
					//alert(l);
					//alert('height ' + tempHeight);
					$('ssg_bigDisplay').setStyle('width', l * prevWidth);				
					$('ssg_bigDisplay').setStyle('height', l * tempHeight);
				} else {
					//alert("<!-- BP2\n Image Object: " +  prevWidth + tempHeight + "\n containerWidth: " + containerWidth + "\n src: " + temp[0].src + "-->");
					$('ssg_bigDisplay').setStyle('width', prevWidth);				
					$('ssg_bigDisplay').setStyle('height', tempHeight);

				}
				
				containerHeight = $('ssg_displayContainer').getStyle('width').toInt();
				prevHeight = $('ssg_bigDisplay').getStyle('height').toInt()
				if( prevHeight > containerHeight ) {
					//alert("height " +  $('ssg_bigDisplay').getStyle('height').toInt());
					l = containerHeight / prevHeight;
					$('ssg_bigDisplay').setStyle('height', l * prevHeight);
					$('ssg_bigDisplay').setStyle('width', l * $('ssg_bigDisplay').getStyle('width').toInt());
				}
			
				fade2.start(0,1);	
			}		

function ssg_slideRight(step) {

	var prev_pos = $('ssg_scroller').getStyle('left').toInt();
	if( prev_pos  < 0) {

		var slide = new Fx.Tween('ssg_scroller', {
			property: 'left',
			duration: 300, 
			transition: Fx.Transitions.Quart.easeInOut,
			link: 'ignore'
		});

		new_pos = prev_pos + step;
		slide.start(new_pos);	
	}

}

function ssg_slideLeft(step) {

	prev_pos = $('ssg_scroller').getStyle('left').toInt();
	if(prev_pos > $('ssg_scroller').getStyle('width').toInt() * -1 + $('ssg_container').getStyle('width').toInt() + 127) {
	
		var slide = new Fx.Tween('ssg_scroller', {
			property: 'left',
			duration: 300, 
			transition: Fx.Transitions.Quart.easeInOut,
			link: 'ignore'		
		});


	
		new_pos = prev_pos - step;
		slide.start(new_pos);
	}
}

function ssg_scrollLeft() {

	scrollTween = new Fx.Tween('ssg_scroller', {
		property: 'left',
		duration: 3000, 
		//transition: Fx.Transitions.linear.easeOut,
		link: 'ignore'		
	});
	
	prev_pos = $('ssg_scroller').getStyle('left').toInt();
	width = $('ssg_scroller').getStyle('width').toInt() * -1 + $('ssg_container').getStyle('width').toInt() + 127;
	
	scrollTween.start(width);

}

function ssg_scrollRight() {

	scrollTween = new Fx.Tween('ssg_scroller', {
		property: 'left',
		duration: 3000, 
		//transition: Fx.Transitions.linear.easeOut,
		link: 'ignore'		
	});
	
	//prev_pos = $('ssg_scroller').getStyle('left').toInt();
	//width = $('ssg_scroller').getStyle('width').toInt() * -1 + $('ssg_container').getStyle('width').toInt() + 127;
	
	scrollTween.start(0);
	
}