function handleSocial(e){
	
	var surl ="";
	var el = $(e).parent().parent().parent().find("a");
	var id = $(e).attr("id");
	var imgid=el.attr("imgid");
	var caption = el.attr("title");
	var url = el.attr("href");
	var bitly  = "";
	if (window.BitlyCB) {
		
		
		BitlyCB.myShortenCallback = function(data) {
			var result;
			for (var r in data.results) {
			result = data.results[r];
			result['longUrl'] = r;
			break;
			}
			bitly = result['shortUrl'];
			
			if(id=="facebook"){
				surl = "http://www.facebook.com/share.php?u=";	
			}
			else if(id=="twitter"){
				var twittertext = caption + " by " + "Sakia Lelieveld Fotografie" + " " + bitly + "";
				popup = window.open("http://twitter.com/home?status="+encodeURIComponent(twittertext),"prettySociable","location=0,status=0,scrollbars=1,width="+900+",height="+500);
			}
			else if(id=="linkedin"){
				
				surl = "http://www.linkedin.com/shareArticle?mini=true&ro=true&url=";
			}
			else if(id=="mail"){
				
		
				var subject = encodeURIComponent(caption + " by Sakia Lelieveld Fotografie");
				var body = "Hello\n\nI have found a nice photo: "+ caption + " by Sakia Lelieveld Fotografie)\n\n See also " + bitly;
				body =  encodeURIComponent(body);
										
				window.location = "mailto:?subject="+subject+"&body="+ body;
			}
			else if(id=="shop"){
				
				surl = "/mail/?u=";
			}
			
			if(surl != ""){
					
				popup = window.open(surl+encodeURIComponent(url),"prettySociable","location=0,status=0,scrollbars=1,width="+900+",height="+500);
			}
			
		}
		
		
	}
		
	BitlyClient.shorten(url, 'BitlyCB.myShortenCallback');
}




/*
** Photo Slider 1.0 08/08/07
**  Author: Jesse Janzer
**   jjanzer@lanthera.net http://jjanzer.subculture.org
**  Tutorial Site: http://opiefoto.com/articles/slider
**
** You may use this library for any purpose.
**
** If you find it useful feel free to give me credit and link to
**  the original tutorial site http://opiefoto.com/articles/slider
*/

$(document).ready(function(){
	$('#intro').parent().addClass("introContainer");
})

