var TemplatePreview=Class.create({initialize:function(thumbnailImg,previewOptions){this.thumbnailImg=$(thumbnailImg);this.previewOptions=previewOptions||{};this.thumbnailImg.observe('mouseover',this.onMouseOver.bindAsEventListener(this));this.thumbnailImg.observe('mouseout',this.onMouseOut.bindAsEventListener(this));this.onMouseMoveHandler=function(event){PreviewWindow.getInstance().followMouse(event.pointerX(),event.pointerY());}.bindAsEventListener(this);},onMouseOver:function(event){this.thumbnailImg.observe('mousemove',this.onMouseMoveHandler);PreviewWindow.getInstance().show(event.pointerX(),event.pointerY(),this.previewOptions);},onMouseOut:function(event){this.thumbnailImg.stopObserving('mousemove',this.onMouseMoveHandler);PreviewWindow.getInstance().hide();}});var PreviewWindow=Class.create({initialize:function(){this.windowElement=new Element('div',{id:'tplPreview',style:'display:none; position:absolute;'});this.titleElement=new Element('h2',{id:'tplPreviewTitle'});this.imageElement=new Element('img',{id:'tplPreviewImage'});this.progressBarElement=new Element('div',{id:'tplPreviewProgressBar',style:'display:none;'});this.windowElement.insert(this.titleElement).insert(new Element('div',{id:'tplPreviewBody'}).insert(this.imageElement).insert(this.progressBarElement.update('Bild wird geladen...'))); $(document.body).insert(this.windowElement);},loadPreview:function(options){this.titleElement.update(options.title);var oldImg=this.imageElement;this.imageElement=new Element('img',{id:'tplPreviewImage',src:options.src,width:options.width,height:options.height});oldImg.replace(this.imageElement);if(!this.imageElement.complete){this.progressBarElement.show();this.imageElement.observe('load',function(event){this.progressBarElement.hide();}.bindAsEventListener(this));}
Object.extend(this,this.windowElement.getDimensions());},show:function(x,y,options){var viewport=document.viewport.getDimensions();if(viewport.width<600||viewport.height<450){return;}
if(typeof options=='object'){this.loadPreview(options);}
this.followMouse(x,y);this.timerId=function(){if(this.imageElement.src.length>0){this.windowElement.show();}}.bind(this).delay(0.25);},hide:function(){window.clearTimeout(this.timerId);this.windowElement.hide();this.windowElement.setStyle({top:'-'+this.height+'px',left:'-'+this.width+'px'});},followMouse:function(mouseX,mouseY){var x=0,y=0;var mouseOffset=24;var mouseXpos='',mouseYpos='';var viewport=Object.extend(document.viewport.getDimensions(),document.viewport.getScrollOffsets());mouseX-=viewport.left;mouseY-=viewport.top;if(mouseY+mouseOffset<(viewport.height-this.height)/2){mouseYPos='top';y=mouseY+mouseOffset;}else if(mouseY-mouseOffset>(viewport.height+this.height)/2){mouseYPos='bottom';y=mouseY-mouseOffset-this.height;}else{mouseYPos='middle';y=(viewport.height-this.height)/2;}
if(mouseYPos!='middle'&&((mouseX+mouseOffset>(viewport.width-this.width)/2)&&(mouseX-mouseOffset<(viewport.width+this.width)/2))){mouseXPos='center';x=(viewport.width-this.width)/2;}else if(mouseX>viewport.width/2){mouseXPos='right';x=mouseX-mouseOffset-this.width;}else{mouseXPos='left';x=mouseX+mouseOffset;}
this.windowElement.setStyle({top:y+viewport.top+'px',left:x+viewport.left+'px'});}});PreviewWindow.getInstance=function(){if(PreviewWindow.instance==null){PreviewWindow.instance=new PreviewWindow();}
return PreviewWindow.instance;}