jQuery.preloadImages = function() {
  for(var i = 0; i<arguments[0].length; i++) {
    $('<img />').attr('src', arguments[0][i]);
	
	if(i == arguments[0].length-1)
		setTimeout('gallery.initStrip()', 1000);
  }
}
var change = false;
var url = window.location.href.split('/'),
	strip = [], //preload image array
	debug = function(e) { console.log(e) },
	gallery = function() { 		
		return { 
			init: function() {
				var first = '';
				
				//Load Gallery JSON feed
				$.getJSON('/feed/gallery/', function(data) {
					$.each(data.items, function(i,item){
						
						//if gallery is selected
						if(url[3] == 'gallery' && url[4] == null){
							//gallery defaults
							if(url[4] == '')
								$('.negatives ul').append('<li><a href="/images/' + item.image.replace('.jpg','') + '"><span></span><img src="/images/' + item.thumb + '" /></a></li>').css('visibility', 'hidden');
							
							//apply gallery background image
							var first = $('.negatives ul li:first-child a').attr('href');
							$('.gallery-image').css('background', 'url(' + first + '.jpg) no-repeat bottom center');
							
						} else if(url[3] == 'gallery' && url[4] != null){
							if(url[4] == item.category) {
								$('.category .' + url[4] + ' a').addClass('on');
								$('.negatives ul').append('<li><a href="/images/' + item.image.replace('.jpg','') + '"><img src="/images/' + item.thumb + '" /></a></li>').css('visibility', 'hidden');
							}
							
							//gallery strip default
							if(url[4] != 'casual' && url[4] != 'formal' && url[4] != 'unsupervised' && /^\d+$/.test(url[4]) == false) {
								$('.negatives ul').append('<li><a href="/images/' + item.image.replace('.jpg','') + '"><span></span><img src="/images/' + item.thumb + '" /></a></li>').css('visibility', 'hidden');
							}
							
							//gallery image by ID
							if(/^\d+$/.test(url[4]) == true){
								$('.negatives ul').append('<li><a href="/images/' + item.image.replace('.jpg','') + '"><span></span><img src="/images/' + item.thumb + '" /></a></li>').css('visibility', 'hidden');
								$('.gallery-image').css('background', 'url(/images/' + url[4] + '.jpg) no-repeat bottom center');
							}
								
							//change gallery window background image to first image from strip
							if(/^\d+$/.test(url[4]) == false) {
								first = $('.negatives ul li:first-child a').attr('href');
								$('.gallery-image').css('background', 'url(' + first + '.jpg) no-repeat bottom center');
							}
						} else {
							$('.negatives ul').append('<li><a href="/gallery/' + item.image.replace('.jpg','') + '"><img src="/images/' + item.thumb + '" /></a></li>').css('visibility', 'hidden');
							$('.global .' + url[3] + ' a').addClass('on');
						}	
						
						//push loaded images and thumbnails to prelaoder					
						strip.push('/images/'+ item.image)
						strip.push('/images/'+ item.thumb);
					});
					
					//preload images and initiate gallery animations
					$.preloadImages(strip);
				});
			},
			changeImage: function(img, w, p, d) {
				if(change == false) {
					var a = $('.highlight').position('left')
						b = (a.left <= p.left)? p.left-a.left : a.left-p.left,
						h = $('.negatives ul').position('left'),
						highlight = p.left+h.left,
						change = true;
						
					$('.gallery-image').fadeOut('600', function() { $(this).css('background', 'url(' + img + '.jpg) no-repeat bottom center').fadeIn('600') });
					
					if(a.left > 600 && d == 'right'){
						var move = $('.negatives li a.selected').parent('li').prev('li').children('a').width()+4;
						$('.negatives ul').animate({ left: '-=' + move }, 500);
						$('.highlight').animate({ width: w+4 }, 500, function() { change = false; });
					}
					else if(a.left < 40 && d == 'left'){
						var move = $('.negatives li a.selected').width()+4;
						$('.negatives ul').animate({ left: '+=' + move  }, 500);
						$('.highlight').animate({ width: w+4 }, 500, function() { change = false; });
					}
					else{
						$('.highlight').animate({left: highlight-22, width: w+4 }, 500, function() { change = false; });
					}
				}
			},
			initStrip: function() { 
				var w = [],	//array of image widths
					x = 0,
					p = $('.negatives ul').position('left'),
					s = $('.spool').position('left'),
					wrapper = $('#wrapper').position('left');
				
				$('.negatives li').each(function(i){ w.push($(this).width()); });
				
				//grab new width for strip
				for(i=0; i < w.length; i++) { x = w[i]+x; }
				
				//change strip width
				var left = p.left+x;

				$('.negatives ul').css({ width: x+100 +'px', left: '-'+left+'px', position: 'absolute', visibility: 'visible' });
				$('.negatives li:eq(0) a').addClass('selected');
				$('.highlight').css({ left: '-'+left+'px'});
				
				//init animation
				(x > 820)
					? $('.negatives ul, .highlight').animate({ left: '+=' + left }, 1500, function() { $('.highlight').css({visibility: 'visible', width: $('.negatives ul li:first-child a').width() }); })
					: $('.negatives ul, .highlight').animate({ left: '+=764' }, 1500, function() { $('.highlight').css({visibility: 'visible', width: $('.negatives ul li:first-child a').width() }); });
					
				$('.negatives ul').css('background', 'url(/images/bg_film-strip.png) no-repeat center right #050708');
			},
			keyPress: function(e) {
				var thisObj = $('.negatives ul'),
					speed = 10;
				switch (e.which){
					case 39:	//move negatives right
						if($('.negatives li:last-child a').attr('class') != 'selected' && change == false) {
							var img = $('.negatives li a.selected').parent('li').next('li').children('a'),
								w = img.width(),
								p = img.parent('li').position();
							
							$('.negatives li a.selected').removeClass();
							img.addClass('selected');
							gallery.changeImage(img.attr('href'), w, p, 'right');
						}
						break;
					case 37:	//move negatives left
						if($('.negatives li:first-child a').attr('class') != 'selected'  && change == false) {
							var img = $('.negatives li a.selected').parent('li').prev('li').children('a'),
								w = img.width(),
								p = img.parent('li').position();
							
							$('.negatives li a.selected').removeClass();
							img.addClass('selected');
							gallery.changeImage(img.attr('href'), w, p, 'left');
						}
						break;
				}
			},
			keyRelease: function(e) {
				//debug(e.which);
				var thisObj = $('.negatives ul');
				switch (e.which){
					case 39:	//stop walking right
						window.clearInterval(this.moveRight);
						this.moveRight = null;
						break;
					case 37:	//stop walking left
						window.clearInterval(this.moveLeft);
						this.moveLeft = null;
						break;
				}
				this.negativeCheck();
			},
			mousePress: function(e) {
				//debug(!this.moveRight);
				var thisObj = $('.negatives ul'),
					speed = 10;
				switch (e){
					case 'right':	//move negatives right
						if($('.negatives li:last-child a').attr('class') != 'selected' && change == false) {
							var img = $('.negatives li a.selected').parent('li').next('li').children('a'),
								w = img.width(),
								p = img.parent('li').position();
							
							$('.negatives li a.selected').removeClass();
							img.addClass('selected');
							gallery.changeImage(img.attr('href'), w, p, 'right');
						}
						break;
					case 'left':	//move negatives left
						if($('.negatives li:first-child a').attr('class') != 'selected'  && change == false) {
							var img = $('.negatives li a.selected').parent('li').prev('li').children('a'),
								w = img.width(),
								p = img.parent('li').position();
							
							$('.negatives li a.selected').removeClass();
							img.addClass('selected');
							gallery.changeImage(img.attr('href'), w, p, 'left');
						}
						break;
				}
			},
			negativeCheck: function(){
				var p = $('.negatives ul').position('left'),
					w = $('.negatives ul').width(),
					h = $('.negatives ul').position('left'),
					selected = $('.selected').width(),
					highlight = $('.selected').parent('li').position(),
					wrapper = $('#wrapper').position('left');
					
				if(p.left > 715) {
					var x = p.left,
						y = x-w,
						z = highlight.left+x-2;
						
						debug(highlight.left);
					
					(w > 700) 
						? $('.negatives ul').animate({ left: '-=' + z }, 500)  
						: $('.negatives ul').animate({ left: '-=' + y }, 500);
						
					setTimeout(function(){ 
						var p = $('.negatives ul').position('left');
						$('.highlight').animate({left: p.left+highlight.left-22, width: selected+4 }, 10, function() { 
							$(this).fadeIn(200).css('visibility', 'visible'); 
						});	 
					}, 510);
				}				
				else if(p.left < -w) {
					var x = p.left-w,
						z = p.left+highlight.left;
					
					(w > 700) 
						? $('.negatives ul').animate({ left: '-=' + z }, 500) 
						: $('.negatives ul').animate({ left: '-=' + x }, 500);
						
					setTimeout(function(){ 
						var p = $('.negatives ul').position('left');
						$('.highlight').animate({left: p.left+highlight.left-22, width: selected+4 }, 10, function() { 
							$(this).fadeIn(200).css('visibility', 'visible'); 
						});	 
					}, 510);
				}
				else {
					$('.highlight').animate({left: p.left+highlight.left-22, width: selected+4 }, 10, function() { $(this).fadeIn(200).css('visibility', 'visible')}); 
				}
			}
		}	
}();

$(document).ready(function(){
	gallery.init();
	$('#header h1').click(function(){ window.location = '/' });
	$('.negatives a').live('click', function() { 
		$('.negatives li a.selected').removeClass();
		$(this).addClass('selected');
		gallery.changeImage($(this).attr('href'), $(this).width(), $(this).parent('li').position('left')); 
		return false; 
	});
	
	//make strip draggable
	$('.negatives ul').draggable({ 
		axis: 'x', 
		start: function(){ 
			$('.highlight').css('visibility', 'hidden'); 
		}, 
		drag: function(event, ui) {
			var w = $(this).width();
			
			if(ui.position.left >= 715)
				ui.position.left = 716
				
			if(ui.position.left < -w)
				ui.position.left = -(w+1)
		},
		stop: function(){ gallery.negativeCheck(); }
	});
	
	//make strip move with keypress
	$(document).keydown(function(e) { gallery.keyPress(e); });
	//$(document).keyup(function(e) { gallery.keyRelease(e); });
	
	//make strip move with arrow press
	$('.photo-navigation a, .gallery-image a').click(function() { return false; });
	$('.photo-navigation a, .gallery-image a').mousedown(function() { gallery.mousePress($(this).attr('class')); return false; });
});