/*
 *	@author: Zsotyooo
 *	@description: Ha létezik egy kép betölti, hiba estén user fgvt futtat. Bármilyen html taggel működik
 *	@params:
 *	options: a plugin hívásánál adható meg, ezt felülbírálja ha a konkrét HTML elemben megadott json formátumú imagedata attribútum
 *	- src: A betöltendő kép URL-je
 *	- maxWidth: ha a kép ennél szélesebb, erre az értékre állítja a szélességét
 *	- maxHeight: ha a kép ennél magasabb, erre az értékre állítja a magasságát
 *	- maxSize: a nagyobbik oldalt állítja be ha ennél nagyobb lenne
 *	- success: callback fgv. Sikeres betöltés esetén fut le. Paraméterként megkapja az objektum példányt, és magát a betöltött IMG-t
 *	- error: callback fgv. Hibás betöltés esetén fut le (pl nincs meg a kép). Paraméterként megkapja az objektum példányt, és magát a be nem töltött IMG-t
 *	- imgAttributes: extra attributumok a betöltendő képhez.
 *	@example:
 *	HTML:
 *	<span imagedata="{src: 'http://foo.example.com/dummy.gif'}"></span>
 *	JS:
 *	jQuery('span[imagedata]').loadImage(
 *	{
 *		maxSize: 100,
 *		error: function(instance,image)
 *		{
 *			alert('A(z) '+$(Image).attr('src')+' kép nem található!');
 *		}
 *	}
 *	);
 *	
 *
 */

