cancer = Class.create();
cancer.tips = Class.create();
cancer.tips.show = function(id,left){

    var random = Math.round(Math.random() * 1000000);

    var iconId = 'icon' + random + id;
    var infoDivId = 'infoDiv' + random + id;
    var StateId = 'State' + random + id;
    var LayerStateId = 'LayerState' + random + id;

    document.write('<img src="http://service.joit.com/tips/help.gif" alt="" id="' + iconId + '" style="vertical-align: text-bottom;padding:0px 5px;width:16px;height:16px;padding:0;margin:0;border:none;" />');
    document.write('<div id="' + infoDivId + '" style="overflow:hidden;padding:0px 15px 10px 15px;line-height:2;border:1px solid #DDD;background:#FFF;position:absolute; top:0px;left:0px; display:none;-webkit-box-shadow: 5px 5px 3px #999;-moz-box-shadow: 5px 5px 3px #999;box-shadow: 5px 5px 3px #999;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5"></div>');
    document.write('<input type="hidden" value="hidden" id="' + StateId + '" />');
    document.write('<input type="hidden" value="hidden" id="' + LayerStateId + '" />');

    var fill = false;
    new cancer.tips.tipLayer(id,random,fill,left);
}

cancer.tips.fill = function(containerDomId,id,left){

    var random = Math.round(Math.random() * 1000000);

    var iconId = 'icon' + random + id;
    var infoDivId = 'infoDiv' + random + id;
    var StateId = 'State' + random + id;
    var LayerStateId = 'LayerState' + random + id;

    var innerContent = '';
    innerContent += '<div style="width:16px;height:16px;padding:0;margin:0;border:none;background:url(http://service.joit.com/tips/help.gif) no-repeat;" id="' + iconId + '"></div>';
    innerContent += '<div id="' + infoDivId + '" style="overflow:hidden;padding:0px 15px 10px 15px;line-height:2;border:1px solid #DDD;background:#FFF;position:absolute; top:0px;left:0px; display:none;-webkit-box-shadow: 5px 5px 3px #999;-moz-box-shadow: 5px 5px 3px #999;box-shadow: 5px 5px 3px #999;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5"></div>';
    innerContent += '<input type="hidden" value="hidden" id="' + StateId + '" />';
    innerContent += '<input type="hidden" value="hidden" id="' + LayerStateId + '" />';


    $(containerDomId).innerHTML = innerContent;
    var fill = true;
    new cancer.tips.tipLayer(id,random,fill,left);
}

cancer.tips.tipLayer = Class.create();
cancer.tips.tipLayer.prototype.initialize = function(id,random,fill,left){


    var iconId = 'icon' + random + id;
    var infoDivId = 'infoDiv' + random + id;
    var StateId = 'State' + random + id;
    var LayerStateId = 'LayerState' + random + id;
    var layer = this;

    Event.observe(iconId,'mouseover',function(){
        $(LayerStateId).value = 'show';
        setTimeout(function(){
            layer.show(id,random,fill,left);},200);
    });
    Event.observe(infoDivId,'mouseover',function(){
        $(LayerStateId).value = 'show';

        setTimeout(function(){
            layer.show(id,random,fill,left);},200);
    });

    Event.observe(iconId,'mouseout',function(){
        $(LayerStateId).value = 'hidden';

        setTimeout(function(){
            layer.hide(id,random);},750);
    });
    Event.observe(infoDivId,'mouseout',function(){
        $(LayerStateId).value = 'hidden';

        setTimeout(function(){
            layer.hide(id,random);},750);
    });
    
}
cancer.tips.tipLayer.prototype.show = function(id,random,fill,left){


    var iconId = 'icon' + random + id;
    var infoDivId = 'infoDiv' + random + id;
    var StateId = 'State' + random + id;
    var LayerStateId = 'LayerState' + random + id;
    var layer = this;

    $(infoDivId).style.zIndex = '505';

    var IconX = $(iconId).getBoundingClientRect().left;
    var IconY = $(iconId).getBoundingClientRect().top;

    var scrollX = document.documentElement.scrollLeft;
    if(Prototype.Browser.WebKit){
        var scrollY = window.pageYOffset;
    }else{
        var scrollY = document.documentElement.scrollTop;
    }


    var DivTop = IconY + scrollY;
    var DivLeft
    if(!left || left != 'left'){
        DivLeft = IconX + scrollX + 24;
    }else{
        DivLeft = IconX + scrollX - 305;
    }
    if(fill == false){
        $(infoDivId).style.top = DivTop + 'px';
        $(infoDivId).style.left = DivLeft + 'px';
    }else{
        $(infoDivId).style.top = '0px';
        $(infoDivId).style.left = '40px';
    }

    if($(StateId).value == 'hidden'){
        $(infoDivId).style.width = '270px';
        $(infoDivId).innerHTML = '<div style="margin:0px auto;width:72px;"><img src="http://service.joit.com/tips/loading.gif" alt="Loading..." style="margin:10px 20px;" /><p style="text-align:center;">Loading...</p></div>';
        layer.load(id,random);
    }
    if($(LayerStateId).value == 'show'){
        $(infoDivId).style.display = '';
    }
}

cancer.tips.tipLayer.prototype.hide = function(id,random){

    var infoDivId = 'infoDiv' + random + id;
    var LayerStateId = 'LayerState' + random + id;

    if($(LayerStateId).value == 'hidden'){
        $(infoDivId).style.display = 'none';
    }
}

cancer.tips.tipLayer.prototype.load = function(id,random){

    var StateId = 'State' + random + id;

    var element = new Element('script', {type: 'text/javascript', src: 'http://service.joit.com/tips/tip.php?action=gettip&id=' + id + '&random=' + random + '&callback=cancer.tips.tipLayer.loader'});
    var head = $$('head');
    if(head[0]) {
        head[0].appendChild(element);
    }
    $(StateId).value = 'yes';
}

cancer.tips.tipLayer.loader = function(tipContent){

    var infoDivId = 'infoDiv' + tipContent.data.random + tipContent.data.id;
    var innerContent = '';
    innerContent += '<h2 style="font-size:12px;text-align:left;margin:2px 0px 5px 0px;color:#333;border-bottom:1px dashed #AAAAAA;font-family:"宋体";">' + tipContent.data.title + '</h2>';
    innerContent += '<div style="font-size:12px;margin:0;line-height:1.8;font-weight:normal;color:#454545;font-family:"宋体";">' + tipContent.data.content + '</div>';
    $(infoDivId).innerHTML = innerContent;

}