/*
 * Copyright (c) 2006 Jonathan Weiss <jw@innerewut.de>
 *
 * Modified for use with images and text by Chris Ellenburg
 */

var ThumbView = Class.create();
var counter = 0;
ThumbView.prototype = {
  initialize: function(element, thumb_view) {
    var options = Object.extend({
		default_css: false,
		margin: "0px",
		padding: "5px",
		backgroundColor: "#ffffff",
		border: "1px solid #333333",
		min_distance_x: 5,
		min_distance_y: 5,
		delta_x: -10,
		delta_y: -10,
		zindex: 1000
    }, arguments[2] || {});

    this.element      		= $(element);
	
	this.counter 			= counter++;

    this.options      		= options;
	
	this.element.title 		= "";
	this.thumb_view_data 	= thumb_view.evalJSON();
    
    // use the supplied thumbView element or create our own div
    if($(thumb_view)) {
      this.thumb_view = $(thumb_view);
    } else {
      this.thumb_view = this.createThumbViewObj();
    }

    // hide the tool-tip by default
    this.thumb_view.hide();

    this.eventMouseOver = this.showThumbView.bindAsEventListener(this);
    this.eventMouseOut   = this.hideThumbView.bindAsEventListener(this);
    this.eventMouseMove  = this.moveThumbView.bindAsEventListener(this);

    this.registerEvents();
  },
  
  
  
  createThumbViewObj: function() {
	  var tv = Builder.node( 'div', { className: 'thumbView' }, 
									[
										Builder.node( 'img', { src:this.thumb_view_data.image } ),
										Builder.node( 'div', { className:'thumbViewText', id:'ct'+this.counter.toString() } )
									]
							);
	  
      document.body.appendChild(tv);
      tv.addClassName("thumbView");
	  tvText = $("ct"+this.counter.toString());
	  tvText.insert(this.thumb_view_data.desc);	  
	  this.counter += 1;
	  return tv;
  },

  destroy: function() {
    Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
    Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
    Event.stopObserving(this.element, "mousemove", this.eventMouseMove);
  },

  registerEvents: function() {
    Event.observe(this.element, "mouseover", this.eventMouseOver);
    Event.observe(this.element, "mouseout", this.eventMouseOut);
    Event.observe(this.element, "mousemove", this.eventMouseMove);
  },

  moveThumbView: function(event){
	  Event.stop(event);
	  // get Mouse position
      var mouse_x = Event.pointerX(event);
	  var mouse_y = Event.pointerY(event);
	  this.position(this.thumb_view, event, {offset: 10});
  },
	
		
  showThumbView: function(event) {
    Event.stop(event);
    this.moveThumbView(event);
	  new Element.show(this.thumb_view);
  },
  
  setStyles: function(x, y){
    // set the right styles to position the tool tip
	  Element.setStyle(this.thumb_view, { position:'absolute',
	 								    top:y + "px",
	 								    left:x + "px",
									    zindex:this.options.zindex
	 								  });
	
	  // apply default theme if wanted
	  if (this.options.default_css){
	  	  Element.setStyle(this.thumb_view, { margin:this.options.margin,
											padding:this.options.padding,
											backgroundColor:this.options.backgroundColor,
											border:this.options.border,
											zindex:this.options.zindex
		 								    });	
	  }	
  },

  hideThumbView: function(event){
	  new Element.hide(this.thumb_view);
  },

  getWindowHeight: function(){
    var innerHeight;
	  if (navigator.appVersion.indexOf('MSIE')>0) {
		  innerHeight = document.body.clientHeight;
    } else {
		  innerHeight = window.innerHeight;
    }
    return innerHeight;	
  },
 
  getWindowWidth: function(){
    var innerWidth;
	  if (navigator.appVersion.indexOf('MSIE')>0) {
		  innerWidth = document.body.clientWidth;
    } else {
		  innerWidth = window.innerWidth;
    }
    return innerWidth;	
  }
  
  
  
  
  
  
  ,position: function(element, ev, options) {
		var offset = options.offset;

		var dimensions = element.getDimensions(),
			boundaries = this.boundaries();

		var x = this.determine(Event.pointerX(ev), dimensions.width, offset, boundaries.width),
			y = this.determine(Event.pointerY(ev), dimensions.height, offset, boundaries.height);

		this.setStyles(x,y);
	},
	
	determine: function(i, current, min, max) {
		if(i + current + min >= max) {
			i = i - current - min;
		}
		else {
			i += min;
		}
		return (i < min) ? min : i;
	},
	
	boundary: function(hw) {
		var bound;

		if(self['inner' + hw]) {
			bound = self['inner' + hw];
		}
		else {
			bound = (document.body || document.documentElement)['client' + hw];
		}

		return bound;
	},
	
	boundaries: function() {
		return {
			height: this.boundary('Height'),
			width: this.boundary('Width')
		}
	}

}