$(document).ready(function(){

	(function() {
		$('#inner').css({
			width: '508px'
		});
		$('#leftColumn').ajaxStart(function(){
			$(this).addClass('preloader');
		});
		var catId;
		$("#subnavwrap a").each(function() {
			
			if($(this).hasClass("currentpage")) {
				catId = $(this).attr("id");
			}
		});
		retrieveXML(catId);
		
		if(artworkID != null) {
			var backlink = $("<a>Back</a>").attr({
				href: jQuery.url.segment(1),
				id: "backLink"
			});
			
			$("#subnavwrap").append(backlink)
		}
	})();
	
	function retrieveXML(catId) {
		$.ajax({
			type: "GET",
			url: "/includes/xml/artwork.xml",
			dataType: "xml",
			success: function(xml) {
				if(artworkID == null) {
					getArtwork(xml, catId);
				}
				else {
					getSpecificArtwork(xml, catId, artworkID ); // artworkID is a global var declared in includes
					setupPagination(xml, catId);
				}
			}
		});
	}
	
	function setupPagination(xmlObj, cat) {
		var curr;
		var total = 0;
		var tmpArray = [];
		var artwork = $(xmlObj).find("category").filter(function(){
			return $(this).attr("id") == cat;
		}).find("artwork").each(function(){
				total++;
				tmpArray.push($(this).attr("id"));
		});
		
		/*if() {
			$('<span><a href="javascript:void(0)">Next</a></span>').appendTo('#pagination');
			
		}*/
				
	}
	
	function getSpecificArtwork(xmlObj, catId, id) {
		if(artworkID == null) {
			$("#leftColumn").removeClass("preloader");
			$("#leftColumn").html('What you are looking for cannot be found. The URL may be faulty. Please return to the <a href="/artwork/index.php">Artwork</a> starting page and browser through artwork from here. Thank you.');
		} else {
			buildSpecificArtworkHTML(xmlObj, catId, id);
		}
	}
	
	function buildSpecificArtworkHTML(xmlObj, categoryId, id){
		var artworkObj = {
			id: "",
			name: "",
			description: "",
			thumblist: ""
		}
		$('<div id="fullsize"></div>').appendTo("#leftColumn");
		$('<div id="infoarea"><div id="artworktext"></div><div id="artworkthumbs"></div></div>').appendTo("#rightColumn");
		
		var artwork = $(xmlObj).find("category").filter(function(){
			return $(this).attr("id") == categoryId;
		}).find("artwork").filter(function(){
				return $(this).attr("id") == id;
		});
		var totalThumbs = 0;
		artwork.each(function() {
			var htmlThumbs = $('<ul id="smallthumbs"></ul>');
			var artImgText = {
				title: "",
				text: "",
				fullimg: ""
			}
			var i = 0;
			$(this).find("images").find("image").each(function(){
				i++;
				totalThumbs++;
				htmlThumbs.append('<li><a id="' + i +  '" href="javascript:void(0);"><img src="' + $(this).attr("smallpath") + '" width="54" height="54" alt="Thumbnail image" /></a></li>');
				artImgText[i] = {
					title: $(this).find("title").text(),
					text: $(this).find("text").text(),
					fullimg: $(this).attr("largepath"),
					year: $(this).find("year").text()
				}
			});
			artworkObj[id] = {
				id: id,
				name: $(this).find("name").text(),
				description: $(this).find("description").text(),
				thumblist: htmlThumbs,
				artImgTxt: artImgText
			}
		});
		if(totalThumbs > 1) {
			$("#artworkthumbs").append(artworkObj[id].thumblist);
			// set initial thumbnail
			var f = $("#smallthumbs li a:first");
			f.addClass("currthumb");
			$("#fullsize").html('<img src="' + artworkObj[id].artImgTxt["1"].fullimg + '" width="566" height="415" alt="' + artworkObj[id].artImgTxt[f.attr("id")].title + '" />');
			$("#artworktext").html('<h4>' + artworkObj[id].artImgTxt[f.attr("id")].title + '</h4>' + '<p>' + artworkObj[id].artImgTxt[f.attr("id")].text + '</p>' + '<p>' + artworkObj[id].artImgTxt[f.attr("id")].year + '</p>');

			// setup thumbnail click events
			$("#smallthumbs li a").click(function() {
				$("#smallthumbs li a").each(function(){
					$(this).removeClass("currthumb");
				});
				$(this).addClass("currthumb");
				$("#fullsize").empty();
				var img = $("<img />").attr({
						src: artworkObj[id].artImgTxt[$(this).attr("id")].fullimg
				});
				$("#artworktext").html('<h4>' + artworkObj[id].artImgTxt[$(this).attr("id")].title + '</h4>' + '<p>' + artworkObj[id].artImgTxt[$(this).attr("id")].text + '</p>' + '<p>' + artworkObj[id].artImgTxt[$(this).attr("id")].year + '</p>');
				//$("#artworktext").html('<p><strong>' + artworkObj[id].artImgTxt[$(this).attr("id")].title + '</strong>' + ', ' + artworkObj[id].artImgTxt[$(this).attr("id")].text + '</p>');
				$("#fullsize").append(img);
				//$("#fullsize").animate({ width: '0px', height: '0px' });
			});
		} else {
			$("#fullsize").html('<img src="' + artworkObj[id].artImgTxt["1"].fullimg + '" />');
			$("#artworktext").html('<h4>' + artworkObj[id].artImgTxt["1"].title + '</h4>' + '<p>' + artworkObj[id].artImgTxt["1"].text + '</p>' + '<p>' + artworkObj[id].artImgTxt["1"].year + '</p>');
		}
		
		
	}

	function buildArtworkHTML(thumbCount, secCount, obj, showTitles) {
		//if(thumbCount == 13) { alert(obj.parent().attr("id")); }
		// Create section blocks, start off with the first and then create one for every 12 thumbs
		if(thumbCount%12 == 0) {
			$('<div id="section_'+ secCount +'" class="sectionBlock"></div>').appendTo('#inner');
		}
		// Build the thumb block
		$('<div id="'+ obj.attr('id')  + '" class="thumbBlock"></div>').appendTo('#section_' + secCount);
		$('<a class="artworklink" id="artwork_' + obj.attr('id') + '" href="' + obj.parent().attr("url")+ '?artworkId='+ obj.attr("id") + '"></a>').appendTo('#' + obj.attr('id'));
		$('<img src="' + obj.find("thumbpath").text() + '" alt="" width="108" height="108" />').appendTo('#artwork_' + obj.attr('id'));
		if(showTitles == true){
			$('<p>' + obj.find("name").text() + '</p>').appendTo('#' + obj.attr('id'));
		}
		
		var innerWidth = secCount * 508;
		$('#inner').css({
			width: innerWidth + 'px'
		});
	}
	
	function getArtwork(xmlObj, catId) {
		var thumbCount = -1;
		var secCount = 0;
		$("#leftColumn").removeClass('preloader');
		$('<div id="center"><div id="inner" class="clearfix"></div></div>').appendTo("#leftColumn");
		if(catId == "category0") { // load all artwork
			$(xmlObj).find("category").find("artwork").each(function() {
				thumbCount++;
				if(thumbCount%12 == 0) {
					secCount++;
				}
				buildArtworkHTML(thumbCount, secCount, $(this), false);
			});
		} else { // load artwork for current category
			
			$(xmlObj).find("category").filter(function(){
				return $(this).attr("id") == catId;
			}).find("artwork").each(function(){
				thumbCount++;
				if(thumbCount%12 == 0) {
					secCount++;
				}
				buildArtworkHTML(thumbCount, secCount, $(this), true);
			});
		}
		if(catId == "category2") {
			var beginDiv = '<div class="overflow">';
			var endDiv = '</div>';
		} else {
			var beginDiv = "";
			var endDiv = "";
		}
		if(catId == "category0") {
			$("#rightColumn").html('<p>My work as a visual artist explores the concept of "value" through transformation. In this exploration, my goal is to transcend my chosen medium and create artwork informed by contemporary ideas and concepts while utilizing the language of metalsmithing and the methodology of the consummate craftsman.</p>');
		} else {
			$("#rightColumn").html(beginDiv + $(xmlObj).find("category").filter(function(){ return $(this).attr("id") == catId}).attr("text") + endDiv);
			if(catId == "category2"){
				$('.overflow').jScrollPane({
					showArrows: true,
					dragMinHeight: 10,
					dragMaxHeight: 10, 
					scrollbarWidth: 13,
					animateTo: true,
					animateStep: 10
				});
			}
		}
		var innerWidth = secCount * 508;
		setupNextAndPrev(innerWidth);
	}

	function setupNextAndPrev(innerWidth) {
		if(innerWidth > 508) {
			$('<a id="btnNextThumb" href="javascript:void(0)">Previous</a>').appendTo("#leftColumn").click(function(){
				if(parseInt($("#inner").css('left')) > -innerWidth+508 && !$("#inner").is(':animated')) {
					$("#inner").animate({
						left: '-=508'
					}, { queue: false, duration: 1000, easing: "expoEaseOut" });
				} else {
					return;
				}
			});
			$('<a id="btnPrevThumb" href="javascript:void(0)">Next</a>').appendTo("#leftColumn").click(function(){
				if(parseInt($("#inner").css('left')) < 0 && !$("#inner").is(':animated')) {
					$("#inner").animate({
						left: '+=508'
					}, { queue: false, duration: 1000, easing: "expoEaseOut" });
				} else {
					return;
				}
			});
		}
	}

});