jQuery.fn.center = function () {
	this.css("position","absolute");
	this.css("top", (($j(window).height() - this.outerHeight()) / 2) + $j(window).scrollTop() + "px");
	this.css("left", (($j(window).width() - this.outerWidth()) / 2) + $j(window).scrollLeft() + "px");
	return this;
}
jQuery.fn.vcenter = function () {
	this.css("position","absolute");
	this.css("top", (($j(window).height() - this.outerHeight()) / 2) + $j(window).scrollTop() + "px");
	return this;
}
jQuery.fn.vpcenter = function () {
	this.css("position","absolute");
	this.css("top", "50%");
	this.css("margin-top", "-" + (this.outerHeight() / 2) + "px");
	return this;
}
jQuery.fn.popout = function () {
	$j('body div.page').append('<div class="pop-bg" id="fszoomimg"><div id="image-holder"></div></div>');
	$j('.pop-bg').fadeIn(500);
	$j('body div.page').append('<div id="controller"><div id="panarea"></div><div id="prevnext"><a href="#prev" onClick="doPrev()" id="iprev">prev</a><a href="#next" onClick="doNext()" id="inext">next</a></div></div>')
	var $img = $j(document.createElement("img"))
		.attr({ src: this.attr("href"),
			alt: "zoomImage"
		})
		.addClass("photo fszoom")
	$img.load(function(){
		$j(this).appendTo($j('#image-holder'))
		$j('.pop-bg').animate({ opacity: 1}, 800);
		$j('#image-holder').height($j('#image-holder img').height()).center();
		usePan();
	})
	$j('#panarea').click(function(){
		$j('.pop-bg, #controller').animate({ opacity: 0}, 500,function(){$j(this).remove()});
	})
}
function doPrev() {	
	var	 $cur = $j('#large-gallery li.active'),
    index = $cur.index();
	$prev = $cur.prev(),
	$newImg = $prev.find('a').attr("href");	
	if (index === 0) {
    	
	}else{
		$cur.fadeOut(400).removeClass("active")
		$prev.fadeIn(400).addClass("active")
		$j(document.createElement("img"))
		.attr({ src: $newImg})
		.addClass("photo")
		.appendTo($j('#image-holder'))
		$j('img.fszoom').fadeOut(500, function(){$j(this).remove()})
		$j('#image-holder img').addClass("fszoom")
		usePan()
	}
}

function doNext() {
	var	 $cur = $j('#large-gallery li.active'),
    index = $cur.index();
	$next = $cur.next(),
	$newImg = $next.find('a').attr("href");	
	if (index === jQuery("#large-gallery").children().length - 1) {
    	
	}else{
		$cur.fadeOut(400).removeClass("active")
		$next.fadeIn(400).addClass("active")
		$j(document.createElement("img"))
		.attr({ src: $newImg})
		.addClass("photo")
		.appendTo($j('#image-holder'))
		$j('img.fszoom').fadeOut(500, function(){$j(this).remove()})
		$j('#image-holder img').addClass("fszoom")
		usePan()
	}
}
var usePan = function(){
	var container = $j("#fszoomimg"),
	panarea= $j('#panarea'),
	imgWrapper = $j("#image-holder"),
	imgHeight = $j("#image-holder img"),
	smHeight = container.height(),
	bigHeight = imgHeight.height();
	
	panarea.height(smHeight)
	if (bigHeight > smHeight) {
		panarea.mousemove(function (e) {	
			var off = (e.clientY / smHeight).toFixed(2), /* position in box (ie mouse = 50, box = 100, off = .5)*/
				top = parseInt(off * (smHeight - bigHeight)); // .5 * difference in box and wrapper (ie diff = .5, box = 100, wrapper = 150, top = .5 * -50 = -25. offset.top used for border in lightbox) 
			//console.log(boxHeight, wrapperHeight, off, boxHeight - wrapperHeight, top);	
			imgWrapper.css({
				top: top + "px"
			});	
		});
	}
}