var popin = {
	baseBg:null,
	baseContent:null,
	settings:{
		width:600,
		height:350,
		overlayOpacity:0.8
	},
	initialize:function(){
		// showUrl
		$('a[rel^="popin|showUrl"]').each(function(){
			//
			$(this).click(function(event){
				event.preventDefault();
				popin.showUrl($(this).attr('href'));
			});
		});
		// gallery
		$('a[rel^="popin|gallery|"]').each(function(){
			//
			var j = $(this);
			j.click(function(event){
				event.preventDefault();
				popin.showGallery(j);
			});
		});
	},
	showGallery:function(sender){
		var temp = sender.attr('rel');
		var galleryName = temp.substring(temp.lastIndexOf('|') + 1);
		//
		var allGalleryItems = $('a[rel="popin|gallery|' + galleryName + '"]');
		var currentImageIndex = -1;
		allGalleryItems.each(function(i, el){
			if(this == sender[0])
				currentImageIndex = i;
		});

		//
		//trace.show(galleryName + ': ' + (currentImageIndex + 1) + ' / ' + allGalleryItems.length);
		
		//
		if(this.baseBg == null)
		{
			this.baseBg = $('<div class="popin_baseBg"></div>');
			this.baseBg.appendTo($(document.body));
			this.baseBg.css('position','absolute').css('top',0).css('left',0).css('background-color','#333').css('opacity',0.0).css('z-index',10001).css('cursor','pointer').css('width', '100%').css('height', '100%');
			this.baseBg.bind('click', function(){popin.close();});
			//
			this.baseBg.animate({'opacity':this.settings.overlayOpacity},{duration:settings.animFast,queue:false,easing:'linear'});
		}
		
		// previous image
		var previous = null;
		if(currentImageIndex != 0)
			previous = $(allGalleryItems[currentImageIndex - 1]);
		
		// next image
		var next = null;
		if(currentImageIndex < (allGalleryItems.length - 1))
			next = $(allGalleryItems[currentImageIndex + 1]);

		//	get box
		//trace.show('this.baseContent: ' + this.baseContent);
		if(this.baseContent == null)
		{
			this.baseContent = $('<div class="popin_baseContent"></div>');
			this.baseContent.appendTo($(document.body));
			this.baseContent.width(400).height(300).css('position', 'absolute').css('top', 0).css('opacity',0.0).css('z-index',10002).css('background-color','#fff');
			this.baseContent.css('color', '#' + settings.colors.title_small.toString(16));
			//
			this.baseContent.animate({'opacity':1.0},{duration:settings.animFast,queue:false,easing:'swing'});
			//
			resizeManager.addListener(this);
			//
			this.baseContent.css('padding', '13px');
			var inner = $('<div class="info"></div>');
			inner.appendTo(this.baseContent);
			inner.css('height', '100%');
			inner.css('border', 'solid 1px #' + settings.colors.borders.toString(16));
			//
			var right = $('<div class="right"></div>');
			right.appendTo(inner);
			right.css('float', 'right');
			right.css('padding', '8px');
			right.width(100);
			//right.css('background-color', '#f00');
			right.css('display', 'inline-block');
			right.css('text-align', 'right');
			var closeText = (env.IDlanguage == 260)?'chiudi <b>x</b>':'close <b>x</b>';
			right.html(closeText);
			right.css('cursor', 'pointer').click(function(){
				popin.close();
			});
			//
			var left = $('<div class="left"></div>');
			left.appendTo(inner);
			//left.css('background-color', '#00F');
			left.css('margin', '8px');
			//
			var leftTop = $('<div class="top"></div>');
			leftTop.appendTo(left);
			leftTop.css('overflow', 'hidden');
			//leftTop.css('background-color', '#0F0');
			//
			var leftBottom = $('<div class="bottom"></div>');
			leftBottom.appendTo(left);
			//leftBottom.css('background-color', '#0F0');
			leftBottom.css('padding-top', '8px');
			leftBottom.css('padding-bottom', '8px');
			//
			var nextText = (env.IDlanguage == 260)?'prossima':'next';
			var div_next = $('<div class="next">' + nextText + ' <img src="' + env.applicationPath + '/imgs/white/arrow_popin_left.png" style="vertical-align:middle;" width="14" height="13" /></div>');
			div_next.appendTo(leftBottom);
			div_next.css('float', 'right');
			div_next.width(120);
			div_next.css('text-align', 'right');
			//
			var prevText = (env.IDlanguage == 260)?'precedente':'previous';
			var div_prev = $('<div class="prev"><img src="' + env.applicationPath + '/imgs/white/arrow_popin_right.png" style="vertical-align:middle;" width="14" height="13" /> ' + prevText + '</div>');
			div_prev.appendTo(leftBottom);
			div_prev.width(120);
			//
			popin.onresize(resizeManager.getSize());
		}

		var left = this.baseContent.find('.left');
		var right = this.baseContent.find('.right');
		var leftTop = left.find('.top');
		var leftBottom = left.find('.bottom');
		//
		left.width(this.baseContent.width() - right.width() - parseInt(right.css('padding-left')) * 2 - parseInt(left.css('margin-left')) * 2 - 2);
		left.height(this.baseContent.height() - parseInt(left.css('margin-bottom')) * 2 - 2);
		leftTop.height(left.height() - leftBottom.height() - parseInt(leftBottom.css('padding-top')) * 2 - parseInt(left.css('margin-bottom')));
		//
		// !!!!!
		var imageUrl = $(allGalleryItems[currentImageIndex]).parent().html();
		var startIndex = imageUrl.indexOf(' href="') + 7;
		var endIndex = imageUrl.indexOf('"', startIndex);
		imageUrl = imageUrl.substring(startIndex, endIndex);
		// !!!!!
		var img = $('<img src="' + imageUrl + '" />');
		img.css('opacity', 0.0);
		img.data('prev', previous);
		img.data('next', next);
		img.load(function(){
			//
			var j = $(this);
			// remove previous
			j.parent().find('img.removable').remove();
			j.toggleClass('removable', true);
			//
			var right = popin.baseContent.find('.right');
			var left = popin.baseContent.find('.left');
			var leftTop = left.find('.top');

			// ???
			var leftBottom = left.find('.bottom');
			var leftBottonHeight = leftBottom.height();
			if(leftBottonHeight == 0) leftBottonHeight = 14;

			// fix dimensions
			leftTop.width(j.width()).height(j.height());
			left.width(leftTop.width() + parseInt(leftTop.css('margin-left')) * 2)
				.height(leftTop.height() + leftBottonHeight + parseInt(leftBottom.css('padding-top')) + parseInt(leftBottom.css('padding-bottom')));
			popin.baseContent.width(left.width() + parseInt(left.css('margin-left')) * 2 + right.width() + parseInt(right.css('padding-left')) * 2)
				.height(left.height() + 2 + parseInt(left.css('margin-top')) * 2);

			popin.baseContent.css('margin-left', 400);

			// previous
			var div_prev = popin.baseContent.find('.prev');
			var image_previous = j.data('prev');
			div_prev.css('cursor', 'default').unbind('click');
			if(!image_previous)
			{
				div_prev.hide();
			}
			else
			{
				div_prev.show();
				div_prev.css('cursor', 'pointer').bind('click', function(){
					popin.showGallery(image_previous);
				});
			}
			// next
			var div_next = popin.baseContent.find('.next');
			div_next.css('cursor', 'default').unbind('click');
			var image_next = j.data('next');
			if(!image_next)
			{
				div_next.hide();
			}
			else
			{
				div_next.show();
				div_next.css('cursor', 'pointer').bind('click', function(){
					popin.showGallery(image_next);
				});
			}

			//
			popin.onresize(resizeManager.getSize());
			j.animate({'opacity': 1.0}, {queue:false, duration:settings.animNormal});
		});
		//
		img.appendTo(leftTop);
	},
	showUrl:function(pageUrl, useIframe, width, height){
		//trace.show('showUrl: ' + pageUrl);
		// fix params
		//useIframe = (useIframe == true);
		if(!width) width = this.settings.width;
		if(!height) height = this.settings.height;
		// remove any previous instance
		this.close();
		
		//
		this.baseBg = $('<div class="popin_baseBg"></div>');
		this.baseBg.appendTo($(document.body));
		this.baseBg.css('position','absolute').css('top',0).css('left',0).css('background-color','#333').css('opacity',0.0).css('z-index',10001).css('cursor','pointer').css('width', '100%').css('height', '100%');
		this.baseBg.bind('click', function(){popin.close();});
		//
		this.baseContent = $('<div class="popin_baseContent"></div>');
		this.baseContent.appendTo($(document.body));
		this.baseContent.width(width).height(height).css('position', 'absolute').css('top', 0).css('opacity',0.0).css('z-index',10002).css('background-color','#fff');
		this.baseContent.css('color', '#' + settings.colors.title_small.toString(16));
		
		//
		var innerContent = $('<div></div>');
		innerContent.appendTo(this.baseContent);
		innerContent.height(this.baseContent.height() - 44);
		innerContent.css('margin', '13px');
		innerContent.css('padding', '8px');
		innerContent.css('border', 'solid 1px #' + settings.colors.borders.toString(16));
		//
		var innerLeft = $('<div></div>');
		innerLeft.appendTo(innerContent)
		innerLeft.css('float', 'left');
		innerLeft.css('display', 'inline-block');
		innerLeft.width(innerContent.width() - 100);
		innerLeft.height(innerContent.height());
		//
		var innerLeftInner = $('<div></div>');
		innerLeftInner.appendTo(innerLeft);
		/*
		var innerLeftInnerScrollArea = $('<div rel="scroll_area"></div>');
		innerLeftInnerScrollArea.appendTo(innerLeftInner);
		innerLeftInnerScrollArea.height(innerContent.height());
		//
		var innerLeftInnerScrollContent = $('<div rel="scroll_content"></div>');
		innerLeftInnerScrollContent.appendTo(innerLeftInnerScrollArea);
		*/
		var innerLeftInnerScrollContentInner = $('<div></div>');
		//innerLeftInnerScrollContentInner.appendTo(innerLeftInnerScrollContent);
		innerLeftInnerScrollContentInner.appendTo(innerLeftInner);
		innerLeftInnerScrollContentInner.css('padding', '0 10px 0 0');

		// loading
		innerLeftInnerScrollContentInner.append($('<div style="text-align:center;"><img src="' + env.applicationPath + '/imgs/loading.gif" width="16" height="16" alt="loading" style="margin-top:130px;margin-left:200px;" /><div>'));

		//
		var innerRight = $('<div></div>');
		innerRight.appendTo(innerContent)
		innerRight.css('float', 'left');
		innerRight.css('display', 'inline-block');
		innerRight.css('text-align', 'right');
		innerRight.width(100);
		var closeText = (env.IDlanguage == 260)?'chiudi <b>x</b>':'close <b>x</b>';
		innerRight.html(closeText);
		innerRight.css('cursor', 'pointer').click(function(){
			popin.close();
		});
		
		//
		resizeManager.addListener(this);
		resizeManager.onresize();
		//
		this.baseBg.animate({'opacity':this.settings.overlayOpacity},{duration:settings.animFast,queue:false,easing:'linear'});
		this.baseContent.animate({'opacity':1.0},{duration:settings.animFast,queue:false,easing:'swing'});
		
		// load content
		//innerLeftInner.tinyscrollbar({color:'gray', overflow:'hidden'});
		ScrollersAdd(innerLeftInner, {color:'gray', overflow:'hidden'});
		//
		innerLeftInner.find('div[rel="scroll_area"]').height(306);
		//
		innerLeftInnerScrollContentInner.load(pageUrl, function(){
			//innerLeftInner.update();
			if(isAppleMobile)
				innerLeftInnerScrollArea.height(innerLeftInnerScrollContent.height());
			ScrollersUpdate();
		});
		//
		/*
		$.ajax({
			url:pageUrl,
			type:'GET',
			context:innerLeftInnerScrollContentInner,
			success:function(data, a, b){
				alert(b);
				//this.text(data);
			},
			error:function(){
				var errorMessage = (env.IDlanguage == 260) ? 'si è verificato un errore, si prega di riprovare più tardi' : 'an error occurred, please try again later';
				innerLeftInnerScrollContentInner.text(errorMessage);
			}
		});
		*/
	},
	onresize:function(size){
		//trace.show('popin.onresize');
		this.baseBg.width(size.width).height(size.height);
		//
		var l = Math.floor((size.width - this.baseContent.width()) / 2);
		var t = Math.floor((size.height - this.baseContent.height()) / 2);
		this.baseContent.css('margin-left', l).css('margin-top', t);
	},
	close:function(){
		// remove listener
		resizeManager.removeListener(this);
		//
		$('div.popin_baseBg').animate({'opacity':0.0}, {queue:false, complete:function(){
			popin.baseBg = null;
			$(this).remove();
		}});
		$('div.popin_baseContent').animate({'opacity':0.0}, {queue:false, complete:function(){
			popin.baseContent = null;
			$(this).remove();
		}});
	}
};
//
$(function(){
	popin.initialize();
});