(function($){
	$.fn.loadImage=function(options)
	{
		$(this).each(
			function(elementIndex)
			{
//				return;
				if((!$(this).attr("imagedata") && !options.src) || $(this).attr('data-added-loadimage')) return;
				new $loadImage(elementIndex,this,options);
			}
		);
	}

	//konstruktor
	$.loadImage=function(elementIndex,element,options)
	{
		this.element=element;
		this.elementindex=elementIndex;

		$(this.element).attr('data-added-loadimage',1);

		this.data=$.parseJSON($(this.element).attr("imagedata"));

		if(options == undefined)options={};
		this.options={};
		$.extend(
			this.options,
			$loadImage.defaultoptions,
			options,
			this.data
		);

		if(this.options.cut)
		{
			this.options.cut=$.extend({
				 top:'center',
				 left: 'center',
				 width:100,
				 height:100,
				 wrapperWidth: false,
				 wrapperHeight: false,
				 wrapperTag: 'span',
				 wrapperAttributes: false,
				 wrapperCss: false
			},this.options.cut);
		}

		if(this.options.bigSrc)
		{
			this.options.magnifier=true;
		}

		this.getImage();
	}

	//shortcutok
	$loadImage=$.loadImage;
	$loadImage.fn=$loadImage.prototype={};
	$loadImage.fn.extend = $loadImage.extend = $.extend;

	//statikus v�ltoz�k, f�ggv�nyek:
	$loadImage.extend(
	{
		defaultoptions: {
			maxSize: false,
			maxWidth: false,
			maxHeight: false,
			magnifier: false,
			bigSrc: false,
			fwdURL: false,
			fwdText: 'Tovább a képhez &raquo;',
			cut: false,
			success: function(This,Img)
			{
			},
			error: function(This,Img)
			{
				$(This.element).parent().remove();
				//alert('A(z) '+$(Img).attr('src')+' kép nem található!');
			},
			imgAttributes: {}
		},

		//Itt adhat�ak meg a konstansok
		constants: {

		},
		imgLayerOpen:false,
		//statikus fgvk
		createViewLayer: function(This,w,h)
		{
			if(!$loadImage.imgLayerOpen)
			{
				$loadImage.darkLayer=$('<div></div>')
				.css(
					{
						position: 'absolute',
						top: 0,
						left:0,
						width: $(document).width(),
						height: $(document).height(),
						background: '#fff',
						opacity: 0.5,
						zIndex: 1999
					}
				).appendTo('body');
				/*.one(
						'click',
						function(){$loadImage.removeViewLayer();}
				);*/

				$(window).bind('resize',loadImageresizeLayer=function()
					{

						$loadImage.darkLayer.css(
							{
								width: 'auto'
							}
						);
						var neww=$(document).width()>$(window).width()?$(window).width():$(document).width();
						$loadImage.imgLayer.css(
							{
								width: 'auto'
							}
						);
						$loadImage.darkLayer.css(
							{
								width: neww,
								height: $(document).height()
							}
						);
						$loadImage.imgLayer.css(
							{
								width: neww,
								height: $(document).height()
							}
						);
					}
				)

				$loadImage.imgLayer=$('<div></div>')
				.css(
					{
						position: 'absolute',
						top: 0,
						left:0,
						width: $(document).width(),
						height: $(document).height(),
						zIndex: 2000
					}
				)
				.append(
					$loadImage.bigImgCont=$('<div></div>')
					.addClass('block')
					.css(
						{
							width: w+'px',
							margin: '0 auto',
							marginTop: $(window).scrollTop()+(Math.round(($(window).height()-h)/2)>30?Math.round(($(window).height()-h)/2):30)+'px'
						}
					)
				)
				.appendTo('body')
				.one(
					'click',
					function(){$loadImage.removeViewLayer();}
				);
				if(This.options.fwdURL)
				{
					$loadImage.bigImgCont.append(
						$("<div></div>").css({textAlign: 'center'})
						.append(
							This.options.fwdURL=='self'?
								$('<a href="'+(This.options.bigSrc?This.options.bigSrc:This.options.src)+'" target="_blank">'+This.options.fwdText+'</a>'):
								$('<a href="'+This.options.fwdURL+'">'+This.options.fwdText+'</a>')
						)
					);
				}
				$loadImage.imgLayerOpen=true;
			}

			return $loadImage.bigImgCont;
		},
		removeViewLayer: function()
		{

			if($loadImage.imgLayerOpen)
			{
				$loadImage.imgLayer.remove();
				$loadImage.darkLayer.remove();
				$loadImage.imgLayerOpen=false;
			}
		}
	});

	//Instance függvényei
	$loadImage.fn.extend({
		getImage: function()
		{
			var This=this;
			var Img=new Image();
			$(Img).load(
				function()
				{
					var w=$(this).attr('width');
					var h=$(this).attr('height');

					var neww=w;
					var newh=h;
					if(This.options.maxSize)
					{
						if(w>=h)
						{
							neww=This.options.maxSize;
							newh=Math.round(This.options.maxSize*h/w);
						}
						else
						{
							neww=Math.round(This.options.maxSize*w/h);
							newh=This.options.maxSize;
						}

						$(this).css(
						{
							'width':neww+'px',
							'height': newh+'px'
						});
					}
					else if(This.options.maxWidth)
					{
						neww=This.options.maxWidth;
						newh=Math.round(This.options.maxWidth*h/w);

						$(this).css(
						{
							'width': neww+'px',
							'height': newh+'px'
						});
					}
					else if(This.options.maxHeight)
					{
						neww=Math.round(This.options.maxHeight*w/h);
						newh=Math.round(This.options.maxHeight);

						$(this).css({
							'width': neww+'px',
							'height': newh+'px'
						});
					}
					if(This.options.magnifier)
					{
						//var smallw=$(this).css('width');
						//var smallh=$(this).css('height');

						$(this).bind(
							'click',
							function()
							{
								if(This.options.bigSrc)
								{
									$(This.element).show();
									$(this).hide();
									var img=new Image();
									$(img).bind(
										'load',
										function()
										{
											var bigw=$(img).attr('width');
											var bigh=$(img).attr('height');
											var bigr=bigw/bigh;
											var bigmaxh=$(window).height()-80;
											var bigmaxw=$(window).width()-80;

											if(This.options.fwdURL)
											{
												$(this).css('cursor','pointer');
											}

											if(bigh>bigmaxh)
											{
												bigh=bigmaxh;
												bigw=Math.round(bigh*bigr);
											}
											if(bigw>bigmaxw)
											{
												bigw=bigmaxw;
												bigh=Math.round(bigw*(1/bigr));
											}

											$(This.element).hide();
											$(Img).show();

											$loadImage.createViewLayer(This,bigw,bigh)
											.prepend(
												$(img).css({width:bigw+'px',height:bigh+'px',display:'none'})
												.one(
													'click',
													function(){
														$loadImage.removeViewLayer();
														if(This.options.fwdURL)
														{
															window.location.href=This.options.fwdURL;
														}
													}
												)
												.fadeIn()
											);
											$loadImage.darkLayer.css({height:$(document).height()});
										}
									)
									.attr('src',This.options.bigSrc);
								}
								else
								{
									var img=this;

									var bigw=w;
									var bigh=h;

									var bigr=bigw/bigh;
									var bigmaxh=$(window).height()-80;
									var bigmaxw=$(window).width()-80;

									if(bigh>bigmaxh)
									{
										bigh=bigmaxh;
										bigw=Math.round(bigh*bigr);
									}
									if(bigw>bigmaxw)
									{
										bigw=bigmaxw;
										bigh=Math.round(bigw*(1/bigr));
									}


									$loadImage.createViewLayer(This,bigw,bigh)
									.prepend(
										$(img).clone().css({width:bigw+'px',height:bigh+'px',display:'none',position: 'static',top:'auto',left:'auto'})
										.one(
											'click',
											function(){$loadImage.removeViewLayer();}
										)
										.fadeIn()
									);
									$loadImage.darkLayer.css({height:$(document).height()});
								}


							}
						);

					}
					$(This.element).hide().after($(this));
					if(This.options.cut)
					{


						var ch=This.options.cut.height;
						var cw=This.options.cut.width;
						var ct=This.options.cut.top;
						var cl=This.options.cut.left;

						if(This.options.cut.top=='center')
						{
							
							ct=Math.round((newh-This.options.cut.height)/2);
						}
						if(This.options.cut.left=='center')
						{
							cl=Math.round((neww-This.options.cut.width)/2);
						}

						
						if(This.options.cut.height>$(this).attr('height'))
						{
							ch=$(this).attr('height');
							ct=0;
						}
						if(This.options.cut.width>$(this).attr('width'))
						{
							cw=$(this).attr('width');
							cl=0;
						}
						$(this).wrap($("<"+This.options.cut.wrapperTag+"></"+This.options.cut.wrapperTag+">"));
						var wrappercss={};
						if(This.options.cut.wrapperWidth){
							wrappercss.marginLeft=Math.floor((This.options.cut.wrapperWidth-cw)/2);
							wrappercss.marginRight=Math.ceil((This.options.cut.wrapperWidth-cw)/2);
							if(wrappercss.marginLeft<0)wrappercss.marginLeft=0;
							if(wrappercss.marginRight<0)wrappercss.marginRight=0;
						}
						if(This.options.cut.wrapperHeight){
							wrappercss.marginTop=Math.floor((This.options.cut.wrapperHeight-ch)/2);
							wrappercss.marginBottom=Math.ceil((This.options.cut.wrapperHeight-ch)/2);
							if(wrappercss.marginTop<0)wrappercss.marginTop=0;
							if(wrappercss.marginBottom<0)wrappercss.marginBottom=0;
						}
						wrappercss=$.extend(wrappercss,
							{
								'display' : 'block',
								'width' : cw+'px',
								'height' : ch+'px',
								'overflow' : 'hidden',
								'position' : 'relative'
							},
							This.options.cut.wrapperCss || {}
						);
						if(This.options.cut.wrapperAttributes){
							$(this).parent().attr(This.options.cut.wrapperAttributes);
						}

						$(this).parent().css(wrappercss);
						$(this).css({
							'position' : 'absolute',
							'top' : ((-1)*ct)+'px',
							'left' : ((-1)*cl)+'px'
						});
					}

					This.options.success(This,this);
				}
			)
			.error(
				function()
				{
					This.options.error(This,this);
				}
			)
			.attr('src',This.options.src)
			.css('border',0)
			.attr(This.options.imgAttributes);
		}
	});
})(jQuery)