var page_width = 800;
var page_height = 482;
var panels_h = 3;
var panel_width = 230;
var middle_panel = (page_width/2)-(panel_width/2);
var thumb_set = 7;
jQuery(document).ready(function($){
	var accent = new portfolio();
	$.ajax({
	    type: "GET",
	    url: "xml/5x2_black.xml",
	    dataType: "xml",
	    success: accent.parseXml
	});

	function portfolio(){
			this.parseXml = parseXml;
			this.portfolio = new Object();
			this.show_cats = show_cats;
			this.show_cat = show_cat;
			this.panels = new Array("tl","tc","tr", "bl", "bc", "br");
			this.images = new Array();
	}
	function parseXml(xml){
	  var i = 1;
	  	$(xml).find("item").each(function(){
		  	accent.portfolio[i] = new Object();
		  	accent.portfolio[i]['thumb'] = $(this).children('thumb').text();
		  	accent.images.push(accent.portfolio[i]['thumb']);
		  	accent.portfolio[i]['text'] = $(this).children('largeTextBody').text();
		  	accent.portfolio[i]['gallery'] = new Object();
	  			var j = 0;
	  			$(this).find('content').each(function(){
	  				accent.portfolio[i]['gallery'][j] = new Object(); 
	  				accent.portfolio[i]['gallery'][j]['thumb'] = $(this).children('thumb').text();
	  				accent.portfolio[i]['gallery'][j]['large'] = $(this).children('large').text();
						//Add to preload array
						if(j < 8){
							accent.images.push(accent.portfolio[i]['gallery'][j]['thumb']);
							/*accent.images.push(accent.portfolio[i]['gallery'][j]['large']);*/
						}
	  				j++;
		  		});
		  		
			i++;
	  });
	  	$('<img/>')[0].src = 'images/progress.gif';
	  	$.preload(accent.images, {
	  	 		init: function(loaded, total) {
  	 				$('#gallery_wrap').append('<div id="notice_wrap" style="height: 102%;background: black;position: absolute;width: 100%;z-index: 100;top: -1px;"><div id="notice" style="background:url(images/progress.gif) no-repeat top center;padding-top:31px;width:30px;margin: 200px auto;color:white;font-size: 12px;line-height: 30px;font-family: sans-serif;"></div></div>');
	  	 		},
	  	 		loaded: function(img, loaded, total) {
	  	 			$('#notice').html(loaded+"/"+total);
	  	 			
	  	 		},
	  	 	 	loaded_all: function(loaded, total) {
	  	 			$('#notice_wrap').fadeOut(600, function(){
							$(this).remove();
		  	 			});
	  	 		}
	  	 	});		  	
	  accent.show_cats();
	  $('.back').addClass('flip');
	}
	function show_cats(){
		$('#gallery_wrap').append('<div class="gallery gallery_list"></div>');
		
		k = 0;
		for (x in accent.portfolio){
			//alert(accent.panels[k]);
			if(accent.panels[k] == 'tc' || accent.panels[k] == 'bc' ){
				var pos = 'style="left:285px"';
			}else{
				pos = '';
			}
			//alert(accent.portfolio[x].text);
			$('.gallery_list').append('<div class="panel '+accent.panels[k]+'" '+pos+'><a rel="'+x+'" class="category" style="background-image:url('+accent.portfolio[x].thumb+')"></a></div>');
			k++;
		}
	}
	function show_cat(cat){
		var nav = '<div class="nav_wrap"><ul class="nav" style="display:none;">';
		for (x in accent.portfolio[cat].gallery){
			nav += '<li class="thumb"><img src="'+accent.portfolio[cat].gallery[x].thumb+'" rel="'+accent.portfolio[cat].gallery[x].large+'"></li>';					          					
		}
		nav += '</ul></div>';

		var col = '<div class="col"><p>'+accent.portfolio[cat].text+'</p><a class="back" rel="'+cat+'">Back to Gallery</a></div>';
		
		return '<div class="gallery" style="width:800px;margin:0 auto;"><div class="stage" style="height:482px;"><img src="'+accent.portfolio[cat].gallery[0].large+'" style="z-index: 5; " class="">'+nav+col+'</div></div>'; 
	}
	function close_cat(cat){
		$('.nav').fadeOut();
		$('#gallery_wrap').append('<div class="panel tl"></div><div class="panel tc"></div><div class="panel tr"></div><div class="panel bl"></div><div class="panel bc"></div><div class="panel br"></div>');
		var gallery = show_cat(cat);
		$('.panel').append(gallery).find('.flip').removeClass('flip');
		$('#gallery_wrap > .gallery').remove();

		//Widen All Panes
		$('.tr, .br').animate({height:'220px',width:'230px', right:'2px'});
		$('.tl, .bl').animate({height:'220px',width:'230px'});
		$('.tc, .bc').animate({height:'220px',width:'230px', left:'285px'}, 400, function(){
				back_to_cats();
			});
	}
	function back_to_cats(){
		$('.tr, .br').animate({width:'0', right:'82px'});
		$('.tl, .bl').animate({width:'0', left:'80px'});
		$('.tc, .bc').animate({width:'0', left:'385px'},400, function(){
				k = 1;
				$('.panel').each(function(){
					if(k < 7){
						$(this).html('<a class="category" rel="'+k+'" style="background-image:url('+accent.portfolio[k].thumb+')"></a>');
					}
					k++;
				});
				$('.tr, .br').animate({width:'230px', right:'2px'});
				$('.tl, .bl').animate({width:'230px', left:'0'});
				$('.tc, .bc').animate({width:'230px', left:'285px'});
			});
	}
	//Show Category
	$('body').delegate('.category', 'click', function(){
		cat = $(this).attr('rel');
		var clone = show_cat(cat);
		
		$('.tl').animate({width:0, left:(panel_width/2)+'px'}, 300, function(){
			$('.tl').children().remove().end().html(clone);
			$('.tl').animate({width:panel_width+'px', left:'0'}, 300);	
		});
		$('.tc').animate({width:0, left:(middle_panel+(panel_width/2))+'px'}, 300, function(){
			$('.tc').children().remove().end().html(clone);
			$('.tc').animate({width:panel_width+'px', left:middle_panel+'px'}, 300);	
		});
		$('.tr').animate({width:0, right:(panel_width/2)+'px'}, 300, function(){
			$('.tr').children().remove().end().html(clone);
			$('.tr').animate({width:panel_width+'px', right:'0'}, 300);	
		});
		$('.bl').animate({width:0, left:(panel_width/2)+'px'}, 300, function(){
			$('.bl').children().remove().end().html(clone);
			$('.bl').animate({width:panel_width+'px', left:'0'}, 300);	
		});
		$('.bc').animate({width:0, left:(middle_panel+(panel_width/2))+'px'}, 300, function(){
			$('.bc').children().remove().end().html(clone);
			$('.bc').animate({width:panel_width+'px', left:middle_panel+'px'}, 300);	
		});
		$('.br').animate({width:0, right:(panel_width/2)+'px'}, 300, function(){
			$('.br').children().remove().end().html(clone);
			$('.br').animate({width:panel_width+'px', right:'0'}, 300, function(){
					//Widen All Panes
					$('.tr, .br').animate({height:(page_height/2)+'px',width:(page_width/panels_h)+'px', right:'2px'}, 400);
					$('.tl, .bl').animate({height:(page_height/2)+'px',width:(page_width/panels_h)+'px'}, 400);
					$('.tc, .bc').animate({height:(page_height/2)+'px',width:(page_width/panels_h)+'px', left:(page_width/panels_h)+'px'}, 400, function(){
							var gallery = $('.panel').html();
							$('.panel').remove();
							//$('#gallery_wrap').append('<div class="gallery"></div>');
							//if($('#gallery_wrap').children().length == 0){
								//Hide thumbs after 4
								$('.nav li').hide().slice(0, thumb_set).show();
								check_arrs();
								$('#gallery_wrap').append(gallery).find('.nav').fadeIn(400, function(){
									$('.back').addClass('flip');
								});
							//}
						});
				});	
		});
		return false;
		});
	
	//Check if thumbnails navigation needed
	function check_arrs(){
		$('.prev_arr, .next_arr').remove();
		if($('.thumb:visible').first().prevAll().size() > 0){
			$('.nav').prepend('<li class="prev_arr">&nbsp;</li>');
		}else{
			$('.prev_arr').remove();
		}
		if($('.thumb:visible').last().nextAll().size() > 0){
			$('.nav').append('<li class="next_arr">&nbsp;</li>');
		}else{
			$('.next_arr').remove();
		}
	}
	function next_thumbs(last){
		$('.nav li').hide().slice(last+1, (last+1)+thumb_set).show();
		check_arrs();
	}
	function prev_thumbs(first){
		$('.nav li').hide().slice(first-thumb_set, first).show();
		check_arrs();
	}
	$('body').delegate('.next_arr', 'click',function(){
		last = $('.thumb:visible').last().index();
		next_thumbs(last);
	});
	$('body').delegate('.prev_arr', 'click',function(){
		first = $('.thumb:visible').first().index();
		prev_thumbs(first);
	});
	//Show Thumbnail
	$('body').delegate(".nav img", 'click', function(){
			if($('.stage > img').length == 1){
				$('.stage').prepend('<img src="'+$(this).attr('rel')+'" style="z-index:10;display:none;" class="new_image">');
				$('.new_image').fadeIn(500, function(){
					$(this).removeClass('new_image').css('z-index', 5).siblings('img').remove();
				});
			}
		});
	
	//Back to Gallery
	$('body').delegate('.flip', 'click', function(){
		$(this).removeClass('flip');
		var cat = $(this).attr('rel');
		close_cat(cat);
		return false;
	});

	//Hide/Show Nav
	$('body').delegate('.stage > img', 'mouseover mouseout', function(event){
			if (event.type == 'mouseover') {
				$('.nav').animate({'bottom': '15px'});
				clearTimeout(hide);
			}
			if (event.type == 'mouseout') {
				hide = setTimeout("fadeNav()", 1000);
			}
		});
	$('body').delegate('.nav', 'mouseover', function(){
		clearTimeout(hide);
		});
});	
function fadeNav(){
	$('.nav').animate({'bottom': '-65px'});
}
(function($) {
	var imgList = [];
	$.extend({
		preload: function(imgArr, option) {
			var setting = $.extend({
				init: function(loaded, total) {},
				loaded: function(img, loaded, total) {},
				loaded_all: function(loaded, total) {}
			}, option);
			var total = imgArr.length;
			var loaded = 0;
			
			setting.init(0, total);
			for(var i in imgArr) {
				imgList.push($("<img />")
					.attr("src", imgArr[i])
					.load(function() {
						loaded++;
						setting.loaded(this, loaded, total);
						if(loaded == total) {
							setting.loaded_all(loaded, total);
						}
					})
				);
			}
			
		}
	});
})(jQuery);