var Hint={
    html:
    '<div style="width: 240px; text-align:center;display:none; position:absolute;padding: 5px; border: 1px solid #93AABA; background: #F1F6F9; z-index: 200;">' +
    '</div>',
    gelement: '',

    show: function(element){
        if (use_hint == 0) return false;
        // Create tip.
        var div = document.createElement("div");
        div.innerHTML = this.html;
        this.divTip = div.childNodes[0];
        
        //get ID
//        var Id = element.id.match(/\bid_(\d+)\b/);
        var Id = element.id.match(/(\d+)\b/)[0];
        
        //get info
        if (!Prototype.Browser.Opera) resp = new Ajax.Request('/photo/photo_info/' + Id, {asynchronous:true, evalScripts:true, onLoading:function(request){$("ajax-indicator").show();}, onLoaded:function(request){$("ajax-indicator").hide();}, onSuccess:this.set_content.bind(this)});
        if (Prototype.Browser.Opera) resp = new Ajax.Request('/photo/photo_info/' + Id, {asynchronous:true, evalScripts:true, onLoading:function(request){$("ajax-indicator").hide();}, onLoaded:function(request){$("ajax-indicator").show();}, onSuccess:this.set_content.bind(this)});
        
        // Position tip.
        document.body.appendChild(this.divTip);
        this.coord = this.getAbsPos(element);
        this.coord.y = this.coord.y - 2;
        this.coord.x = this.coord.x - 2;
        var width = this.divTip.offsetWidth;
        var docWidth = document.body.scrollWidth;
        if (this.coord.x + width > docWidth) this.coord.x = docWidth - width - 10;
        if (this.coord.x < 0) this.coord.x = 0;
        this.divTip.style.left = this.coord.x + "px";
        this.divTip.style.top = this.coord.y + "px";
        this.divTip.id = "hint_" + element.id;
        
        $("ajax-indicator").style.top = this.coord.y - 80 + "px";
        if ( this.coord.x + width > document.body.scrollWidth/2) $("ajax-indicator").style.left = this.coord.x - 100 + "px";
        else $("ajax-indicator").style.left = this.coord.x + "px";

        gelement = this.divTip
        // Enents for tip.
        Event.observe(document, 'mousemove', this.move);
        return false;},
    
    set_content: function(xhr){
        this.divTip.innerHTML = xhr.responseText
        this.divTip.style.display = "block";
    },

    hide: function(element){
        if (use_hint == 0) return false;
        if (!gelement) return;
        this.divTip.parentNode.removeChild(this.divTip);
        this.divTip = null;

        Event.stopObserving(document, 'mousemove', this.move);
        return false;},

    move: function(event){
        if (use_hint == 0) return false;
        var xPos = Event.pointerX(event);
        var yPos = Event.pointerY(event);
        var delta_x = 20;
        if (xPos > document.body.scrollWidth/2) delta_x = -200;

        Element.setStyle(gelement,{position: 'absolute', left: xPos + delta_x + 'px', top: yPos + 20 +'px'});
        },

    getAbsPos: function(p) {
        var s = { x: 0, y: 0 };
        while (p.offsetParent) {
            s.x += p.offsetLeft;
            s.y += p.offsetTop;
            p = p.offsetParent;
        }
        return s;
    }
}

function View(color)
    {
        color='#'+color;
        Element.setStyle('ColorPreview',{background: color});
    }