/*
	reflection effect
	version 0.1
	author Evgen Ryzhkov
	xiper.net
*/

function reflection(reflectOptions)
{

/*
	- если это картинка, то ей добавляется обертка с теми же стилям что были у картинки
	- отражение не должно быть ссылкой, поэтому
		- если это ссылка с картинки, вокруг ссылки делается обертка, элемент с отражением должен быть вне сылки
		- если это текстовый блок, элемент с отражением добавляется в него
		- еслу нужно чтобы отражение текстовой ссылки не попадало в ссылку, reflect нужно пременять родителю
*/
	jQuery(document).ready(function(){
	
		/* 	рисуем отражение */				
		jQuery(reflectOptions.el).each(
		function()
		{

			var el = $(this),
				elH = el.innerHeight(),
				elW = el.innerWidth(),
				reflect = document.createElement('canvas'), /* динамически добавляем canvas */	
				addCanvas = true; /* флаг использования canvas */
				
				if($.browser.msie && $.browser.version<9)
				{
					var filterIE = "filter: progid:DXImageTransform.Microsoft.Chroma(color="+reflectOptions.IEbackground+") flipV progid:DXImageTransform.Microsoft.Alpha(opacity="+(reflectOptions.opacity)*100+", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy="+(reflectOptions.height*100)+");",
						wrapIEStyle = "overflow: hidden; display: block; position: absolute; left: 0; top: "+parseInt(elH+reflectOptions.distanceV)+"px;";
					addCanvas = false;
				}
						
			/*
				если отраженеие применено к изображению - добавляем контейнер
			*/
			if(el.is("img"))
			{
				/* читаем и сохраняем стили, которые влияют на положение изображения */				
					var elClass = el.attr("class"),
						elFloat = el.css("float"),
						elMarginTop = el.css("marginTop"),
						elMarginBottom = el.css("marginBottom"),
						elMarginLeft = el.css("marginLeft"),
						elMarginRight = el.css("marginRight"),
						elPosition = el.css("position");
					
					/* у картинки убираем все стили, т.к. они переносятся контейнеру */
					el
						.css({float: "none", position: "static", margin: "0"})
						.removeAttr("class");
				
					if(elPosition!="fixed" && elPosition!="absolute") elPosition = "relative";
					
					var wrapEl = el;
					if(el.parent().is("a")) wrapEl = el.parent();
					
					wrapEl.wrap("<span style='position: "+elPosition+";  display: inline-block; float: "+elFloat+"; margin: "+elMarginTop+" "+elMarginRight+" "+elMarginBottom+" "+elMarginLeft+";' class='"+elClass+"'></span>");
					
				 	if($.browser.msie && $.browser.version<8)
					{
						/* т.к. ие6- не понимают inline-block */
						wrapEl.parent().css({display: "inline", zoom: "1"});
					
					}
					if(addCanvas==false)
					{
						/*
							 для перворота картинки для ие6-8 не применяется канвас, чтобы корректно отображались изображения с полупрозрачностями
							 у ие6 правда все равно останется фон, т.к. у него изначально пробелмы с png-24 прозрачностью
						*/
					
						var wrap = el.parent();
						if(wrap.is("a")) wrap = wrap.parent();
						wrap.append("<span style='"+wrapIEStyle+
									 "height: "+parseInt(elH*reflectOptions.height)+"px;"+
									 "width: "+elW+"px'>"+
									 "<img src='"+el.attr("src")+"' style='zoom: 1;"+
					 				 "background: "+reflectOptions.IEbackground+";"+
									 "width:"+elW+"px;"+
									 "height: "+elH+"px;"+
									 filterIE+"'/></span>");
					}
					
			}
			/* end если изображение */
			
			else /*	если это текст	 */
			{
				/* определяем параметры текста */
					var optFontName = el.css("fontFamily"),
						optFontSize = el.css("fontSize"),
						optFontColor = el.css("color"),
						optFontWeight = el.css("fontWeight"),
						optFontStyle = el.css("fontStyle"),
						optText = el.text();
					
					/* для ие */	
					if(addCanvas==false)
					{
						el.append("<span style='"+wrapIEStyle+
								 "background: "+reflectOptions.IEbackground+";"+
								 filterIE+"'>"+el.text()+"</span>");
						
						
					}
			}
			/* end если это текст */
			
			/* если нужен canvas */
			if(addCanvas==true)
			{
			
				if(!el.is("img")) el.append(reflect);
				else if(!el.parent().is("a")) el.parent().append(reflect);
				else el.parent().parent().append(reflect);

				/* задаем размеры и позиционируем canvas */
				reflect.width=elW;
				reflect.height=elH*reflectOptions.height;
				reflect.style.position="absolute";
				reflect.style.left="0";
				reflect.style.top=elH+reflectOptions.distanceV+"px";
							
				var ctx = reflect.getContext("2d");
	
				ctx.save();
	
				/* сразу переворачиваем холст */
				ctx.translate(0,elH);
				if(navigator.appName == 'Opera' && navigator.platform == 'Linux'){
					ctx.scale(0.97,-1);
				} else {
					ctx.scale(1,-1);
				}
				//alert(navigator.appName);
				
				if(!el.is("img"))
				{
					/* пишем текст */
					ctx.textBaseline = "top";
					ctx.font = optFontStyle+" "+optFontWeight+" "+optFontSize+" "+optFontName;
					ctx.fillStyle = optFontColor;
					ctx.fillText(el.text(),0,0);
				}
				/* еcли это изображение */
				else ctx.drawImage(this, 0, 0);
				
				ctx.restore();
	
				ctx.globalCompositeOperation = "destination-out";
				var gradient = ctx.createLinearGradient(0, 0, 0, elH*reflectOptions.height);
					
				gradient.addColorStop(1, "rgba(0, 0, 0, 1.0)");
				gradient.addColorStop(0, "rgba(0, 0, 0, "+(1-reflectOptions.opacity)+")");
	
				ctx.fillStyle = gradient;
				ctx.rect(0, 0, elW, elH);
				ctx.fill();

			}
			/* end если нужен canvas */
			
			
			/* 
				если нужно увеличиваем высоту элемента на высоту отражения
				это может пригодится, например, для картинок в контенте, чтобы отражение не перекрыло рядом находящиеся элементы или текст
			 */
			if(reflectOptions.addHeight)
			{
				if(el.is("img"))
				{
					 el = el.parent();
					 if(el.is("a")) el = el.parent();
				}
				el.css("height",elH + reflectOptions.distanceV + elH*reflectOptions.height + "px");
			}
			
			
			
		});
		/* end рисуем отражение */
	});
}