$(function(){
	initTooltip();
	initPopup();
});

$(window).load(function(){
	initTooltip1();
});

function initPopup(){
	var _holder = $('.area');
	_holder.each(function(){
		var _this = $(this);
		var _opener = _this.find('.more');
		var _popup = _this.find('.popup2');
		var _close = _popup.find('.close');
		_opener.click(function(){
			_popup.show();
			return false;
		});
		_close.click(function(){
			_popup.hide();
			return false;
		})
	});
}


function initTooltip(){
	var _holder = $('.product-list li');
	_holder.each(function(){
		var _this = $(this);
		var _link = _this.find('.visual a');
		var _src = _link.attr('rel');
		var _text = _link.find('>img').attr('alt').split(';');
		var _box = $('<div class="popup" id="tooltip"><div class="t"><span>&nbsp;</span><em>&nbsp;</em></div><div class="holder"><span class="l">&nbsp;</span><span class="r">&nbsp;</span><div class="popup-content"><div class="img-box"></div><address></address></div></div><div class="b"><span>&nbsp;</span><em>&nbsp;</em></div></div>');
		var _imgHold = _box.find('.img-box');
		var _textHold = _box.find('address');
		for(var i = 0; i < _text.length;i++){
			var _item = '<span>'+_text[i] + '</span>';
			_textHold.append(_item);
		}
		var _img = new Image();
		_img.onload = function(){
			_link.mouseenter(function(){
				var par = $(this).closest('.visual'),
					parL = par.offset().left,
					parW = par.outerWidth();
				$('body').append(_box);
				var _top = _this.offset().top;
				var _left = _this.offset().left;
				var _winW = $(window).width();
				var _winH = $(window).height();
				var _parentW = _this.outerWidth();
				_imgHold.append(_img);
				_box.css({visibility:'hidden'}).show();
				var _tooltipW = _imgHold.find('img').outerWidth();
				var _tooltipH = _box.outerHeight();
				var leftOffset = 0,
					onLeft     = parL - _tooltipW - 20,
					onRight	   = parL + parW + 20;
				// put the popup on the right if either it fits, or if it doesn't
				// fit on the left. (in the latter case, the window will have to
				// expand to fit it, but that's better than having it be on the
				// left and only partly visible.)
				if (onRight + _tooltipW < _winW || onLeft < 0) {
					leftOffset = onRight;
				} else {
					leftOffset = onLeft;
				}
				var topOffset = _top + _tooltipH;
				if(topOffset > _winH + $(window).scrollTop()) topOffset = _winH + $(window).scrollTop() - _tooltipH;
				else if(_top - 50 < $(window).scrollTop()) topOffset = $(window).scrollTop();
				else topOffset = _top - 50;
				_box.hide().css({visibility:'visible'});
				_box.css({
					width:_tooltipW,
					left:leftOffset,
					top:topOffset
				}).show();
			}).mouseleave(function(){
				$('#tooltip').remove();
			})
		};
		_img.src = _src;
	});
}


function initTooltip1(){
	var _holder = $('.photo');
	_holder.each(function(){
		var _this = $(this);
		var _link = _this.find('>a');
		var _src = _link.attr('rel');
		var _box = $('<div class="popup" id="tooltip-1"><div class="t"><span>&nbsp;</span><em>&nbsp;</em></div><div class="holder"><span class="l">&nbsp;</span><span class="r">&nbsp;</span><div class="popup-content"><div class="img-box"></div><address></address></div></div><div class="b"><span>&nbsp;</span><em>&nbsp;</em></div></div>');
		var _imgHold = _box.find('.img-box');
		var _text = _link.find('>img').attr('alt').split(';');
		var _textHold = _box.find('address');
		for(var i = 0; i < _text.length;i++){
			var _item = '<span>'+_text[i] + '</span>';
			_textHold.append(_item);
		}
		var _img = new Image();
		_link.mouseenter(function(){
			$('body').append(_box);
			var _top = _this.offset().top + parseInt(_this.outerHeight(true));
			var _left = _this.offset().left;
			_img.onload = function(){
				_imgHold.append(_img);
				_box.css({visibility:'hidden'}).show();
				var _tooltipW = _imgHold.find('img').width();
				var _tooltipH = _box.outerHeight();
				var leftOffset = _left + 13;
				var topOffset = _top - _tooltipH + 15;
				_box.hide().css({visibility:'visible'});
				_box.css({
					width:_tooltipW,
					left:leftOffset,
					top: topOffset
				}).show();
			}
			_img.src = _src;
			$('#tooltip-1').mouseleave(function(){
				$('#tooltip-1').remove();
			})
		});
	});
}