var FOTO = { };
var SKEL = { };
SKEL.EFFECTS = { };
var resizeTimer = null;
$(window).bind('resize', function() {
	if (resizeTimer) clearTimeout(resizeTimer);
	resizeTimer = setTimeout(FOTO.Slider.setWindow, 100);
});
	
	
FOTO.Slider = {
	bucket : { }, //a hash containing our thumbnails & images
	imageCache : { }, //cache of the images so the preloaded images aren't overwritten in some browsers
	loadingURL : '/image/static/loader.gif',
	baseURL : '/articles/assets/slider/',
	thumbURL : 't_{ID}.jpg',
	mainURL : '{ID}.jpg',
	thumbState 	:  0,
	intervalId:0,
	thumbCount:1000,
	duration: 3000, //how long do we look at each image?
	data : { }, //contains things like current offset, paused, etc keyed off of the slider id

	//returns the URL for our thumbnails and large images
	getUrlFromId: function(key,id,isThumb){

		//do we have this url in our bucket?
		if(this.bucket[key] != null && this.bucket[key][id] != null){
			if(isThumb && this.bucket[key][id]['thumb'] != null){
				return this.baseURL+this.bucket[key][id]['thumb'];
			} else if (!isThumb && this.bucket[key][id]['main'] != null){
			return this.baseURL+this.bucket[key][id]['main'];
			}
		}

		//we don't have it stored, so generate it
		if(isThumb)
			return this.baseURL+this.thumbURL.replace('{ID}',id);
		return this.baseURL+this.mainURL.replace('{ID}',id);
	},

	//returns the caption for the image
	getCaptionFromId: function(key,id){
		if(this.bucket[key] != null && this.bucket[key][id] != null){
			return this.bucket[key][id]['caption'];
		}
	},
	
	getLinkFromId: function(key,id){
		if(this.bucket[key] != null && this.bucket[key][id] != null){
			return this.bucket[key][id]['url'];
		}
	},
	
	getImgidFromId: function(key,id){
		if(this.bucket[key] != null && this.bucket[key][id] != null){
			return this.bucket[key][id]['id'];
		}
	},


	//ids is just an array
	importBucketFromIds: function(key,ids){
		this.bucket[key] = new Object(); //replace any existing entries with this new set
		for(i in ids){
			this.bucket[key][ids[i]] = new Object(); //there isn't any reason to pre-store the urls for this
			//this.bucket[i]['thumb'] = this.getUrlFromId(i,true);
			//this.bucket[i]['main'] = this.getUrlFromId(i,false);
		}
	},
	setWindow: function(){
		//var windowWidth = $(window).width();
        //var windowHeight = $(window).height();
		var windowHeight = document.body.clientHeight;
		var windowWidth = document.body.clientWidth;
		
		if($.browser.msie){
		
			windowHeight = windowHeight - 40;	
		}
		else{
			
			
			windowHeight = windowHeight - 10;	
		}
		//if (==0)
		//{
		//	alert('leeg');
		//	FOTO.Slider.thumbState=1;
		//	}
		var key = FOTO.Slider.key;
		var mainc = $('#'+key+' .photoslider_class');
		var main = $('#'+key+' .photoslider_main');
		var holder = $('#'+key+' .photoslider_navHolder');
		var caption = $('#'+key+' .photoslider_caption');

		var prevb = $('.prev');
		var nextb = $('.next');
		
		var prevb2 = $('.nav_left');
		var nextb2 = $('.nav_right');
		
		//alert(caption.width());
		var mainImg = $('#'+key+' .photoslider_main img').get(0);
		var loading;
		var aspect=mainImg.width/mainImg.height;
		var th=313;
		var isIE=0;
		var leftAf = 146;
		
		//window.console.log(mainImg.width);
		
		
		if (FOTO.Slider.bucket[key][0]==undefined)
		{
		
			var ol = $('#'+key+' .photoslider_class');
			var ol2 = $('#'+key+' .photoslider_thumbBarOverlay');
			ol.css({'height':0+'px'});
			mainImg.width=0;mainImg
			mainImg.height=0;
			prevb2.css({'height':0+'px'});
			nextb2.css({'height':0+'px'});
			prevb.css({'height':0+'px'});
			nextb.css({'height':0+'px'});
			ol2.css({'height':0+'px'});
			main.height=0;
			return false;
		}
		
		if($.browser.msie && parseInt($.browser.version) <= 6)
		{
			isIE=1;
		}
		
		
		
		if (FOTO.Slider.thumbState==1){
			var ol = $('#'+key+' .photoslider_thumbBarOverlay');
			ol.css({'height':0+'px'});
			holder.css({'height':0+'px'});
			prevb2.css({'height':0+'px'});
			nextb2.css({'height':0+'px'});
			th=175;
		}
		if (mainImg.src.indexOf('loader.gif')>0)
		{
			
			
			
			var h=windowHeight-th;
			var w=h*aspect;
			mainImg.height=h;
			mainImg.width=w;
			mainImg.src = 'image/static/transparent.gif';
			width=200;
			height=200;
			
			//$('#'+key+' .photoslider_main img').css({'margin-left':(Math.round((windowWidth-w)/2)) + "px"});

			
			caption.css({'padding-top':25+'px','width':(w-26)+'px'});
			
			
			holder.css({'margin-left':(windowWidth/2)-((550)/2)+'px'});
			prevb.css({'height':h+20+'px'});
			nextb.css({'height':h+20+'px'});
			nextb.css({'right':228+'px'});
			prevb.css({'left':((windowWidth/2) - ( w/2) - leftAf)+'px'});
			if (isIE==1)nextb.css({'width':20+'px'});
			//else nextb.css({'width':w+80+'px'});
			var rand=300+45;
			main.css({'height':h+'px'});
			main.css({'background':'transparent url(image/static/loader.gif) no-repeat scroll '+(windowWidth/2)-(w/2)-rand+'px center'});
			return false;
		}
		main.show();
		if (windowWidth>windowHeight)
		{
			if (aspect>1)
			{
				var w=windowWidth-150;
				//if (w>1024)w=1024;
				var h=(w/aspect);
				
				if (h>windowHeight -th)
				{
				 h=windowHeight-th;
				 w=(h*aspect);
				}
				
				mainImg.height=h;
				mainImg.width=w;
				
				//$('#'+key+' .photoslider_main img').css({'margin-left':(Math.round((windowWidth-w)/2)) + "px"});

				
				caption.css({'padding-top':25+'px','width':(w+20)+'px'});
				holder.css({'margin-left':(windowWidth/2)-((550)/2)+'px'});
				prevb.css({'height':h+20+'px'});
				prevb.css({'left':((windowWidth/2) -( w/2) - leftAf)+'px'});
				

					nextb.css({'height':h+20+'px'});
					nextb.css({'right':((windowWidth/2) -( w/2) - 130)+'px'});
				
				//else nextb.css({'width':w+80+'px'});
				var rand=300+45;
				main.css({'height':h+'px','margin-left':"0px"});
			}
			else
			{
				
				var h=windowHeight-th;
				//if (h>768)h=768;
				var w=(h*aspect);
				mainImg.height=h;
			//	mainImg.width=w;  -- ziggy -- als ik deze uitzet gaat het ook goed in firefox..
				
				//$('#'+key+' .photoslider_main img').css({'margin-left':(Math.round((windowWidth-w)/2)) + "px"});
				
				
				caption.css({'padding-top':25+'px','width':(w+20)+'px'});
				holder.css({'margin-left':(windowWidth/2)-((550)/2)+'px'});
				prevb.css({'height':h+20+'px'});
				prevb.css({'left':((windowWidth/2) -( w/2) - leftAf)+'px'});

				nextb.css({'height':h+20+'px'});
				nextb.css({'right':((windowWidth/2) -( w/2) - 130)+'px'});
				
				//else nextb.css({'width':w+80+'px'});
				var rand=300+45;
				main.css({'height':h+'px','margin-left':"0px"});
			}
		}
/*		else
		{		
			if (aspect>1)
			{
				var w=windowWidth-150;
				var h=w/aspect;
				mainImg.height=h;
				mainImg.width=w;
				
				//$('#'+key+' .photoslider_main img').css({'margin-left':(Math.round((windowWidth-w)/2)) + "px"});
				
				
				caption.css({'padding-top':25+'px','width':(w+20)+'px'});
				holder.css({'margin-left':(windowWidth/2)-((550)/2)+'px'});
				prevb.css({'height':h+20+'px'});
				prevb.css({'left':((windowWidth/2) -( w/2) - leftAf)+'px'});

					nextb.css({'height':h+20+'px'});
					nextb.css({'right':((windowWidth/2) -( w/2) - 130)+'px'});
				
				
				//else nextb.css({'width':w+80+'px'});
				var rand=300+45;
				main.css({'height':h+'px','margin-left':"0px"});
			}
			else
			{
				var w=windowWidth-150;
				var h=w/aspect;
				mainImg.height=h;
				mainImg.width=w;
				
				//$('#'+key+' .photoslider_main img').css({'margin-left':(Math.round((windowWidth-w)/2)) + "px"});
				
				
				caption.css({'padding-top':25+'px','width':(w+20)+'px'});
				holder.css({'margin-left':(windowWidth/2)-((550)/2)+'px'});
				
				prevb.css({'height':h+20+'px'});
				
				prevb.css({'left':((windowWidth/2) -( w/2) - 130)+'px'});
				
				//prevb.css({'left':((windowWidth/2) -( w/2) - 130)+'px'});

					nextb.css({'height':h+20+'px'});
					nextb.css({'right':((windowWidth/2) -( w/2) - 130)+'px'});
				
				//else nextb.css({'width':w+80+'px'});
				var rand=300+45;
				main.css({'height':h+'px','margin-left':"0px"});
			}
		}	*/
		
		
		$(".photoslider_main .social").css("left",($(".photoslider_main img").position().left + $(".photoslider_main img").width() - $(".photoslider_main .social").width()) + "px");

	},
	buildThumbBar: function(key,bar){
		if(this.bucket[key] == null){
			return false;
		}

		var slot = 0;

		this.thumbCount = 0;
		for(i in this.bucket[key]){
			this.thumbCount++;
			var div = $(document.createElement('div'));
			div.attr('imageid',i);
			div.attr('slot',slot++);
			div.addClass('photoslider_thumb');
			//var img = document.createElement('img');
			 
			var img = $(new Image());
			
			img.attr("src",this.getUrlFromId(key,i,true));
			img.css({'height':this.data[key]['thumbHeight']+'px'});
			
			//attach the image to the div
			
			
			img.load(function(){
//				this.parent().css({'left':10+'px'});
			});
			//attach the div to our thumbnail bar
			div.append(img);
			$(bar).append(div);

			//calc the width (needed for later)
			/*this.data[key]['thumbWidth'] =
				parseInt(div.css('width'))
				+parseInt(div.css('border-left-width'))
				+parseInt(div.css('border-right-width'))
				+parseInt(div.css('margin-left'))
				+parseInt(div.css('margin-right'))
				+parseInt(div.css('padding-left'))
				+parseInt(div.css('padding-right'));*/
		}

		//we need to add a clear since we have floating divs
		var clear = document.createElement('div');
		$(clear).addClass('photoslider_clear');

		//finally we need to force the width of the bar so that the divs don't wrap to the next line
		// we give it 1 extra slot just for buffer
		$(bar).css('width',((slot+2)*this.data[key]['thumbWidth']+150)+'px');
		$(bar).append(clear);
	},

	//loads in the slideshow, replaces the existing one if set
	reload: function(key){
				if(this.data[key] == null){
			this.data[key] = new Object();
		}
		this.key=key;
		this.data[key]['thumbWidth'] = 72;
		this.data[key]['thumbHeight'] = 60;		
		this.data[key]['paused'] = true;
		this.data[key]['currentSlot'] = 0;
		this.data[key]['currentId'] = null;

		var sliderDiv = $('#'+key);
		sliderDiv.addClass('photoslider_class');
		var sliderMain = $('#'+key+' .photoslider_main').get(0);
		if(sliderMain != null){
			$(sliderMain).remove();
		}

		sliderMain = $(document.createElement('div'));
		sliderMain.addClass('photoslider_main');

		var prevButton = $(document.createElement('div'));
		prevButton.addClass('prev');
		$(prevButton).mouseover(function(){
			prevButton.toggleClass('prev_hover');
		});
		$(prevButton).mouseout(function(){
			prevButton.toggleClass('prev_hover');
		});
		$(prevButton).click(function(){
			FOTO.Slider.prev();
		});
		sliderMain.append(prevButton);
		
		var sliderMainLink = $(document.createElement('a'));
		sliderMainLink.attr("rel","prettySociable");
		sliderMainLink.attr("href","#");
		sliderMainLink.click(function(){return false});
		
		sliderMainImg = document.createElement('img');
		sliderMainImg.width=20;
		
		var sliderSocial = $(document.createElement('div'));
		sliderSocial.addClass("social");
		sliderSocial.html(
			"<ul><li id='facebook'></li><li id='twitter'></li><li id='linkedin'></li><li id='mail'></li></ul>"
		);
		
		sliderMain.append(sliderMainLink.append(sliderMainImg));
		
		$(sliderMain).hover(function(){
			
			sliderSocial.fadeIn();
		},function(){
			
			sliderSocial.fadeOut();	
		});
		
		$(".social li").live('click',function(){
			
			handleSocial(this);

		});
	
		var nextButton = $(document.createElement('div'));
		nextButton.addClass('next');
		
		sliderMain.append(nextButton);
		sliderMain.append(sliderSocial);
		$(nextButton).mouseover(function(){
			nextButton.toggleClass('next_hover');
		});
		$(nextButton).mouseout(function(event){
			nextButton.toggleClass('next_hover');
		});
		$(nextButton).click(function(){
			FOTO.Slider.next();
		});

		sliderDiv.append(sliderMain);
		
		var thumbButton = $(document.createElement('div'));
		thumbButton.addClass('thumbnailbutton');
		
	/*	$(thumbButton).mouseover(function(){
			thumbButton.toggleClass('thumbnailbutton_hover');
		});
		
		$(thumbButton).mouseout(function(event){
			thumbButton.toggleClass('thumbnailbutton_hover');
		});*/
		
		
		thumbButton.toggleClass('thumbnailbutton_hover');
		
		var lineBottom = $(document.createElement('div'));
		lineBottom.addClass('line_bottom');
		
		var sliderCaption = $(document.createElement('div'));
		sliderCaption.addClass('photoslider_caption');
		
		var navHolder = $(document.createElement('div'));
		navHolder.addClass('photoslider_navHolder');
		
		sliderDiv.append(sliderCaption);
		
		sliderDiv.append(thumbButton);
		sliderDiv.append(lineBottom);
		
		
		
		var sliderNav = $('#'+key+' .photoslider_nav').get(0);
		if(sliderNav != null){
			//remove it
			$(sliderNav).remove();
		}

		//sliderNav = $(document.createElement('div'));
		//sliderNav.addClass('photoslider_nav');
		

		navHolder.append(sliderNav);
		
		thumbBarOverlay = $(document.createElement('div'));
		thumbBarOverlay.addClass('photoslider_thumbBarOverlay');
		
		thumbBar = $(document.createElement('div'));
		thumbBar.addClass('photoslider_thumbBar');
		
		var main = $('#'+key+' .photoslider_main');
		$(thumbButton).click(function(){
			var key = FOTO.Slider.key;

			var main = $('#'+key+' .photoslider_main');
			var mainImg = $('#'+key+' .photoslider_main img').get(0);
			
			if (FOTO.Slider.thumbState==0){
				FOTO.Slider.thumbState=1;
				
				var thumb = $('#'+key+' .photoslider_thumbBar');
				var prevb2 = $('.nav_left');
				var nextb2 = $('.nav_right');
				prevb2.fadeOut(500);
				nextb2.fadeOut(500);
				thumb.animate({top:-80}, 500,"swing",FOTO.Slider.setWindow);
				thumbButton.toggleClass('thumbnailbutton_hover');
			}
			else
			{
				var thumb = $('#'+key+' .photoslider_thumbBar');
				FOTO.Slider.thumbState=0;
				
				thumb.animate({top:0}, 500);
				FOTO.Slider.setWindow();
				var ol = $('#'+key+' .photoslider_thumbBarOverlay');
				var main = $('#'+key+' .photoslider_main');
				var holder = $('#'+key+' .photoslider_navHolder');	
				var prevb2 = $('.nav_left');
				var nextb2 = $('.nav_right');
				ol.css({'height':80+'px'});
				holder.css({'height':80+'px'});
				prevb2.css({'height':80+'px'});
				nextb2.css({'height':80+'px'});
				prevb2.show();
				nextb2.show();
				thumbButton.toggleClass('thumbnailbutton_hover');
				
			}
			//FOTO.Slider.setWindow();			
			
		});

		//build the bar
		this.buildThumbBar(key,thumbBar);

		//now we need to attach our events
		$(thumbBar).children('.photoslider_thumb').each(function(){
			//what happens when we click on a thumbnail?
			$(this).click(function(ev){
				FOTO.Slider.thumbClick(ev);
			});
		});

		//attach our thumb nail bar to our parent
		
		
		
		
		var navLeft = $(document.createElement('div'));
		navLeft.addClass('nav_left');
		$(navLeft).mouseover(function(){
			navLeft.toggleClass('nav_left_hover');
		//	FOTO.Slider.intervalId = setInterval(function(){
		//	FOTO.Slider.slide('left');
		//	},(1000/30));
		});
		
		$(navLeft).mouseout(function(event){
			navLeft.toggleClass('nav_left_hover');
			//var id=FOTO.Slider.intervalId;
			//clearInterval(id);
		});
		$(navLeft).click(function(){
			FOTO.Slider.prev();
		});
		
		
		navHolder.append(navLeft);
		
		thumbBarOverlay.append(thumbBar);
		navHolder.append(thumbBarOverlay);
		
		//sliderDiv.append(navHolder);
		var navRight = $(document.createElement('div'));
		navRight.addClass('nav_right');
		navHolder.append(navRight);
		
		
		$(navRight).mouseover(function(){
			navRight.toggleClass('nav_right_hover');			
		//	FOTO.Slider.intervalId = setInterval(function(){
		//	FOTO.Slider.slide('right');
		//	},(1000/30));
			
		});
		
		$(navRight).mouseout(function(event){
			navRight.toggleClass('nav_right_hover');
		//	var id=FOTO.Slider.intervalId;
		//	clearInterval(id);
		});
		$(navRight).click(function(){
			FOTO.Slider.next();
		});
		sliderDiv.append(navHolder);
		
		//build our play/stop buttons
		//var sliderControl = $(document.createElement('div'));
		//sliderControl.addClass('photoslider_control');

		//var sliderPlay = $(document.createElement('div'));
		//sliderPlay.addClass('photoslider_play');

		//var sliderStop = $(document.createElement('div'));
		//sliderStop.addClass('photoslider_stop');
////
		//var clear = $(document.createElement('div'));
		//clear.addClass('photoslider_clear');

		//sliderControl.append(sliderPlay).append(sliderStop).append(clear);

		//bind our click events to the buttons
		/*$(sliderPlay).click(function(){
			if(FOTO.Slider.data[key]['paused']){
				$(sliderPlay).addClass('slideshow_disabled');
				$(sliderStop).removeClass('slideshow_disabled');
				FOTO.Slider.play(key);
			}
		});

		$(sliderStop).click(function(){
			if(!FOTO.Slider.data[key]['paused']){
				$(sliderStop).addClass('slideshow_disabled');
				$(sliderPlay).removeClass('slideshow_disabled');
			}
			FOTO.Slider.stop(key);
		});

		sliderDiv.append(sliderControl);

*/
		//click our first element
		FOTO.Slider.setWindow();
		
		
		if(parseFloat(window.location.hash.replace("#","")) > 0){
			
			var firstThumb = $('#'+key+' .photoslider_thumb[slot=0]');
			
			$('#'+key+' .photoslider_thumb').each(function(){
				
				if(window.location.hash.replace("#","") == FOTO.Slider.getImgidFromId(key,$(this).attr("slot"))){
					
					//window.console.log($(this).attr("slot") + " : " + FOTO.Slider.getImgidFromId(key,$(this).attr("slot")));
					firstThumb = $('#'+key+' .photoslider_thumb[slot='+$(this).attr("slot")+']');
					
				}
			})
			
			firstThumb.click();
			
		}
		else{
			var firstThumb = $('#'+key+' .photoslider_thumb[slot=0]');
			firstThumb.click();
		}

		
	},
	next: function(ev){
		
		
		
		var key = FOTO.Slider.key;
		var slot = parseInt(parseInt(this.data[key]['currentSlot'])+1); 
		
		if(slot > FOTO.Slider.thumbCount - 1){
			
			slot = 0;
		}
		
		var firstThumb = $('#'+key+' .photoslider_thumb[slot='+slot+']');
		
		if (slot<FOTO.Slider.thumbCount){
			firstThumb.click();
		
		//var w=firstThumb.width()+20;
		//var thumb = $('#'+key+' .photoslider_thumbBar');
		//var newLeft=parseInt(thumb.css("left"))-w;	
		//thumb.animate({left:newLeft}, 500 );
		}
		
	},
	prev: function(ev){
		
		var key = FOTO.Slider.key;	
		
		
		var slot = parseInt(parseInt(this.data[key]['currentSlot'])-1); 
		
		if(slot < 0){
		
			slot = FOTO.Slider.thumbCount - 1;	
		}
		
		
		var firstThumb = $('#'+key+' .photoslider_thumb[slot='+slot+']');
		
		
		
		if (slot>=0)
		{
			firstThumb.click();
			//var w=firstThumb.width()+20;
			//var thumb = $('#'+key+' .photoslider_thumbBar');
			//var newLeft=parseInt(thumb.css("left"))+w;	
			//thumb.animate({left:newLeft}, 500 );
		}
	},
	thumbClick: function(ev){
		
		
		//find our main parent
		var thumb = null;


		if(ev.currentTarget){
			thumb = $(ev.currentTarget);
		} else if(ev.srcElement){
			//work around for IE's lack of currentTarget
			if( $(ev.srcElement).attr('src') == null){
				//they clicked on the div
				thumb = $(ev.srcElement);
			} else {
				//they clicked on the img
				thumb = $(ev.srcElement).parent();
			}
		}	else if (ev.target) {
			thumb = $(ev.target);
		}

		var id = thumb.attr('imageid');
		var par = thumb.parent();
		var bar = par.parent();
		var nav = bar.parent();
		var parent = nav.parent();
		var key = parent.attr('id');
		var slot = thumb.attr('slot');
		if(id == null){
			id = 0;
		}
		if(slot == null){
			slot = 0;
		}

		if(id == this.data[key]['currentId']){
			return false;
		}

		this.resetTimer(key);
		
		var prevb = $('.prev');
		var prevb2 = $('.nav_left');
		prevb2.show();
		prevb.show();
		
		var nextb = $('.next');
		var nextb2 = $('.nav_right');
		nextb2.show();
		nextb.show();
		prevb2.css({'cursor':'pointer'});
		prevb.css({'cursor':'pointer'});
		nextb2.css({'cursor':'pointer'});
		nextb.css({'cursor':'pointer'});
		
	
		
		if (slot<=0)
		{
			/*
			var prevb = $('.prev');
			var prevb2 = $('.nav_left');
			prevb2.css({'cursor':'default'});
			prevb.css({'cursor':'default'});
			prevb2.css({'opacity':'0'});
			prevb.css({'opacity':'0'});
			*/
		}
		if (slot>=FOTO.Slider.thumbCount-1)
		{

			/*
			var nextb = $('.next');
			var nextb2 = $('.nav_right');
			nextb2.css({'opacity':'0'});
			nextb.css({'opacity':'0'});
			nextb2.css({'cursor':'default'});
			nextb.css({'cursor':'default'});
			*/
		}
		
		if (slot<0)
		{
			id = FOTO.Slider.thumbCount-1;
			slot = FOTO.Slider.thumbCount-1;
		}
		if(slot>FOTO.Slider.thumbCount-1){
			
			id = 0;
			slot = 0;	
		}
		
		
		var slideWidth=0;
		for (var i=0;i<slot;i++)
		{
			var t = $('#'+key+' .photoslider_thumb[slot='+i+']');
			var w=parseInt(t.width())+21;
			slideWidth+=w;
		
			//if(console){console.log("test");}
			
		}
		this.setMainImage(key,id);
		var left=40;//bar.offset().left;
		left = 0;
		
		
		var newLeft=left - slideWidth;
		
		$(".photoslider_thumbBar").width(100000);
		var thumbbarWidth = $(".photoslider_thumbBar").width();
		
		//window.console.log(thumbbarWidth);
		thumbbarWidth = $(".photoslider_thumbBar .photoslider_thumb:last").position().left + $(".photoslider_thumbBar .photoslider_thumb:last").width() + 21;
		
		
		var overlayWidth = $(".photoslider_thumbBarOverlay").width();
		
		if(thumbbarWidth < overlayWidth){
		
			newLeft = left;
		}
		else if(newLeft + thumbbarWidth < overlayWidth){
			
			newLeft = 	overlayWidth - thumbbarWidth;
		}

		

		//if(console){console.log(thumbbarWidth);}

		
		
		
		var thumb = $('#'+key+' .photoslider_thumbBar');
		thumb.animate({left:newLeft}, 500 );
	
		if(this.data[key]['currentId'] != null){
			$('.photoslider_thumb[imageid='+this.data[key]['currentId']+']').css('border','4px solid #d8d8d8');
		}

		

		this.data[key]['currentId'] = id;
		this.data[key]['currentSlot'] = slot;

		//dark border
		$('.photoslider_thumb[imageid='+this.data[key]['currentId']+']').css('border','4px solid #3a3a3a');	
	},

	//preloads the image for the main viewing area
	setMainImage: function(key,id){
		var main = $('#'+key+' .photoslider_main');
		var mainImg = $('#'+key+' .photoslider_main img').get(0);
		FOTO.Slider.setWindow();
		mainImg.height=16;
		mainImg.width=16;
		var windowHeight = document.body.clientHeight;
		var windowWidth = document.body.clientWidth;
		var rand=300+45;
		//main.css({'margin-left':(windowWidth/2)-(16/2)-rand+'px'});
				
		//set the mainImg to the spinner
		
		mainImg.src = this.loadingURL;


/*****


*****/
		//preload the image and on return set our image
		this.preload(this.getUrlFromId(key,id,false),FOTO.Slider.displayMainImage,{key: key, id: id});
		
	},

	displayMainImage: function(img){
		var newSrc = ($(this).get())[0].src;

		var args = this.args;
		var key = args['key'];
		var id = args['id'];
		var main = $('#'+key+' .photoslider_main');
		var mainImg = $('#'+key+' .photoslider_main img').get(0);
		var mainUrl = $('#'+key+' .photoslider_main a');
		var caption = $('#'+key+' .photoslider_caption');
		var captionTxt = FOTO.Slider.getCaptionFromId(key,id);
		
		if(captionTxt == null){
			captionTxt = '&nbsp;'; //make it play nice in browsers like ie
		}
		caption.html(captionTxt);
		
		
		mainUrl.attr("href",FOTO.Slider.getLinkFromId(key,id));
		mainUrl.attr("title",captionTxt);
		mainUrl.attr("imgid",FOTO.Slider.getImgidFromId(key,id));
		window.location.hash = FOTO.Slider.getImgidFromId(key,id);
		

		
		
		
		$(mainImg).attr('src',newSrc);
		$(mainImg).removeAttr("width"); 
		$(mainImg).removeAttr("height");
	
		

		//Refresh window and image size
		FOTO.Slider.setWindow();
	},

	//preload an image and fire off a callback if needed
	preload: function(url,onLoadFunc,args){
		var image = document.createElement('img');
		if(onLoadFunc){
			image.onload = onLoadFunc;
		}

		if(args){
			image.args = args;
		}

		image.src = url;
		this.imageCache[url] = image;
		return image;
	},

	enableSlideshow: function(key){
		$('#'+key+' .photoslider_control').css('display','block');
		this.data[key]['slideshow'] = true;
	},

	//loops through the images available and preloads them one at a time
	preloadImages: function(key){
		//we've already started preloading "0" so start at "1"
		if(this.bucket[key] != null && this.bucket[key][1] != null){
			this.preload(this.getUrlFromId(key,1,false),FOTO.Slider.preloadImageChain,{key: key,slot: 1});
		}
	},

	preloadImageChain: function(){
		var args = this.args;
		var key = args['key'];
		var slot = parseInt(args['slot'])+1;
		if(FOTO.Slider.bucket[key] != null && FOTO.Slider.bucket[key][slot] != null){
			FOTO.Slider.preload(FOTO.Slider.getUrlFromId(key,slot,false),FOTO.Slider.preloadImageChain,{key: key,slot: slot});
		}
	},

	//returns the absolute coords based on where it is on the page (works w/ scrolled content)
	findAbsolutePos: function(el){
		var SL = 0, ST = 0;
		var is_div = /^div$/i.test(el.tagName);
		if (is_div && el.scrollLeft)
			SL = el.scrollLeft;
		if (is_div && el.scrollTop)
			ST = el.scrollTop;
		var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
		r.width = el.offsetWidth;
		r.height = el.offsetHeight;

		if (el.offsetParent) {
			var tmp = this.findAbsolutePos(el.offsetParent);
			r.x += tmp.x;
			r.y += tmp.y;
		}
		return r;
	},

	//this is just like the findAbsolutePos, but stops if a parent's css is "position:relative;"
	findRelativePos: function(el){
		var SL = 0, ST = 0;
		var is_div = /^div$/i.test(el.tagName);
		if (is_div && el.scrollLeft)
			SL = el.scrollLeft;
		if (is_div && el.scrollTop)
			ST = el.scrollTop;
		var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
		r.width = el.offsetWidth;
		r.height = el.offsetHeight;

		if (el.offsetParent) {
			if($(el.offsetParent).css('position') != 'relative'){
				//stop if we have a relative parent
				var tmp = this.findRelativePos(el.offsetParent);
				r.x += tmp.x;
				r.y += tmp.y;
			} else {
				r.x += 0;
				r.y += 0;
			}
		}
		return r;
	},

	cycleImage: function(key){
		var slot = parseInt(parseInt(this.data[key]['currentSlot'])+1); //force this to be a number

		var thumb = $('#'+key+' .photoslider_thumb[slot='+slot+']').get(0);
		if(thumb == null){
			//perhaps we're at the end or don't have a valid slot, try slot 0
			thumb = $('#'+key+' .photoslider_thumb[slot=0]').get(0);
			if(thumb == null){
				//there is no slot available, return
				this.data[key]['paused'] = true;
				return false;
			}
		}
		$(thumb).click();
	},

	play: function(key){
		if(this.data[key]['paused']){
			this.data[key]['intervalCycle'] = setInterval(function(){FOTO.Slider.cycleImage(key);},FOTO.Slider.duration);
		}
		this.data[key]['paused'] = false;
	},

	stop: function(key){
		this.data[key]['paused'] = true;
		if(this.data[key]['intervalCycle']){
			clearInterval(this.data[key]['intervalCycle']);
		}
	},

	resetTimer: function(key){
		if(!this.data[key]['paused'] && this.data[key]['intervalCycle']){
			this.stop(key);
			this.play(key);
		}
	}

};


