var xmlPath = "http://www.thecroft.biz/admin/share/xml/gallery.xml";
var thumbContainer = "#dgSlider";
var photoContainer = "#dgPhoto";
var viewportWidth = 345;
var thumbnailWidth = 125;
var thumbnailMargin = 10;
var clickMovement = 135;
var leftIcon = "/media/images/left_arrow.png";
var rightIcon = "/media/images/right_arrow.png";

$(document).ready( $(function() {
	$.ajax({
		type: "GET",
		url: xmlPath,
		dataType: "xml",
		success: function(xml) {
	
			$(thumbContainer).append('<div id="dgViewport"><div id="dgBed"></div></div>');
			
			$("#dgViewport").css({
							position: "absolute",
							margin: "auto",
							width: viewportWidth + "px",
							overflow: "hidden"
			});
			
			$("#dgBed").css({
							position: "relative",
							width: "10000px",
							overflow: "visible"
			});	
			
			var currentPosition = 0;
			var sliderWidth = 0;
			var imageCounter = 0;
			
			var moveSlider = function( direction ) {
			 			
				switch( direction ) {
					case "left" : position = currentPosition + clickMovement; break;
					case "right" : position = currentPosition - clickMovement; break;
					default: position = currentPosition; break;
				}

				if( position >= 0 ) {
					position = 0;
					$(leftClicker).hide();
				} else $(leftClicker).show();

				if( position <= ( viewportWidth - sliderWidth ) ) {
					position = ( viewportWidth - sliderWidth );
					$(rightClicker).hide();
				} else $(rightClicker).show();

				if( sliderWidth > viewportWidth ) $("#dgBed").animate({ left: position + "px" }, {duration: 1000, easing: "easeOutExpo"});
					
				currentPosition = position;
						
			};
			
			var leftClicker = new Image();
			$(leftClicker).load( function(){
						$(this).hide();
						$(thumbContainer).append(this);
						$(this).show();
					})
					.attr('src', leftIcon)
					.css({
						float: "left",
						cursor: "pointer",
						margin: "37px 4px 0 5px",
						height: "13px",
						width: "9px"
					})
					.click( function() { moveSlider("left") } )
					.hide();
			
			var rightClicker = new Image();
			$(rightClicker).load( function(){
						$(this).hide();
						$(thumbContainer).append(this);
						$(this).show();
					})
					.attr('src', rightIcon)
					.css({
						float: "right",
						cursor: "pointer",
						margin: "37px 4px 0 5px",
						height: "13px",
						width: "9px"
					})
					.click( function() { moveSlider("right") } )
					.hide();
			
			var findString = ($(document).data("album") === undefined) ? "photo" : "album[id*="+$(document).data("album")+"] photo";
						
			$(xml).find(findString).each( function(){
								
				var node = $(this);			
				var img = new Image();
  
  			var imgCSS = {
  						cursor: "pointer",
  						float: "left"
  					};
  
  			$(img).load( function(){
      			$(this).hide();
      			$("#dgBed").append(this);
      			$(this).fadeIn();
    			})
    			.attr( 'src', $(this).find("thumb").text() )
    			.css( imgCSS )
    			.click( function(){
    			
    				var photo = new Image();
    				$(photo).load( function(){
	    				//var urlPath = "url(" + $(node).find("path").text() + ")";
	    				//$(photoContainer).hide().css('background', urlPath).fadeIn().width( 158 ).height( 158 );
	    				$(photoContainer).hide().children().remove().end().append(photo).fadeIn();
    				}).attr( 'src', $(node).find("path").text() );
    			 				
    			});
    			
				if( imageCounter == 0 ) {
					
    				var photo = new Image();
    				$(photo).load( function(){
	    				$(photoContainer).hide().children().remove().end().append(photo).fadeIn();
    				}).attr( 'src', $(node).find("path").text() );
					
				}

				sliderWidth += ( thumbnailWidth + thumbnailMargin );
				imageCounter++;
    						
			});
			
			sliderWidth -= thumbnailMargin;
			
            moveSlider();
					
		}
	});
}) );