var offsetX = 20;
var offsetY = 20;

var paddingX = 47;
var paddingY = 98;

var marginX = 20;
var marginY = 20;

var scrollXY = 15;

var src = '';

function defPosition(event) {
  var x = y = 0;
  if (document.attachEvent != null) { // Internet Explorer & Opera
    x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
  } else if (!document.attachEvent && document.addEventListener) { // Gecko
    x = event.event.clientX + window.scrollX;
    y = event.event.clientY + window.scrollY;
  }
  return {x:x, y:y};
}

function defScroll(event) {
  var x = y = 0;
  if (document.attachEvent != null) { // Internet Explorer & Opera
    x = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    y = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
  } else if (!document.attachEvent && document.addEventListener) { // Gecko
    x = window.scrollX;
    y = window.scrollY;
  }
  return {x:x, y:y};
}

function screenSize() {
  var w, h;
  w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
  h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
  return {w:w, h:h};
}

var GrPreview = new Class({
  initialize: function(thumbImg, previewOptions) {
    this.thumbImgElement = $(thumbImg);
    this.previewOptions = previewOptions || {};
    
    this.thumbImgElement.addEvent('mouseover', function(event) {
      GrPreviewWindow.getInstance().show(previewOptions, event);
    });
    
    this.thumbImgElement.addEvent('mouseout', function(event) {
      GrPreviewWindow.getInstance().hide();
    });
    
    this.thumbImgElement.addEvent('mousemove', function(event) {
      GrPreviewWindow.getInstance().followMouse(event);
    });
  }
});

