/*** Picture Slider : Marky Mark, aug. 2003 voor Fabrique [design, nieuwe media & communicatie] ***/

// global changable vars for slider
var pathToImages = 'http://localhost/newsite/Images';
var siteLocation = 'http://localhost/newsite/';
var slideRed = '#C9161E';
var slideWhite  = '#FFFFFF';
var autoSlideInterval = 4000;
var frameRate = 940;

// global vars not to change
var containerWidth = 368;
var speed = 8;
var picsMargin = 8;
var busy = false;
var minPicsToSlide = 4;
var selPic = 0;
var autoSlideDirection = 'right';
var autoSlider;
var selectedSlide = 'empty';
var tempTotWidth = 0;
var picLocker;
var picLockerY;
var picLockerX;
var containerObj;
var containerLockerY

var slideBigWidth = (containerWidth-2);
var slideBigHeight = 246;

var slideVertMargins = 10;
var slideSmallHeight = 76;
var slideImageWidth = 84; //If you change this you have to change slidePath to addup to the width of the container
var slideImageHeight = 74;
var enoughSlides = false;


slidePath = new Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,10,12);

picObj = new Array();
visSlides  = new Array();
frameRate = Math.round(1/frameRate*1000);

//clipping function
setClip = function (lay,t,r,b,l){
	lay.style.clip = 'rect('+t+' '+r+' '+b+' '+l+')';
}

// automatic sliding
function autoSlide()
{
	if (enoughSlides)
	{
		autoSlider = autoSlideDirection == 'left' ? 
		setTimeout ('slideLeft()',autoSlideInterval) : 
		setTimeout ('slideRight()',autoSlideInterval);
	}
}

//sets current picture as selected picture
function selectSlide(slot){
	if (selectedSlide != 'empty'){
		var prevSlide =  selectedSlide;
		selectedSlide = 'empty';
		changeBorder (prevSlide,slideWhite);
	}
	changeBorder (slot,slideRed);
	slideBig.src = siteLocation + "image.aspx?ImCl=7&ImId=" +picObj[slot].picBig;
	slideBig.alt = picObj[slot].Description;
	slideBig.title = picObj[slot].Description;
	selectedSlide = slot;
}

//switches border-colors
function changeBorder (slot,color){
	if (selectedSlide != slot){
		picObj[slot].imgL.style.borderColor = color;
	}
}

// writes out the pictures and buttons
function picSlider ()
{
	var w='';
	
	if (typeof pics!='undefined')
	{
		for (var i = 0;i < pics.length; i++){
			
			w += '<div id="picL'+i+'" style="position:absolute;left:-800;top:0;z-index:0;">';
			w += '<a href="javascript:selectSlide('+i+')" onmouseover="changeBorder('+i+',\''+slideRed+'\');" onmouseout="changeBorder('+i+',\''+slideWhite+'\');"><img src="' + siteLocation + 'image.aspx?width='+slideImageWidth+'&height='+slideImageHeight+'&ImId='+pics[i]
			w += '" alt="' + picsDesc[i] + '" title="' + picsDesc[i] + '" style="border:1px solid '+slideWhite+';" id="slideKlein'+i+'" width="'+slideImageWidth+'" height="'+slideImageHeight+'"></a>';
			w += '</div>';
		}
	}
	w+='<div id="contObj" style="left:-800;top:0;position:absolute;z-index:0;width:'+containerWidth+';">';
	w+='<img src="'+pathToImages+'spacer.gif" alt="Grote afbeelding" width="'+slideBigWidth+'" height="'+slideBigHeight+'" id="lockerPicSlideBig" style="position:absolute;left:1;top:'+ (slideImageHeight + 12)+'; border: 0px solid '+slideWhite+';"><br>';
	w+='<img src="'+pathToImages+'spacer.gif" width="10" height="'+(2*slideVertMargins+slideSmallHeight)+'" ><br>';
	//w+='<div id="slideButtons"><span style="float:right"><a href="javascript:slideRight();"><img src="'+pathToImages+'button_slide_r.gif" width="15" height="15" alt="" border="0"></a></span>';
	//w+='<span style="float:left"><a href="javascript:slideLeft();"><img src="'+pathToImages+'button_slide_l.gif" width="15" height="15" alt="" border="0"></a></span>';
	w+='<div id="slideButtons" style="display:none;"><span style="left:400;top:315;position:absolute;z-index:0;"><a href="javascript:slideRight();"><img src="'+pathToImages+'buttons/button_slide_r.gif" width="15" height="15" alt="" border="0"></a></span>';
	w+='<span style="left:375;top:315;position:absolute;z-index:0;"><a href="javascript:slideLeft();"><img src="'+pathToImages+'buttons/button_slide_l.gif" width="15" height="15" alt="" border="0"></a></span>';
	w+='<br clear="all"><br></div>';
	w+='<div class="line"><img src="'+pathToImages+'spacer.gif" width="1" height="1" alt=""></div></div>';

	return w;
}


// sets up the positions and builds the structure of the picture objects
function buildPicObjStruct(){
	containerObj = getLayer('contObj');	
	picLocker = getLayer('lockerPicSlider');
	if (picLocker!=null)
	{
		containerLockerY = 0;//getPageY(picLocker);
		//alert("containerLockerY: " + getPageY(picLocker));
		//alert("slideBigHeight: " + slideBigHeight);
		//alert("slideVertMargins: " + slideVertMargins);
		picLockerY = 0; //containerLockerY + slideBigHeight+ 2 + slideVertMargins;
		picLockerX = 0; //getPageX(picLocker);
		
		//alert("picLockerY: " + picLockerY);
		//alert("picLockerX: " + picLockerX);
		
		setPageX (containerObj,picLockerX);
		setPageY (containerObj,containerLockerY);
		for (var i = 0;i < pics.length; i++){
			picObj[i] = new buildPicObj (i);
		}
		if (!enoughSlides)
		{
			getLayer('slideButtons').style.display = 'none';
		}
		else
		{
			getLayer('slideButtons').style.display = '';
		}
		slideBig = getLayer('lockerPicSlideBig');
		selectSlide(0);	
		picLocker.height = (getHeight(containerObj));

		// Autostart SlideShow
		autoSlide();
		
	}
}

