var Related = {
        x:0,
        y:0,
        obj:{},
        lnk:null,
        timer:null,
        classname: 'related-sticker',
        opacityTimer:null,
        errorTimer:null,
        cache:{},
        init: function() {
            this.initEvents();
            this.hide();
            this.obj = document.createElement('div');
            this.obj.id = "related_box";
            this.obj.style.display = "none";
            this.obj.style.top = "0";
            this.obj.style.left = "0";
            this.addEvent(Related.obj, ["mouseout"], this.hideThumb);
            document.getElementsByTagName('body')[0].appendChild(this.obj);
        },
        hide: function(){
            var lnks = getElementsByClassName('related-block');
            var i = lnks.length || 0;
            while(i--) {
                    lnks[i].style.display = 'none';
            }
        },
        initEvents: function(){
            // clean cache after ajax:
            this.cache = {};
            this.hide();
            var lnks = getElementsByClassName(this.classname);
            var i = lnks.length || 0;
            while(i--) {
                    this.addEvent(lnks[i], ["focus", "mouseover"], this.initThumb);
                    this.addEvent(lnks[i], ["blur",  "mouseout"],  this.hideThumb);
            }
        },
        initThumb: function(e) {
                e = e || event;

                Related.lnk       = this;

                var heightIndent;
                var indentX = 0;
                var indentY = 0;
                var trueBody = (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;

                if(String(e.type).toLowerCase().search(/mouseover/) != -1) {
                         if (document.captureEvents) {
                                Related.x = e.pageX;
                                Related.y = e.pageY;
                        } else if ( window.event.clientX ) {
                                Related.x = window.event.clientX+trueBody.scrollLeft;
                                Related.y = window.event.clientY+trueBody.scrollTop;
                        }
                        indentX = 10;
                        heightIndent = parseInt(Related.y-(Related.obj.offsetHeight))+'px';
                } else {
                        var obj = this;
                        var curleft = curtop = 0;
                        if (obj.offsetParent) {
                                curleft = obj.offsetLeft;
                                curtop = obj.offsetTop;
                                while (obj = obj.offsetParent) {
                                        curleft += obj.offsetLeft;
                                        curtop += obj.offsetTop;
                                }
                        }
                        curtop += this.offsetHeight;

                        Related.x = curleft;
                        Related.y = curtop;

                        heightIndent = parseInt(Related.y-(Related.obj.offsetHeight)-this.offsetHeight)+'px';
                }

                if ( parseInt(trueBody.clientWidth+trueBody.scrollLeft) < parseInt(Related.obj.offsetWidth+Related.x) + indentX) {
                        Related.obj.style.left = parseInt(Related.x-(Related.obj.offsetWidth+indentX))+'px';
                } else {
                        Related.obj.style.left = (Related.x+indentX)+'px';
                }
                if ( parseInt(trueBody.clientHeight+trueBody.scrollTop) < parseInt(Related.obj.offsetHeight+Related.y) + indentY ) {
                        Related.obj.style.top = heightIndent;
                } else {
                        Related.obj.style.top = (Related.y + indentY)+'px';
                }

                Related.timer = window.setTimeout("Related.showThumb()",500);
        },
        showThumb: function(e) {
                Related.obj.style.display =  'block';
                Related.obj.style.opacity =  '0';
                
                var link = Related.lnk.getAttribute('link');

                // Check cache:
                if(typeof Related.cache[link] != 'undefined'){
                    Related.obj.innerHTML += '<div id="related-view" class="related_stickr">'+Related.cache[link]+'</div>';
                    Related.obj.style.display = 'block';
                    Related.obj.style.position = 'absolute';
                }else{
                    var xhr = Related.getXmlHttp();

                    xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4) {
                            if(xhr.status == 200) {
                               Related.obj.innerHTML += '<div id="related-view" class="related_stickr">'+xhr.responseText+'</div>';
                               Related.cache[link] = xhr.responseText;

                               Related.obj.style.display = 'block';
                               Related.obj.style.position = 'absolute';
                            }
                         }
                    }
                    xhr.open('GET', link, true);
                    xhr.send(null);
                }
                
                Related.fade(10);
        },
        getXmlHttp: function(){
	  var xmlhttp;
	  try {
	    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	  } catch (e) {
	    try {
	      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	    } catch (E) {
	      xmlhttp = false;
	    }
	  }
	  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
	    xmlhttp = new XMLHttpRequest();
	  }
	  return xmlhttp;
	},
        hideThumb: function(e) {
                try{
                    var root = document.getElementById('related_box');
                    var st = document.getElementById('related-view');
                    if( typeof st != null){
                        root.removeChild(st);
                    }
                }catch(e){}

                root.style.display = 'none';
                if(Related.timer) clearTimeout(Related.timer);
                if(Related.errorTimer) clearTimeout(Related.errorTimer);
                if(Related.opacityTimer) clearTimeout(Related.opacityTimer);
                Related.obj.style.display = 'none';
        },
        fade: function(opac) {
                var passed  = parseInt(opac);
                var newOpac = parseInt(passed+10);
                if ( newOpac < 90 ) {
                        this.obj.style.opacity = '.'+newOpac;
                        this.opacityTimer = window.setTimeout("Related.fade('"+newOpac+"')",20);
                } else {
                        this.obj.style.opacity = '1';
                }
        },
        addEvent: function( obj, types, fn ) {
                var type;
                for(var i = 0; i < types.length; i++) {
                        type = types[i];
                        if ( obj.attachEvent ) {
                                obj['e'+type+fn] = fn;
                                obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
                                obj.attachEvent( 'on'+type, obj[type+fn] );
                        } else obj.addEventListener( type, fn, false );
                }
        }
}

var getElementsByClassName = function (className, tag, elm){
    if (document.getElementsByClassName) {
        getElementsByClassName = function (className, tag, elm) {
            elm = elm || document;
            var elements = elm.getElementsByClassName(className),
                nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
                returnElements = [],
                current;
            for(var i=0, il=elements.length; i<il; i+=1){
                current = elements[i];
                if(!nodeName || nodeName.test(current.nodeName)) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    else if (document.evaluate) {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            elm = elm || document;
            var classes = className.split(" "),
                classesToCheck = "",
                xhtmlNamespace = "http://www.w3.org/1999/xhtml",
                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
                returnElements = [],
                elements,
                node;
            for(var j=0, jl=classes.length; j<jl; j+=1){
                classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
            }
            try {
                elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
            }
            catch (e) {
                elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
            }
            while ((node = elements.iterateNext())) {
               returnElements.push(node);
            }
            return returnElements;
        };
    }
    else {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            elm = elm || document;
            var classes = className.split(" "),
                classesToCheck = [],
                elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
                current,
                returnElements = [],
                match;
            for(var k=0, kl=classes.length; k<kl; k+=1){
                classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
            }
            for(var l=0, ll=elements.length; l<ll; l+=1){
                current = elements[l];
                match = false;
                for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
                    match = classesToCheck[m].test(current.className);
                    if (!match) {
                        break;
                    }
                }
                if (match) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    return getElementsByClassName(className, tag, elm);
};
