/*
sunflower.kr

수정해야 할부분 :
1. 속도개선
2. 이미지가 브라우저보다 클 경우 사이즈 조정
3. 로딩 이미지 달기
4. 닫기버튼?
*/

var sunflower, lightbox;

sunflower = {};
lightbox = {};

sunflower.lightbox = $.inherit({
	__constructor: function() {
		this.meta = {
			objThumbImage: null,
			objBigImage: null,
			thisObject: null,
			animateTime: 500,
			size: { width:0, height:0 },
			scroll: { left:0, top:0 }
		};
	},

	thisPosition: function() {
		this.meta.scroll.left = this.meta.objThumbImage.offset().left;
		this.meta.scroll.top = this.meta.objThumbImage.offset().top;

		this.meta.size.width = this.meta.objThumbImage.outerWidth();
		this.meta.size.height = this.meta.objThumbImage.outerHeight();

		this.createLightbox();
	},

	createLightbox: function() {
		thisObject = this;
		$('<div id="light-box-image"><img src="' + this.meta.objBigImage + '" alt="" /></div>').css({
			position: 'absolute',
			left: this.meta.scroll.left + 'px',
			top: this.meta.scroll.top + 'px',
			zIndex: 9990,
			overflow: 'hidden',/**/
			width: this.meta.size.width + 'px',
			height: this.meta.size.height + 'px',
			backgroundColor: '#000',
			backgroundRepeat: 'no-repeat',
			backgroundPosition: '50% 50%',
			backgroundImage: 'url("/wp-content/themes/sunflower/images/loading.gif")',
			opacity: 0.5
		}).appendTo("body").find('img').css('opacity', '0').load(function() {
			var objWidth = $(this).width();
			var objHeight = $(this).height();

			var documentClientHeight = (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight;

			$(this).css({
				width: '100%',
				height: '100%'
			}).animate({
				opacity: 1
			}, thisObject.meta.animateTime, function() {
				$(this).css('opacity', '');
			}).parent().css({
				zIndex: 9992,
				width: thisObject.meta.size.width + 'px',
				height: thisObject.meta.size.height + 'px',
				backgroundColor: 'transparent',
				backgroundImage: 'none',
				opacity: ''
			}).animate({
				top: $(document).scrollTop() + ((documentClientHeight - objHeight) / 2) + 'px',
				left: ($('body').width() - objWidth) / 2 + 'px',
				width: objWidth + 'px',
				height: objHeight + 'px'
			}, thisObject.meta.animateTime, thisObject.closeButton); //
		}).click(thisObject.removeLightbox);
	},

	closeButton: function() {
		$('#light-box-image').css({overflow: 'inherit'});
		$('<span id="light-box-close"><img src="/wp-content/themes/sunflower/images/close.png" alt="Close" /></span>').css({
			cursor: 'pointer',
			position: 'absolute',
			right: '-15px',
			top: '-15px',
			zIndex: '1',
			display: 'block'
		}).click(thisObject.removeLightbox).appendTo('#light-box-image');
	},

	eventHandler: function(objHandler) {
		thisObject = this;
		$(objHandler).bind('click', function() {
			if ($('div').is('#light-box-image')) thisObject.removeLightbox(); //return false;?

			thisObject.meta.objBigImage = $(this).attr('href');
			thisObject.meta.objThumbImage = $(this).find('img');
			thisObject.thisPosition();
			return false;
		});
	},

	removeLightbox: function() {
		$('#light-box-close').remove();
		$('#light-box-image').animate({
			left: thisObject.meta.scroll.left + 'px',
			top: thisObject.meta.scroll.top + 'px',
			width: thisObject.meta.size.width + 'px',
			height: thisObject.meta.size.height + 'px',
			opacity: 0
		}, thisObject.meta.animateTime, function() {
			$(this).remove();
		});
	}
});

$(document).ready(function() {
	var sunLightbox = new sunflower.lightbox;
	sunLightbox.eventHandler('a[rel="lightbox"]');
});