// constructor for picture objects
function buildPicObj (slot){
	this.slot = slot;
	this.picBig = pics[slot];
	this.Description = picsDesc[slot];	
	this.l = getLayer('picL'+slot);
	this.imgL = getLayer('slideKlein'+slot);
	this.width = getWidth(this.l);
	this.height = getHeight(this.l);
	this.slidePath = new Array();
	this.busyChecker = false;
	this.direction;
	this.setPageX = function (x) {setPageX(this.l,x);}
	this.animate = function () {animate(this);}
	this.startAnimate = function (direction) 
	{ 
		//for (var i in slidePath)
		for(var i = 0; i < slidePath.length ; i++)
		{
			this.slidePath[i] = slidePath[i];
		}
		this.direction = direction; 
		this.animate();
	}
	if (tempTotWidth < containerWidth)
	{
		if (slot==0)
		{
			this.x = picLockerX;
		}
		else 
		{
			prObj = picObj[slot-1];
			this.x = prObj.x+prObj.width+picsMargin;
		}
		tempTotWidth += this.width+picsMargin;
		if (this.x + this.width > picLockerX+containerWidth)
		{
			setClip (this.l,0,picLockerX+containerWidth-this.x,this.height,0);
		}
		visSlides[visSlides.length] = slot;
		setPageX(this.l,this.x);
	}
	else 
	{
		this.x=-800;
		enoughSlides = true;
		
	}
	setPageY(this.l,picLockerY);
}

// animation function; is 'injected' in the picture objects 
animate = function (o)
{
	if (o.slidePath.length == 1)
	{
		if (o.busyChecker)
		{
			o.busyChecker = false;
			busy = false;
			autoSlide();
		}
	}
	else 
	{
		o.move = setTimeout('picObj['+o.slot+'].animate()',frameRate);
	}
	
	//alert(o.x);
	var tempSpeed = o.slidePath[o.slidePath.length-1];	
	o.direction == 'left' ? o.x+=tempSpeed : o.x-=tempSpeed;
	o.setPageX(o.x);

	o.slidePath.length=o.slidePath.length-1;
	
	if ((o.x + o.width < picLockerX) || (o.x > picLockerX)) //indien volledig onzichtbaar
	{
		setClip (o.l,0,o.width,o.height,0);
	}	
	if (o.x <= picLockerX)
	{
		setClip (o.l,0,o.width,o.height,picLockerX-o.x);
	}	
	else if (o.x + o.width >= picLockerX+containerWidth)
	{
		setClip (o.l,0,picLockerX+containerWidth-o.x,o.height,0);
	}
}

// slides to right
function slideRight (){
	if (busy){return;}
	busy = true;
	autoSlideDirection = 'right';
	clearTimeout(autoSlider);
	
	var lastSlide = visSlides[visSlides.length-1];
	var nextSlide = getNextSlide(lastSlide);
	
	picObj[nextSlide].x = picObj[lastSlide].x + picObj[lastSlide].width + picsMargin;
	picObj[nextSlide].setPageX(picObj[nextSlide].x);
	
	visSlides[visSlides.length] =  nextSlide;
	for(var i = 0; i < visSlides.length; i++)
	{
		if (i == visSlides.length-1)
		{
			picObj[visSlides[i]].busyChecker = true;
		}	
		picObj[visSlides[i]].startAnimate('right');
		if ( i !=0)
		{
			visSlides[i-1] = visSlides[i];
		}
	}
	
	visSlides.length--;
}

// slides to left
function slideLeft (){
	if (busy){return;}
	busy = true;
	autoSlideDirection = 'left';
	clearTimeout(autoSlider);
	var firstSlide = visSlides[0];
	var prevSlide = getPrevSlide(firstSlide);
	picObj[prevSlide].x = picObj[firstSlide].x-picsMargin - picObj[prevSlide].width;
	picObj[prevSlide].setPageX(picObj[prevSlide].x);
	pushVisSlides(prevSlide);
	for(var i = 0; i < visSlides.length; i++)
	{
		picObj[visSlides[i]].startAnimate('left');
		if (i == visSlides.length-1){
			picObj[visSlides[i]].busyChecker = true;
		}
	}
	visSlides.length--;
}

//gets next slide
function getNextSlide (slot)
{
	var s = ++slot;
	if (s >= picObj.length)
	{
		s = 0;
	}
	return s;
}

//gets previous slide
function getPrevSlide (slot)
{
	var s = --slot;
	if (s < 0)
	{
		s = picObj.length-1;
	}
	return s;
}

//'array-pushing'-function (not standard in javascript)
function pushVisSlides(slNum)
{
	visSlides.reverse();
	visSlides[visSlides.length] = slNum;
	visSlides.reverse();
}

function reposSlider()
{
	/*if (picLocker!=null)
	{
		var xDifference = picLockerX - getPageX(picLocker);
		picLockerX = getPageX(picLocker);
		setPageX (containerObj,picLockerX);
		for (var i in picObj){
			if (picObj[i].x != -800)
			{
				picObj[i].x -= xDifference;
				picObj[i].setPageX(picObj[i].x);
			}
		}
	}
	*/
}