(function($){

	$.fn.dgSlideshow = function(options){
	
		$(this).each(function(){
			// alert("This is just a test");
		});
		
		return this;
	}

})(jQuery);

jQuery(document).ready(function(){
	// $(".portfolio_piece_thumbnail").wrap('<div class="portfolio_thumbnail_wrap"></div>');
	
	var xx = new $('#portfolio_previews').dgSlideshow();
	
	var thumbs = $(".portfolio_piece_thumbnail");
	
	var n = thumbs.length;
	
	var totalWidth = 0;
	
	for (var i=0; i<n; i++) {

		w = $(thumbs[i]).width();
	
		var newL = i*(w+6);
		var newLString = newL+"px";
		
		totalWidth = totalWidth + w + 6;
	
		$(thumbs[i])[0].style.float = "none";
		$(thumbs[i])[0].style.position = "absolute";
		$(thumbs[i]).animate({left:newLString});
	}
	
	totalWidth = totalWidth + 48;
	
	$("#portfolio_previews").addClass("scripted");
	
	$("#portfolio_previews")[0].style.width = totalWidth+"px";
	
	$("#portfolio_previews").before('<div id="slideshow_content"><div id="slideshow_content_image_container"><img id="slideshow_content_image" alt="Image"/></div><div id="slideshow_content_description"><h3>Title of the Piece</h3><div id="slideshow_detail_content">This is just a description of the piece.</div></div></div>');
	$("#portfolio_previews").wrap('<div id="slideshow_thumbnails_wrap"><div id="slideshow_thumbnails_strip"></div></div>');
	
	$("#slideshow_thumbnails_strip").before('<img id="slideshow_left_arrow" src="/site_media/images/left_arrow_dim.png" alt="Last Group"/>');
	$("#slideshow_thumbnails_strip").after('<img id="slideshow_right_arrow" src="/site_media/images/right_arrow.png" alt="Next Group"/>');
	
	var strip = $("#slideshow_thumbnails_strip")[0];
	
	strip.hasMoreLeftContent = function(){
	
		var previews = $(this).find('#portfolio_previews')[0];
		
		var l = $(previews).position().left;
		
		var isEnd =! l <= 0;
		
		return isEnd;
	}
	
	strip.hasMoreRightContent = function(){

		var previews = $(this).find('#portfolio_previews')[0];
		
		var l = $(previews).position().left;
		var w = $(previews).width();
		
		var rightOffset = l + w - $(this).width();
		
		var isEnd = rightOffset > 0;
		
		return isEnd;
	}
	
	$("#slideshow_left_arrow").click(function(evt){
	
		var strip = $("#portfolio_previews")[0];

		var pos = $(strip).position();
		
		oldLeft = pos.left;
		
		var newLeft = oldLeft+600;
		
		if (newLeft > 0) newLeft = 0;
		
		$(strip).animate({left:newLeft}, null, null, function(){
			slideshowUpdateInterface();
		});
	});
	
	$("#slideshow_right_arrow").click(function(evt){
	
		var strip = $("#portfolio_previews")[0];
		var w = $(strip).width();
		var cw = $("#slideshow_thumbnails_strip").width();
		
		var pos = $(strip).position();
		
		oldLeft = pos.left;
		
		var newLeft = oldLeft-600;

		if ((newLeft*-1) +cw > w) newLeft = cw - w;
		
		if ((newLeft*-1) + cw >= w) disableSliderArrow(this);

		$(strip).animate({left:newLeft}, null, null, function(){
			slideshowUpdateInterface();
		});
	});
	
	$("#portfolio_previews a").click(function(event){
	
		var l = $(this).attr('href').split('/');
	
		var n = l.length;
		var t = l[n-2];
	
		$.get('/portfolio/piece_detail_ajax/'+t+'/', slideshowHandleAjaxResponse);
		
		event.stopPropagation();
		activateThumb(this);
		return false;
	});
	
	activateThumb(thumbs[0]); // Activates the first thumbnail so that its large image is diaplayed in the content area
});

function slideshowHandleAjaxResponse(data) {
	$('#slideshow_content_description h3').replaceWith('<h3>'+data['title']+'</h3>');
	$('#slideshow_detail_content').replaceWith('<div id="slideshow_detail_content">'+data['description']+'</div>');
}

function slideshowUpdateInterface() {
	
	var s = $("#slideshow_thumbnails_strip")[0];
	
	if (s.hasMoreLeftContent()) enableSliderArrow($('#slideshow_left_arrow')[0]);
	else disableSliderArrow($('#slideshow_left_arrow')[0]);
	
	if (s.hasMoreRightContent()) enableSliderArrow($('#slideshow_right_arrow')[0]);
	else disableSliderArrow($('#slideshow_right_arrow')[0]);
}

function disableSliderArrow(arrow) {

	$(arrow).attr('src', $(arrow).attr('src').replace(/^(.*)_arrow.png$/, '$1_arrow_dim.png'));
}

function enableSliderArrow(arrow) {

	$(arrow).attr('src', $(arrow).attr('src').replace(/^(.*)_arrow_dim.png$/, '$1_arrow.png'));
}

function activateThumb(thumb) {

	var target = thumb.href;
	var img = $(thumb).find("img")[0];
	
	var src = img.src;
	if (src) {
		var newSrc = src.replace(/\.128x128/, "");
		$("#slideshow_content_image").attr({"src": newSrc});
		slideshowUpdateInterface();
		// window.location = newSrc;
	}
}