//<!--------------------------------------------------------------------
//----------------------------------------------------------------------
//----------------------------------------------------------------------
var outsidetId = 'scrollable_outside';
var insidetId = 'scrollable_inside';
var runnerId = 'mainRunner';
var clickMoveRatio = 0.05;
var scrollMultiplier = 3;
var btScrollWidth = 11;
var scrollAnimationTime = 200;
//----------------------------------------------------------------------
//----------------------------------------------------------------------
//----------------------------------------------------------------------
//----------------------------------------------------------------------
//----------------------------------------------------------------------
//----------------------------------------------------------------------


var clickMove;
var scrollPos = 0;
var runnerLeft = 0;
var scrollContainerWidth;
var scrollableArea;
var runerClk = 0;
var scrolled = false;
var max, runnerMax, runerClkPos, runerBackClk;

function addEvent(id,e,fn){
	if (document.getElementById(id).attachEvent)
		document.getElementById(id).attachEvent("on"+e, fn)
	else if (document.addEventListener)
		document.getElementById(id).addEventListener(e, fn, false)
}

$(document).ready(function(){
if(document.getElementById(insidetId)){
	$('#scrollable_outside, #scroller_container').css('margin-left',($(window).width()-700)/2);
	$('#scroller_container').show();
	scrollContainerWidth = $('#scrollable_outside').width();
	scrollableArea = $('#scroller_container').width() - btScrollWidth*2;
	
	scrollerFlag  =  1;
	
	function addImage(i){
		var img = '';
		var imagePre = new Image();
		imagePre.onload = function(){
			var plWidth = imagePre.width+20;
			if(i+1==imageArray.length)plWidth-=20;
			var insideWidth = $('#scrollable_inside').width()+plWidth;
			$('#'+insidetId).width(insideWidth);
			$('#'+insidetId).append("<img style='margin-bottom:"+Math.round((500-imagePre.height)/2)+"px' alt='' src='"+imageArray[i]+"'/>");
			
			$('#waiterCounter').html(' '+i+' / '+imageArray.length+' ');
			
			console.log(imageArray.length);
			
			if(i+1<imageArray.length)
				addImage(i+1);
			else{
				$('#waiter').hide();
				$('#waiterCounter').hide();
				if(imageArray.length-1)
				$('#scroller_container').show();
				$('#scrollable_inside').show();
			}
			clickMove = $('#scrollable_inside').width()*clickMoveRatio;
			

		//	imagCounter = 
			
			if(i%10 == 0 || i == (imageArray.length-1)){
				var runnerWidth = $('#scrollable_outside').width()/$('#scrollable_inside').width()*$('#scroller_container').width()+50;
				$('#mainRunner').css({'width':runnerWidth});
				max = insideWidth-scrollContainerWidth;
				runnerMax = $('.scroller_container').width() - btScrollWidth*2 - runnerWidth;
				if(runerClk==0)
					$('#mainRunner').css('left',btScrollWidth+(-1)*Math.round($('#'+insidetId).css('left').replace(/[^-\d\.]/g, '')/max*(scrollableArea-runnerWidth)));
			}
		}
// add clip		
		imagePre.onerror = function(){
			
			videoWidth = getWidth(decodeURIComponent(imageArray[i]).substr(5));

			videoHeight = getHeight(decodeURIComponent(imageArray[i]).substr(5));
			
			newWidth = parseInt((videoWidth/videoHeight)*500);
			
			videoStr = setWidth(decodeURIComponent(imageArray[i]).substr(5),newWidth);
			videoStr = setHeight(videoStr,500);
			
			var plWidth = newWidth+40;
			if(i+1==imageArray.length)plWidth-=20;
			var insideWidth = $('#scrollable_inside').width()+plWidth;
			$('#'+insidetId).width(insideWidth);

			$('#'+insidetId).append("<span style = 'display:inline-block; padding-right:20px;'>" + videoStr +"</span>");
			
			$('#waiterCounter').html(' '+i+' / '+imageArray.length+' ');
			
			console.log(imageArray.length);
			
			if(i+1<imageArray.length)
				addImage(i+1);
			else{
				$('#waiter').hide();
				$('#waiterCounter').hide();
				if(imageArray.length-1)
				$('#scroller_container').show();
				$('#scrollable_inside').show();
			}
			

			clickMove = $('#scrollable_inside').width()*clickMoveRatio;
			if(i%10 == 0 || i == (imageArray.length-1)){
				var runnerWidth = $('#scrollable_outside').width()/$('#scrollable_inside').width()*$('#scroller_container').width()+50;
				$('#mainRunner').css({'width':runnerWidth});
				max = insideWidth-scrollContainerWidth;
				runnerMax = $('.scroller_container').width() - btScrollWidth*2 - runnerWidth;
				if(runerClk==0)
					$('#mainRunner').css('left',btScrollWidth+(-1)*Math.round($('#'+insidetId).css('left').replace(/[^-\d\.]/g, '')/max*(scrollableArea-runnerWidth)));
				}
		}
		imagePre.src = imageArray[i];
	}
	$('#scrollable_inside').hide();
	$('#scroller_container').hide();
//	$('#waiter').show();
	$('#waiterCounter').show();

	addImage(0);

//	$('#waiter').hide();
//	$('#scrollable_inside').show();
	
	var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
	if (document.getElementById('scrollable_outside').attachEvent) //if IE (and Opera depending on user setting)
		document.getElementById('scrollable_outside').attachEvent("on"+mousewheelevt, function(e){mouseWheelMove(e)})
	else if (document.addEventListener) //WC3 browsers
		document.getElementById('scrollable_outside').addEventListener(mousewheelevt, function(e){mouseWheelMove(e)}, false)

	addEvent('scroller_back','click',scrollerBackClick);
	addEvent('mainLeftScroll','click',topClick);
	addEvent('mainRightScroll','click',bottomClick);
	addEvent('mainRunner','mousedown',function(e){runnerClicked(e);});
	
	if (document.attachEvent)
		document.attachEvent("onmousemove", function(e){mouseMoved(e)})
	else if (document.addEventListener)
		document.addEventListener("mousemove", function(e){mouseMoved(e)}, false)	
	
	if (document.attachEvent)
		document.attachEvent("onmouseup", mouseUp)
	else if (document.addEventListener)
		document.addEventListener("mouseup", mouseUp, false)
		
}
});

