(function($)
{
	$.fn.t4mview = function(options)
	{
		// Die Optionen die der Benutzer des Plugins angeben kann
		options = $.extend({
			pxoftime: 1000,			// Angabe für die Pixel
			option:'bottom',
			startevent: 1000,
			event: 'time',
			start: 100,			// Wie viel Prozent das Element rausgefahren sein soll beim start
			stop:100,			// Wie viel Prozent das Elemente rausfahren soll
			zindex:0 			// Angabe eines Z-Index für dei Formatierung		
		}, options);		
		// Wird nur aufgerufen wenn was gefunden worden ist
		$(this).each(function()
		{
			var o		=	new Object();
			o.t		=	$(this);
			
			o.left 		= 	0;
			o.top 		= 	0;
			o.height	=	o.t.height();		
			o.width		=	o.t.width();
			o.time		=	o.height*options.pxoftime/100;	
			
			// Für die Box wo der Inhalt drin ist
			o.t.css('overflow','hidden');
			o.t.css('height',o.height+'px');
			o.t.css('width',o.width+'px');
			o.t.css('z-index', options.zindex );
			
			
			if(o.t.css('position') != 'absolute')
			{
				o.t.css('position','relative');
			}
			o.paddingLeft	=	o.t.css('paddingLeft').slice(0,-2);
			o.t.css('display','block');
			// Eine div Container erstellen
			o.t =  ObjectToContent(this,'div','t4mviewdata');
			
			o.t.css('width',o.width+'px');
			o.t.css('position','absolute');
			if(options.start < 0 || options.start > 100)
			{
				options.start	=	100;
			}
			// Die Position der inneren box festlegen
			switch(options.option)
			{
				case'bottom':
					o.height	=	o.height/100*options.start;
					o.t.css('top',o.height+'px');
					o.left 		=	o.paddingLeft;
					o.t.css('left',o.left+'px');
				break;
				case'top':
					o.height	=	o.height/100*options.start;
					o.t.css('top','-'+o.height+'px');
				break;
				case'left':
					o.width	=	o.width/100*options.start;
					o.t.css('left','-'+o.width+'px');
				break;
				case'right':
					o.width	=	o.width/100*options.start;
					o.t.css('left',o.width+'px');
				break;
				
				default:
					o.t.css('top',o.height+'px');
			}
			// Welches Event 
			switch(options.event)
			{
				case'mouseover':
					EventMouseOver(o);
				break;
				default:
					EventTime(o);	
			}
		});
		function EventTime(object)
		{
			var set = setInterval
			(
					function()
					{
						Animate(object, object.top,object.left,object.time);
						clearInterval(set);
					}, 
					options.startevent
			);	
			
		}
		function EventMouseOver(object)
		{
			object.t.bind(
				{	
					mouseover: function(evt)
					{
						Animate(object,object.top,object.left,object.time);
					},
					mouseout: function(evt)
					{
						Animate(object,object.height,object.left,object.time);
					}
				}
			);
		}
		function Animate(object,top,left,time)
		{
			object.t.stop();
			object.t.animate(
					{ 
						top: top+'px',
						left: left+'px'
					}, 
					time
			);
		}
		/**
		 * 	FŸgt ein HTML-Tag hinzu mit einer Class
		 * 
		 * 	@param HTML-OBject
		 * 	@param string HTML-Tag
		 * 	@param string CSS-Class
		 * 
		 * 	@return HTML-Object
		 */
		function ObjectToContent(object, tag, _class )
		{
			object  = $(object);
			object.html('<'+tag+' class="'+_class+'">'+object.html()+'</'+tag+'>');
			
			return object.find(tag+'.'+_class);	
		}
	}
}
)(jQuery);