/* On Dom Ready */
Window.onDomReady(init);

function init(){
	setupDescriptionScrollBar("descriptionContainer");
	setupScreenShotScrollBar();
	
	var aPreLoad = new Array();
	var sTempSrc;
	var aImages = document.getElementsByTagName('img');

	for (var i = 0; i < aImages.length; i++) {		
		if (aImages[i].className == 'imgover') {
			var src = aImages[i].getAttribute('src');
			var ftype = src.substring(src.lastIndexOf('.'), src.length);
			var hsrc = src.replace(ftype, '_o'+ftype);

			aImages[i].setAttribute('hsrc', hsrc);
			
			aPreLoad[i] = new Image();
			aPreLoad[i].src = hsrc;
			
			aImages[i].onmouseover = function() {
				sTempSrc = this.getAttribute('src');
				this.setAttribute('src', this.getAttribute('hsrc'));
			}	
			
			aImages[i].onmouseout = function() {
				if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
				this.setAttribute('src', sTempSrc);
			}
		}
	}
}

/* MANAGE SCROLLBARS */
function setupDescriptionScrollBar(el){

	if($(el)){
		if($(el).getSize().scrollSize.y > $(el).getSize().size.y){

			// close the copy and nest it within a div with the id 'scrollableCopy'
			scrollableCopy = $(el).clone()
			scrollableCopy.setProperty('id','scrollableCopy');

			$(el).empty();
			scrollableCopy.injectInside(el);
			
			// create scroll bar and inject it after the copy container div
			scrollBar = new Element('div', {'id': 'scrollbar'});
			scrollKnob = new Element('div', {
										'events': {
											'mouseover': function(){
												$('knob').effect('background-color', {duration: 300}).start("999");
											},
											'mouseout': function(){
												$('knob').effect('background-color', {duration: 300}).start("666");
											}
										},
										'id': 'knob'
									});
			
			scrollKnob.injectInside(scrollBar);
			scrollBar.injectAfter(scrollableCopy);
			$(scrollableCopy).setStyle('top',0);
			
			$(scrollBar).setStyle('left',$(scrollableCopy).getSize().size.x - 8);
			
			descriptionTop = $('descriptionContainer').getTop();
			infoTop = $('info').getTop();
			infoHeight = $("info").getSize().size.y
			
			realDescriptionTop = descriptionTop - infoTop;
			
			newHeight = infoHeight - realDescriptionTop - 3;

			$(scrollBar).setStyle('height',newHeight);
			$("descriptionContainer").setStyle('height',newHeight);
			
			ticked = false;
			
			// set up slide
			var mySlide = new Slider($('scrollbar'), $('knob'), {
				steps: 200,
				mode: 'vertical',
				onTick: function(step){
					ticked = true;
					$('knob').effect('top', {duration: 600}).start(step);
				},
				onComplete: function(step){
					ticked = false;
				},
				onChange: function(step){

					// change top of content
					elHeight = $('scrollableCopy').getSize().size.y - $('descriptionContainer').getSize().size.y + 50;
						
					// divide by two because there are 200 steps
					percent = (step/2)/100;
					newTop = Math.round(-(elHeight * percent));
					//$('knob').setHTML("ticked: " + ticked);
					
					if(ticked){
						$('scrollableCopy').effect('top', {duration: 600}).start(newTop);
					}else{
						$('scrollableCopy').setStyle('top', newTop);
					}
				}
			}).set(0);
		}
	}
}
function setupScreenShotScrollBar(){
	container = "shotsContainer";

	var totalWidth = 0;
	
	$$('#shotsContainer img').each(function(el){
	 	totalWidth += $(el).getSize().size.x + 5;
	});
	
	if(totalWidth > $('screenshots').getSize().size.x){
		$('shotsContainer').setStyle('width', totalWidth);
		
		// create scroll bar and inject it after the copy container div
		scrollBar = new Element('div', {'id': 'scrollbar_horizontal'});
		scrollKnob = new Element('div', {
									'events': {
										'mouseover': function(){
											$('knob_horizontal').effect('background-color', {duration: 300}).start("999");
										},
										'mouseout': function(){
											$('knob_horizontal').effect('background-color', {duration: 300}).start("666");
										}
									},
									'id': 'knob_horizontal'
								});
		
		scrollKnob.injectInside(scrollBar);
		scrollBar.injectBefore("shotsContainer");
		
		$(scrollBar).setStyle('width',$('screenshots').getSize().size.x);
		
		ticked_screenshot = false;
		
		// set up slide
		var myScreenshotSlide = new Slider($('scrollbar_horizontal'), $('knob_horizontal'), {
			steps: 200,
			onTick: function(step){
				ticked_screenshot = true;
				$('knob_horizontal').effect('left', {duration: 600}).start(step);
			},
			onComplete: function(step){
				ticked_screenshot = false;
			},
			onChange: function(step){
				// change top of content
				elWidth = $('shotsContainer').getSize().size.x - $('screenshots').getSize().size.x;
					
				// devide by two because there are 200 steps
				percent = (step/2)/100;
				newLeft = Math.round(-(elWidth * percent));
				//$('knob').setHTML("ticked: " + ticked);
				
				if(ticked_screenshot){
					$('shotsContainer').effect('left', {duration: 600}).start(newLeft);
				}else{
					$('shotsContainer').setStyle('left', newLeft);
				}

			}
		}).set(0);
	}
}