var LiveView = Class.create();

LiveView.prototype = {
  	initialize: function(watch_element,out_element,search_link,title_off,pos_element,pos_offset_x,pos_offset_y,effect) {
	   this.watch_element  	= watch_element;

	   this.out_element    	= out_element || 'new_div';

	   this.search_link    	= search_link;
	   this.title_off    	= title_off;
	   this.pos_element  	= pos_element ||'';
	   this.pos_offset_x 	= pos_offset_x;
	   this.pos_offset_y 	= pos_offset_y;
	   this.effect 			= effect || 'none';
	   this.delay         	= 5000;
	   this.timeoutID    	= '';

	   if( this.out_element == 'new_div'){
  			this.out_element    = document.createElement('div');
//  			this.out_element.id = 'toolTip';
  			this.out_element.className = 'out_box_a_info';
//	   	alert('Hier');
	   }

   	this.display_off();

   	this.watch_element.insert(this.out_element);
   	if(this.title_off){
    			this.title_off.title='';
    			if(this.title_off){ this.title_off.tip=''; }
   	}
		Event.observe(this.watch_element, 'mouseover' , this.show.bind(this));
		Event.observe(this.watch_element, 'mouseout'  , this.show.bind(this));
		Event.observe(this.watch_element, 'click'     , this.show.bind(this));
 	},

 	show: function(event) {
   	var obj_id = event.element().id;
    	if(obj_id != this.out_element.id)
    	{
    		switch(event.type) {
	     		case 'mouseover':
	     			if( ! this.out_element.visible()){
	      			this.display_on(event);
	     			}
	     		break;

	     		case 'mouseout':
	     		case 'click':
	   		   this.display_off(event);
	   	  	break;
	    	}
	   }
//   console.warn (obj_id + ' - ' + this.watch_element.id  + ' - ' +event.type);
//   window.status = obj_id + '-' +event.type;
   },

  	display_off: function(event) {
    	if(this.timeoutID){
     		clearTimeout(this.timeoutID);
     		this.timeoutID = 0;
    	}
    	this.out_element.hide();
   },

   display_on: function(event) {
    	if(this.timeoutID){
     		clearTimeout(this.timeoutID);
     		this.timeoutID = 0;
    	}else{
     		if( ! this.out_element.visible()){
     			this.setxy(event);
 			   this.getcontent(event);
//    			this.setxy(event);

     			switch(this.effect){
  					case 'fade':    this.out_element.show(); this.fade(5);   break;
  					case 'move_in': this.out_element.show(); this.move_in(); break;
  					default: this.out_element.show(); break;
     			}
    		} else { this.out_element.show(); }
    	}
   },

  	setxy: function(event){
  		if(this.pos_element){
	   	this.out_element.setStyle({
	      	left: (this.pos_element.positionedOffset().left + this.pos_offset_x)+'px',
	          top: (this.pos_element.positionedOffset().top  + this.pos_offset_y)+'px'
	      });
   	}
// 		console.warn ($('img_wkorb').offsetLeft +' - '+$('img_wkorb').offsetTop+' - '+$('img_wkorb').getWidth()+' - '+$('img_wkorb').getHeight());
  	},

  	getcontent:  function(event){
	   if(! this.out_element.innerHTML){
    		new Ajax.Updater(
	      	this.out_element,
	      	this.search_link,{
	        		asynchronous:true,
	        		method: 'get'
     			}
      	);
    	}
   },

   fade: function(opac) {
   	var passed  = parseInt(opac,10);
   	var newOpac = parseInt(passed+5,10);
   	if ( newOpac < 95 ) {
			this.out_element.style.opacity = '.'+newOpac;
			this.out_element.style.filter  = "alpha(opacity:"+newOpac+")";
			opacityID = setTimeout(this.fade.bind(this,newOpac),20);
   	} else {
    		this.out_element.style.opacity = '.95';
    		this.out_element.style.filter  = "alpha(opacity:90)";
   	}
  	},

   move_in: function() {
//   	console.warn (this.out_element);
   	if ( this.out_element.getWidth() < 450 ) {
    		this.out_element.setStyle( { width: (this.out_element.getWidth()+20)+'px' } );
//    this.out_element.makeClipping().setStyle({width: this.out_element.getWidth()+'px', height: this.out_element.getWidth()+'px'});
    		opacityID = setTimeout(this.blend.bind(this),20);
    		this.setxy(event);
   	}
	   this.out_element.show();
  	}
};
// ()
var LiveView_B = Class.create( LiveView,
{
  	initialize: function(watch_element,out_element,search_link,title_off,pos_element,pos_offset_x,pos_offset_y,effect) {
 		this.watch_element  	= watch_element;

	   this.out_element    	= out_element || 'new_div';

	   this.search_link    	= search_link;
	   this.title_off    	= title_off;
	   this.pos_element  	= pos_element ||'';
	   this.pos_offset_x 	= pos_offset_x;
	   this.pos_offset_y 	= pos_offset_y;
	   this.effect 			= effect || 'none';
	   this.delay        	= 5000;
	   this.timeoutID    	= '';

	   if( this.out_element == 'new_div'){
  			this.out_element    = document.createElement('div');
  			this.out_element.id = 'out_'+this.watch_element.id;
  			this.out_element.className = 'out_box_a_info';
//  			this.watch_element.appendChild(this.out_element);
	   }
//	   	alert('Hier:' + this.out_element +this.out_element.name + ' - ' + this.out_element.id);
	    console.warn (this.out_element + ' - '+ this.out_element.name + ' - ' + this.out_element.id);
		this.xCord=0;// @Number: x pixel value of current cursor position
		this.yCord=0;// @Number: y pixel value of current cursor position

//   console.warn (this.out_element.id);

		if(this.timeoutID){
     		clearTimeout(this.timeoutID);
     		this.timeoutID = 0;
     	}
    	this.out_element.hide;

//   	this.display_off();
   	this.watch_element.insert(this.out_element);

   	if(this.title_off){
    			this.title_off.title='';
    			if(this.title_off){ this.title_off.tip=''; }
   	}
		Event.observe(this.watch_element, 'mouseover' , this.show.bind(this));
		Event.observe(this.watch_element, 'mouseout'  , this.show.bind(this));
		Event.observe(this.watch_element, 'click'     , this.show.bind(this));
	},


	setxy : function(event) {
		var scrX = Event.pointerX(event);
		var scrY = Event.pointerY(event);

		var tp = parseInt(scrY,10);
		var lt = parseInt(scrX,10);

		if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft,10) < parseInt(this.out_element.getWidth()+lt,10) ) {
			this.out_element.style.left = parseInt(lt-(this.out_element.getWidth()+25),10)+'px';
		} else {
			this.out_element.style.left = lt+'px';
		}

		if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop,10) < parseInt(this.out_element.getHeight()+tp,10) ) {
			this.out_element.style.top = parseInt(tp-(this.out_element.getHeight()+25),10)+'px';
		} else {
			this.out_element.style.top = tp+'px';
		}

//		console.warn ('1:'  +this.out_element.style.left
//		              +' - '+this.out_element.style.top
//		              +' - '+parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft)
//		              +' - '+parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop)
//		              +' - '+document.documentElement.clientWidth
//		              +' - '+document.documentElement.clientHeight
//		              +' - '+document.documentElement.scrollLeft
//		              +' - '+document.documentElement.scrollTop
//						  +' ow:'+this.out_element.getWidth()
//		              +' oh:'+this.out_element.getHeight()
//						  +' ow:'+this.out_element.offsetWidth
//		              +' oh:'+this.out_element.offsetHeight
//		              +' - '+lt
//						  +' - '+tp
//		              +' - '+Event.pointerX(event)
//		              +' - '+Event.pointerY(event)
//		              +' vx:'+document.viewport.getWidth()
//		              +' vy:'+document.viewport.getHeight()
//		             );

  	},
  	getcontent:  function(event){
	   if(! this.out_element.innerHTML){
    		new Ajax.Updater( this.out_element, this.search_link,{ asynchronous:false, method: 'get' });
    	}
   }
});