var GrPreviewWindow = new Class({
  initialize: function() {
    this.previewElement = new Element('div', {id:'preview'});
    //this.previewTitleElement = new Element('h2', {id:'preview-title', class:'light-blue'});
    this.previewTitleElement = new Element('h2', {id:'preview-title', style:'color:#6699cc;'});
    this.previewTextElement = new Element('p', {id:'preview-text'});
    this.previewImageElement = new Element('img', {id:'preview-image', src:'./images/gr_blank.gif'});
    
    this.previewElementTable = new Element('table', {width:'100%'});
    this.previewElementTRt = new Element('tr');
    //this.previewElementTDtl = new Element('td', {class:'preview-tl'});
    this.previewElementTDtl = new Element('td', {style:'height:14px;width:14px;border:0px;background-image:url(./gfx/more-r.gif);background-repeat:no-repeat;background-position:0 0;'});
    //this.previewElementTDtc = new Element('td', {class:'preview-tc'});
    this.previewElementTDtc = new Element('td', {style:'height:14px;background-color:#ffffff;border-top:1px solid #f0f2f5;'});
    //this.previewElementTDtr = new Element('td', {class:'preview-tr'});
    this.previewElementTDtr = new Element('td', {style:'height:14px;width:14px;border:0px;background-image:url(./gfx/more-r.gif);background-repeat:no-repeat;background-position:-14px 0;'});
    this.previewElementTRc = new Element('tr');
    //this.previewElementTDcl = new Element('td', {class:'preview-cl'});
    this.previewElementTDcl = new Element('td', {style:'width:14px;background-color:#FFF;border-left:1px solid #f0f2f5;'});
    //this.previewElementTDcc = new Element('td', {class:'preview-cc'});
    this.previewElementTDcc = new Element('td', {style:'background-color:#FFF;padding: 3px 9px 9px 9px !important;'});
    //this.previewElementTDcr = new Element('td', {class:'preview-cr'});
    this.previewElementTDcr = new Element('td', {style:'width:14px;background-color:#FFF;border-right:1px solid #f0f2f5;'});
    this.previewElementTRb = new Element('tr');
    //this.previewElementTDbl = new Element('td', {class:'preview-bl'});
    this.previewElementTDbl = new Element('td', {style:'height:14px;width:14px;border:0px;background-image:url(./gfx/more-r.gif);background-repeat:no-repeat;background-position:0px -14px;'});
    //this.previewElementTDbc = new Element('td', {class:'preview-bc'});
    this.previewElementTDbc = new Element('td', {style:'height:14px;background-color:#ffffff;border-bottom:1px solid #f0f2f5;'});
    //this.previewElementTDbr = new Element('td', {class:'preview-br'});
    this.previewElementTDbr = new Element('td', {style:'height:14px;width:14px;border:0px;background-image:url(./gfx/more-r.gif);background-repeat:no-repeat;background-position:-14px -14px;'});
    
    this.previewElementTDcc.appendChild(this.previewTitleElement);
    this.previewElementTDcc.appendChild(this.previewTextElement);
    this.previewElementTDcc.appendChild(this.previewImageElement);    

    this.previewElementTRt.appendChild(this.previewElementTDtl);
    this.previewElementTRt.appendChild(this.previewElementTDtc);
    this.previewElementTRt.appendChild(this.previewElementTDtr);
    this.previewElementTRc.appendChild(this.previewElementTDcl);
    this.previewElementTRc.appendChild(this.previewElementTDcc);
    this.previewElementTRc.appendChild(this.previewElementTDcr);
    this.previewElementTRb.appendChild(this.previewElementTDbl);
    this.previewElementTRb.appendChild(this.previewElementTDbc);
    this.previewElementTRb.appendChild(this.previewElementTDbr);
    this.previewElementTable.appendChild(this.previewElementTRt);
    this.previewElementTable.appendChild(this.previewElementTRc);
    this.previewElementTable.appendChild(this.previewElementTRb);
    
    this.previewElement.appendChild(this.previewElementTable);
    
    document.body.appendChild(this.previewElement);
  },
  
  loadPreview: function(previewOptions) {
    this.previewTitleElement.innerHTML = '<nobr>' + previewOptions.title + '</nobr>';
    this.previewTextElement.innerHTML = '<nobr>' + ( '' == previewOptions.text ? 'Без названия' : previewOptions.text) + '</nobr>';
    
    this.previewImageElement.width = previewOptions.width;
    this.previewImageElement.height = previewOptions.height;

    //this.previewElement.style.width = previewOptions.width;
    
    this.previewElementWidth = previewOptions.width + paddingX;
    this.previewElementHeight = previewOptions.height + paddingY;
    
    src = previewOptions.src;
    
    setTimeout(function() { GrPreviewWindow.getInstance().previewImageElement.src = src; }, 10);
  },
  
  show: function(previewOptions, event) {
    this.previewImageElement.src = './images/gr_blank.gif';
    
    if (typeof previewOptions == 'object' && previewOptions.src && previewOptions.width && previewOptions.height) {
      this.loadPreview(previewOptions);
    }
    else {
      return;
    }
    
    if (screenSize().w - GrPreviewWindow.getInstance().previewElementWidth - marginX <= 0 || screenSize().h - GrPreviewWindow.getInstance().previewElementHeight - 2*marginY <= 0) {
      return;
    }
    
    this.followMouse(event);

    this.previewElement.style.display = 'block';
  },
  
  hide: function() {
    this.previewElement.style.display = 'none';
    this.previewImageElement.src = './images/gr_blank.gif';        
  },
  
  followMouse: function (event) {    
    var event = event || window.event;
      
    var maxX = screenSize().w - this.previewElementWidth - marginX - scrollXY;
    var maxY = screenSize().h - this.previewElementHeight - marginY - scrollXY;
    
    if (maxX && maxY) {
      if (defPosition(event).x - defScroll(event).x + offsetX < maxX) {
        this.previewElement.style.left = (defPosition(event).x + offsetX) + 'px';
      }
      else if (defPosition(event).x - defScroll(event).x - this.previewElementWidth - offsetX > marginX) {
        this.previewElement.style.left = (defPosition(event).x - this.previewElementWidth - offsetX) + 'px';
      }
      else {
        this.previewElement.style.left = '-10000px';
      }
    
      if (defPosition(event).y - defScroll(event).y + offsetY < maxY) {
        this.previewElement.style.top = (defPosition(event).y + offsetY) + 'px';
      }        
      else {
        this.previewElement.style.top = (defScroll(event).y + maxY) + 'px';
      }
    }
  } 
});

GrPreviewWindow.getInstance = function() {
  if (GrPreviewWindow.instance == null) {
    GrPreviewWindow.instance = new GrPreviewWindow();
  }
  return GrPreviewWindow.instance;
}