function getWidth(str){
	stat = str.indexOf('width');
	if(status == '-1')
		return false;
	
	substring = str.substr(stat+5);
	
	stat = getPos(substring);
	if(stat == false){
		return false;
	}
	substring = substring.substr(stat+1);
//	alert(substring);
	stat = getPos(substring);
//	alert(stat);
	if(stat == false){
		return false;
	}
	substring = substring.substr(0,stat);
//	alert(substring);
	return substring;
}

function setWidth(str,val){
	var positionCounter = 0;
	var offset = 0;
	stat = str.indexOf('width');
	if(status == '-1')
		return false;
	
	substring = str.substr(stat+5);
	positionCounter = stat+5;
	
	stat = getPos(substring);
	if(stat == false){
		return false;
	}
	substring = substring.substr(stat+1);
	positionCounter += stat+1;
	
//	alert(substring);
	stat = getPos(substring);
//	alert(stat);
	if(stat == false){
		return false;
	}
	offset = positionCounter + stat;
	substring = str.slice(0,positionCounter) + val + str.slice(offset);
	
//	alert(substring);
	return substring;
}

function getHeight(str){
	stat = str.indexOf('height');
//	alert(stat);
	if(status == '-1')
		return false;
	
	substring = str.substr(stat+6);
	
	stat = getPos(substring);
//	alert(stat);
	if(stat == false){
		return false;
	}
	substring = substring.substr(stat+1);
//	alert(substring);
	stat = getPos(substring);
//	alert(stat);
	if(stat == false){
		return false;
	}
	substring = substring.substr(0,stat);
//	alert(substring);
	return substring;
}

