(function(){
var observer = {
	historyInited: false,
	history: function(hash) {
		thumbStrip.setImageSrc(hash);
	},
	initHistory: function() {
		if (observer.historyInited == false) {
			$.historyInit(observer.history);
		}
	}
};
var imageView = window.imageView = function(){
	var container,
		overlay,
		viewImage,
		overlayImage,
		enlarge = function(){
			//alert($('img:last', container).attr("src"));
			// /image.php/photos/beauty/beauty-1/cosmo-1.jpg?width=628&height=400&image=/photos/beauty/beauty-1/cosmo-1.jpg 
			large_url = $('img:last', container).attr("src").replace('628','854');
			large_url = large_url.replace('400','544');
			$('img:last', container).attr("src",large_url);
			
			$('img:last', container).clone().prependTo(viewImage.firstChild);

			$(overlay).add(viewImage).add(overlayImage).show();
			return false;
		},
		go = function (e) {
			var imgLi = this.id == 'prev' || this.id == 'goPrev' ? thumbStrip.getPrev() : thumbStrip.getNext();
			
			//alert("yehaw");
		
			$("#strip li").removeClass("clickedImage")
			imgLi.addClass("clickedImage");
			//alert("woot" + imgLi.find('img').attr('id'));
			$.historyLoad(imgLi.find('img').attr('id'));
			//thumbStrip.setImageSrc(imgSrc);
			this.blur();
			$("#main_image img").fadeTo("med",1);
			thumbStrip.setGoClicked(true);
			
			return false;
		},
		clickOverlay = function (e){
			if ($(e.target).is('a')) {
				this.blur();
			} else {
				$(viewImage)
					.find('img')
						.remove()
						.end()
					.add(overlay)
					.add(overlayImage)
					.hide();
			}
		};
	return {
		init: function(){
			container = document.getElementById('main_image');
			overlay = document.getElementById('overlay');
			viewImage = document.getElementById('viewImage');
			overlayImage = document.getElementById('overlayImage');
			$('#enlarge a')
				.eq(2)
					.bind('click', enlarge)
					.end()
				.eq(0)
					.bind('click', go)
					.end()
				.eq(1)
					.bind('click', go)
					.end();
			$(container).bind('click', enlarge);
			$('#viewImage, #viewClose').ifixpng();
			$(overlay).add(overlayImage)
				.bind('click', clickOverlay)
				.find('a')
					.bind('click', go);
		},
		setImage: function(imgSrc){				
			/* enlargement is being viewed */
			if ($(overlay).css('display') == 'block') {
				$('<img src="/image.php'+ imgSrc +'?width=854&height=544&image='+ imgSrc+'"/>')
					.prependTo(viewImage.firstChild);
				$('img:eq(1)', viewImage)
					.fadeOut("slow", function(){
						$(this).remove();
					});
					
					//update medium sized panel...
					$('img', container).stop().remove();
					$('<img src="/image.php'+ imgSrc +'?width=628&height=400&image='+ imgSrc+'"/>')
						.appendTo(container);
						
			/* enlargement model is closed */
			} else {
				$('img', container).stop().fadeOut(1000, function(){
					$(this).remove();
				}); 
				//	alert("setting image");
				$('<img src="/image.php'+ imgSrc +'?width=628&height=400&image='+ imgSrc+'"/>')
					.css('opacity', 0)
					.appendTo(container)
					.fadeTo(1000, 1);
			}
		}
	};
}();
var thumbStrip = window.thumbStrip = function(){
	var
		loading = true,
		container,
		wrapper,
		currentWidth,
		origWidth = 0,
		images,
		speed = 0.1,
		opacity = 0.4,
		currentPosition = 0,
		distance = 0,
		timer,
		callback,
		currentSrc,
		slidding = false,
		isOver = false,
		goClicked = false,
		fixWidth = function(){
			currentWidth = $(container).outerWidth(true);
		//	$("#wtf").text("currentWidth is" + container.offsetWidth);
			$('li', wrapper).slice(images, 3000).remove();
			var width = origWidth*2;
			$('li', wrapper).slice(0, images).clone().appendTo(wrapper);
			while (width<currentWidth*2) {
				$('li', wrapper).slice(0, images).clone().appendTo(wrapper);
				width += origWidth;
			}
		},
		mouseenter = function() {
			$(document).bind('mousemove', mousemove);
			timer = setInterval(move, 40);
			isOver = true;
		},
		mouseleave = function() {
			//alert("woot");
			$(document).unbind('mousemove', mousemove);
			clearInterval(timer);
			isOver = false;
		},
		mousemove = function(e) {
			distance = e.pageX - currentWidth/2;
		},
		move = function() {
			if (slidding === false) {
				currentPosition -= distance * speed;
				if (currentPosition > 0) {
					currentPosition -= origWidth;
				} else if (currentPosition < -origWidth) {
					currentPosition = currentPosition + origWidth;
				}
				wrapper.style.left = currentPosition + 'px';
			}
		},
		setSrc = function(imgSrc) {
			if (imgSrc == '') {
				imgSrc = $('li:first img', wrapper).attr('id');
			}
			
			//alert("currentSrc is: " + currentSrc);
			if (currentSrc != imgSrc) {
				currentSrc = imgSrc;
				//alert("setSrc 144");
				slidding = true;
				$(document).unbind('mousemove', mousemove);
				clearInterval(timer);
								
				if (loading == false){
					$(wrapper)
						.find('li.active')
							.removeClass('active')
							.fadeTo('fast', opacity)
							.end()
						.find('img[id=' + imgSrc + ']')
							.each(function(){
								//alert("woot0");
								$(this)
									.parent().parent()
									.addClass('active')
									.fadeTo('medium', 1);

							});
				} else {
					//first time loading...
					$(wrapper).find('img[id=' + imgSrc + ']')
						.each(function(){
							//alert("woot0");
							$(this)
								.parent().parent()
								.addClass('active');
							});
				}
			

				//grab the closest one...
				if (loading){
					var targetEl = $('li.active', wrapper).get(0);
					if (targetEl.offsetLeft < currentWidth/2) {
						targetEl = $('li.active', wrapper).get(1);
					}
					$(targetEl).addClass("clickedImage");
				} else {
					//alert("clicked image " + clickedImage.attr("id"));
					//alert("clickedImage.parent().parent().hasClass('active');" + clickedImage.parent().parent().hasClass('foo'));
					var targetEl = $('li.clickedImage', wrapper).get(0);
				}

				//dimension plugin seems to get correct 'left' here... 
				currentPosition = - ($(targetEl).position().left - ((currentWidth - targetEl.offsetWidth)/2));

				if ($('#overlay').css('display') == 'none') {
					//$("#wtf").text("position  left: " + $(targetEl).position().left + " : " + targetEl.offsetLeft);
					//$("#wtf").text("currentPosition: " + currentPosition);
					$(wrapper).stop().animate({
						left: currentPosition
					}, 500, function(){
						slidding = false;
						if (isOver == true && goClicked == false) {
							distance = 0;
							mouseenter();
						}
						
					});
					goClicked = false;
				} else {
					wrapper.style.left = currentPosition + 'px';
				}
				callback(imgSrc);
			}
		}
		;
	return {
		init: function(s, c){
			loading = true;
			speed = s;
			callback = c;
			container = document.getElementById('strip');
			//hide container until loding is done...
			//$(container).hide();
			wrapper = container.getElementsByTagName('UL')[0];
			images = $('li', wrapper)
						.each(function(){
							origWidth += this.offsetWidth;
						})
						.size();
			fixWidth();		
			$(window).bind('resize', fixWidth);
			$(container)
				.bind('mouseenter', mouseenter)
				.bind('mouseleave', mouseleave);
			wrapper.style.width = '30000px';
			wrapper.style.left = -origWidth + 'px';
			$(container)
				.bind('click', function(e){
					var el = e.target;
					while (el != container) {
						if ($(el).is('a')) {
							var imgSrc = $('img', el).attr('id');
							$("#strip li").removeClass("clickedImage")
							$(el).parent().addClass("clickedImage");
							$.historyLoad(imgSrc);
							//setSrc(imgSrc);
							break;
						}
						el = el.parentNode;
					}
					return false;
				});
			$('img', wrapper).each(function(){
				//var imgEl = this;
				var imgSrc = $(this).attr('id');
	
				$('<img src="/image.php'+ imgSrc +'?width=854&height=544&image='+ imgSrc+'"/>')
					.css('display', 'none')
					.appendTo('#cached');
			});
		},
		setImageSrc: function(imgSrc) {
			setSrc(imgSrc);
		},
		setLoadingStatus: function(loadingStatus){
			loading = loadingStatus;
		},
		setGoClicked: function(goState){
			goClicked = goState;
		},
		getNext: function(){
			//add extra photos to div ...
			//move left to right
			//alert("frst" + $("#strip li:first").attr("id")); 
			$("#strip ul li:first").remove().clone('true').appendTo("#strip ul");
			return $("li.clickedImage").next();
			/*var el = $('li.active:first', wrapper).next();
			if (el.size() == 0) {
				el = $('li:first', wrapper);
			}
			return el.find('img').attr('id');*/
		},
		getPrev: function(){
			//add extra photos to div ...
			//move right to left
			$("#strip ul li:last").prependTo("#strip ul");
			
			return $("li.clickedImage").prev();
			/*var el = $('li.active:first', wrapper).prev();
			if (el.size() == 0) {
				el = $('li:last', wrapper);
			}
			return el.find('img').attr('id');*/
		}
	};
}();

$(document).bind('ready', function(){	
	imageView.init();
	thumbStrip.init(0.015, imageView.setImage);
	observer.initHistory();

	// hover effects
	$('#strip ul li').hover(
		function() { $(this).fadeTo('medium',1); },
		function() { $(this).not('.active').fadeTo('medium',0.4); } // don't fade out if the parent is active
	);
//		$(".thumbnail").hide();
//		$('#strip ul li .active').each(function(){
//			$(this).fadeTo('fast', 1.0);
//		});
		$('#strip ul li').not('.active').each(function(){
			$(this).fadeTo('fast', 0.4);
		});	
		$(".thumbnail").fadeTo('fast', 1.0);


	thumbStrip.setLoadingStatus(false);
});
})();