SKEL.Transitions = {

	/* Many of these functions come from Robert Penner and mootools
	**  http://www.robertpenner.com/easing/
	**  http://mootools.net
	**
	** For more methods check
	**  http://opiefoto.com/js/skel/transitions.js
	*/

	quadOut: function(t, b, c, d){
		return -c *(t/=d)*(t-2) + b;
	},

	backOut: function(t, b, c, d, s){
		if (!s) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	}

};


SKEL.EFFECTS.Slide = {
	counter: 0,
	fps: 50,

	//handles the animation from an attribute to an attribute
	animate: function(element,cssAttribute,from,to,duration,transition){

		if(element.css('display') != 'block'){
			element.skel_old_display = element.css('display');
		}

		//if there isn't a default transition set one
		if(!transition){
			transition = SKEL.Transitions.quadOut;
		}

		//cancel any current animation
		SKEL.EFFECTS.Slide.stop(element);

		var startTime = new Date().getTime();

		//IE doesn't support arguments, so make a function that explicitly calls with those arguments
		element.skel_animate_id = setInterval(function(){
			SKEL.EFFECTS.Slide.step(element,cssAttribute,from,to,duration,startTime,transition);
		},(1000/SKEL.EFFECTS.Slide.fps));

		return element.skel_animate_id;
	},

	//cancels any animation event
	stop: function(element){
		//console.log(this,element,element.skel_animate_id);
		//console.log(element.skel_animate_id);
		if(element.skel_animate_id){
			clearInterval(element.skel_animate_id);
			element.skel_animate_id = 0;
			if(element.skel_old_display){
				element.css('display',element.skel_old_display);
			}
		}

	},

	//cancels any animation event
	stopByIntervalId: function(id){
		if(id){
			clearInterval(id);
		}
	},

	step: function(element,cssAttribute,from,to,duration,start,transition){
		var curTime = new Date().getTime();

		if(cssAttribute == 'color' || cssAttribute == 'background-color'){
			from = this.hexToRgb(from);
			to = this.hexToRgb(to);
		} else {
			//what we use to finalize the unit
			var result = this.splitValue(from);
			var prefix = result.prefix;
			if(prefix == '-')
				prefix = '';
			var postfix = result.postfix;

			from = parseInt(from);
			to = parseInt(to);
		}

		//compute the new property
		var newValue = SKEL.EFFECTS.Slide.compute(curTime,from,to,duration,start,transition);

		var finished = false;

		if(curTime > (start+duration)){
			finished = true;
		}
		if(cssAttribute == 'color' || cssAttribute == 'background-color'){
			newValue = this.rgbToHex(newValue);
		} else {
			newValue = prefix+Math.round(newValue)+postfix;
		}

		if(finished){
			SKEL.EFFECTS.Slide.stop(element);
		}

		//window.alert('css: '+cssAttribute+' new:'+newValue+' element: '+element);
		element.css(cssAttribute,newValue);
	},

	//thanks to mootools and Robert Penner
	compute: function(time,from,to,duration,startTime,transitionFunc){
		var deltaTime = time-startTime;
		if(time > (startTime + duration)){
			//we're past our point, return max
			return to;
		} else {
			if(typeof(from) == 'object'){
				//if we have an object, compute all the transitions\
				var tmpObject = Array();
				from.forEach(function(value,index){
					newFrom = value;
					newTo = to[index];
					newValue = transitionFunc(deltaTime,newFrom,(newTo-newFrom),duration);
					tmpObject[index] = Math.round(newValue);
				});
				return tmpObject;
			} else {
				return transitionFunc(deltaTime,from,(to-from),duration);
			}
		}
	},

	hexToRgb: function(str){
		var hex = str.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
		if(hex){
			if(hex[1] != ''){
				hex[1] = parseInt(hex[1],16);
				hex[2] = parseInt(hex[2],16);
				hex[3] = parseInt(hex[3],16);
			}
		}

		return (hex) ? hex.slice(1) : false;
	},

	rgbToHex: function(rgb){
		if (rgb.length < 3) return false;
		if (rgb[3] && (rgb[3] == 0) && !rgb) return 'transparent';
		var hex = [];
		for (var i = 0; i < 3; i++){
			var bit = (rgb[i]-0).toString(16);
			hex.push((bit.length == 1) ? '0'+bit : bit);
		}
		return '#'+hex.join('');
	},

	//returns prefix,postfix,value eg: #ff0000 {prefix: #, value: ff0000}, abc123efg {prefix: abc, value: 123, postfix: efg}
	splitValue: function(str){
		result = {
			prefix: '',
			postfix: '',
			value: ''
		}
		if(str != ''){
			var res = str.match(/([^0-9]*)([0-9]+)([^0-9]*)/);
			//try{
			result = {
				prefix: res[1],
				postfix: res[3],
				value: res[2]
			};
		}
		return result;

	}

}