function setHeight(str,val){
	var positionCounter = 0;
	var offset = 0;
	stat = str.indexOf('height');
	if(status == '-1')
		return false;
	
	substring = str.substr(stat+6);
	positionCounter = stat+6;
	
	stat = getPos(substring);
	if(stat == false){
		return false;
	}
	substring = substring.substr(stat+1);
	positionCounter += stat+1;
	
//	alert(substring);
	stat = getPos(substring);
//	alert(stat);
	if(stat == false){
		return false;
	}
	offset = positionCounter + stat;
	substring = str.slice(0,positionCounter) + val + str.slice(offset);
	
//	alert(substring);
	return substring;
}


function getPos(str){
	var status = 0;
	status = str.indexOf('"');
	if(status == '-1' || status > 10){
		status = str.indexOf("'");
		if(status == '-1'  || status > 10)
			return false;
	}
	return status;
}



function __getMouseX(e){
	var posx = 0;
	if (!e) var e = window.event;
	if (e.pageX)
		posx = e.pageX;
	else if (e.clientX)
		posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
	return posx;
}

function __getMouseY(e){
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageY)
		posy = e.pageY;
	else if (e.clientY)
		posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	return posy;
}

function mouseMoved(e){
	if(runerClk != 0){
		var posx = __getMouseX(e);
		//var posy = __getMouseY(e);
		runnerLeft += posx - runerClkPos;
		runerClkPos = posx;
		scroll();
	}
}

function mouseUp(){
	if(runerClk!=0){
		runerClk = 0;
	}
}

function runnerClicked(e){
	var posx = __getMouseX(e);
	//var posy = __getMouseY(e);
	runerClk = 1;
	runerClkPos = posx;
}

function scrollerBackClick(e){
	var posx = __getMouseX(e);
	newPos = Math.round(posx - $("#scroller_container").offset().left - Math.round(getRunnerWidth()) - btScrollWidth);
	if(newPos <= runnerLeft)
		newPos = Math.round(posx - $("#scroller_container").offset().left - btScrollWidth);
	runnerLeft = newPos;
	runerBackClk = 1;
	scroll();
}

function topClick(){
	scrollPos -= clickMove;//*getRunnerWidth()/100;
	scroll();
}

function bottomClick(){
	scrollPos += clickMove;//*getRunnerWidth()/100;
	scroll();
}

function mouseWheelMove(e){
	if(e.detail)
		move = e.detail;
	else if(e.wheelDelta)
		move = -e.wheelDelta/60;
	scrollPos += move*scrollMultiplier;
	if(e.preventDefault)
		e.preventDefault();
	e.returnValue = false;
	scrolled = true;
	scroll();
}

function getRunnerWidth(){
	return $('#mainRunner').css('width').replace('px','');
}

function scroll(){
	if(runerBackClk){
		if(runnerLeft > runnerMax)
			runnerLeft = runnerMax;
		else if(runnerLeft<0)
			runnerLeft = 0;
		scrollPos = Math.round(runnerLeft*max/(scrollableArea-getRunnerWidth()));
		$('#'+insidetId).stop().animate({'left':-scrollPos},scrollAnimationTime,'swing')
		$('#mainRunner').stop().animate({'left':btScrollWidth +runnerLeft},scrollAnimationTime,'swing');
		runerBackClk = 0;
	}else if(!runerClk){
		if(scrollPos > max)
			scrollPos = max;
		else if(scrollPos < 0)
			scrollPos = 0;
		runnerLeft = Math.round(scrollPos/max*(scrollableArea-getRunnerWidth()));
		if(!scrolled){
			$('#'+insidetId).stop().animate({'left':-scrollPos},scrollAnimationTime,'swing')
			$('#mainRunner').stop().animate({'left':btScrollWidth +runnerLeft},scrollAnimationTime,'swing');
		}
		else{
			document.getElementById(insidetId).style.left = -scrollPos+'px';
			document.getElementById("mainRunner").style.left = btScrollWidth +runnerLeft +'px';
			scrolled = false;
		}
	}else{
		if(runnerLeft > runnerMax)
			runnerLeft = runnerMax;
		else if(runnerLeft<0)
			runnerLeft = 0;
		scrollPos = Math.round(runnerLeft*max/(scrollableArea-getRunnerWidth()));
		document.getElementById(insidetId).style.left = -scrollPos+'px';
		document.getElementById("mainRunner").style.left = btScrollWidth + runnerLeft +"px";
	}
}
//-->