var offsetfrommouse = [0, 300]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration = 0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 500; // maximum image size.

var insideImg;
var imageShown = false;


var messageDebug;

if (document.getElementById || document.all) {
    document.write('<div id="trailimageid">');
    document.write('</div>');
}

function gettrailobj() {
    if (document.getElementById)
        return document.getElementById("trailimageid").style
    else if (document.all)
        return document.all.trailimagid.style
}

function gettrailobjnostyle() {
    if (document.getElementById)
        return document.getElementById("trailimageid")
    else if (document.all)
        return document.all.trailimagid
}


function truebody() {
    return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}

function showtrail(imagesrc, imagename, description) {
    
//    if (height > 0) {
//        currentimageheight = height;
//    }

    document.onmousemove = SetLayer;

//    if (ratingnumber == 0) {
//        ratingaverage = 0;
//    }


    newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888;">';
    newHTML = newHTML + '<br/> Image Name : '+imagename+'<br/>';
    newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;"><img src="' + imagesrc + '" border="0" width="200" height="200"></div><br/>';
    newHTML = newHTML + '<br/>';
    newHTML = newHTML + '<br/>';
    newHTML = newHTML + '<br/>'+description+'<br/>';
    newHTML = newHTML + '<br/>';
    
    
    gettrailobjnostyle().innerHTML = newHTML;

    gettrailobj().visibility = "visible";

}


function showtrailNewComer(imagesrc, imagename, id, description) {

    //    if (height > 0) {
    //        currentimageheight = height;
    //    }

    

    var width = document.getElementById(id).width;
    var height = document.getElementById(id).height;
    var pos = getElementPosition(id);    
    // alert(id + ", left: " + pos.left);      
    //    if (ratingnumber == 0) {
    //        ratingaverage = 0;
    //    }

    var offset_x = 120;
    var offset_y = 82;

    if (pos.left > 530) {
        var offset_x = -530;
    }
    if (pos.top > 600) {

        var offset_y = -440;
    }

    insideImg = false;

    if (imageShown == false) {
        document.onmousemove = SetLayer;
    }

    offsetfrommouse = [offset_x, offset_y];

    newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888; width:420; height:340">';
    newHTML = newHTML + '<br/>  &nbsp; &nbsp; Name: ' + imagename + '<br/>';
    newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;"><img src="' + imagesrc + '" border="0" width="400" ></div><br/>';
    //newHTML = newHTML + '<br/>';
    //newHTML = newHTML + '<br/>';
    //newHTML = newHTML + '<br/> width ' + width + 'height ' + height + 'left ' + pos.left + 'top ' + pos.top + 'inside ' + messageDebug + '<br/>';
    newHTML = newHTML + '<br/>';


    gettrailobjnostyle().innerHTML = newHTML;

    gettrailobj().visibility = "visible";

}





function showtrailAlbum(imagesrc, imagename, id, description) {

    //    if (height > 0) {
    //        currentimageheight = height;
    //    }



    var width = document.getElementById(id).width;
    var height = document.getElementById(id).height;
    var pos = getElementPosition(id);
    // alert(id + ", left: " + pos.left);      
    //    if (ratingnumber == 0) {
    //        ratingaverage = 0;
    //    }

    var offset_x = 120;
    var offset_y = 82;

    if (pos.left > 530) {
        var offset_x = -530;
    }
    if (pos.top > 600) {

        var offset_y = -440;
    }

    insideImg = false;

    if (imageShown == false) {
        document.onmousemove = SetLayer;
    }

    offsetfrommouse = [offset_x, offset_y];

    newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888; width:420; height:340">';
    newHTML = newHTML + '<br/> &nbsp; &nbsp; Album: ' + imagename + '<br/>';
    newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;"><img src="' + imagesrc + '" border="0" width="400" ></div><br/>';
    //newHTML = newHTML + '<br/>';
    //newHTML = newHTML + '<br/>';
    //newHTML = newHTML + '<br/> width ' + width + 'height ' + height + 'left ' + pos.left + 'top ' + pos.top + 'inside ' + messageDebug + '<br/>';
    newHTML = newHTML + '<br/>';


    gettrailobjnostyle().innerHTML = newHTML;

    gettrailobj().visibility = "visible";

}


function hidetrail() {
    gettrailobj().visibility = "hidden"
    document.onmousemove = ""
    gettrailobj().left = "-9999"
    imageShown = false;

}


var curWidth;
var curHeight
var curPos;

function hidetrailNew(id) {
    curWidth = document.getElementById(id).width;
    curHeight = document.getElementById(id).height;
    curPos = getElementPosition(id);
  
    document.onmousemove = SetLayer;

    // if still inside : do nothing
    if (mouseX > curPos.left && curPos.left + curWidth > mouseX && mouseY > curPos.top && curPos.top + curHeight > mouseY) {


    }
    else {

        gettrailobj().visibility = "hidden"
        document.onmousemove = ""
        gettrailobj().left = "-9999x"
        imageShown = false;
    }
}



///////////////////////////////// Let the layer fix in a certain position //////////////////////////////////////////////////
function SetLayer(e) {

    
    //document.onmousemove = trackMouse;
    if (browser.isMicrosoft) {
        mouseX = event.clientX + document.body.scrollLeft;
        mouseY = event.clientY + document.body.scrollTop;
    }
    else {
        mouseX = e.pageX;
        mouseY = e.pageY;
    }

    xcoord = mouseX + offsetfrommouse[0]
    ycoord = mouseY + offsetfrommouse[1]

     xcoord = 10;
     ycoord = 300;
    if (insideImg == false) {

        gettrailobj().left = xcoord + "px"
        gettrailobj().top = ycoord + "px"
        insideImg = true;
        imageShown = true;
    }
}

function SetLayerHide(e) {


    //document.onmousemove = trackMouse;
    if (browser.isMicrosoft) {
        mouseX = event.clientX + document.body.scrollLeft;
        mouseY = event.clientY + document.body.scrollTop;
    }
    else {
        mouseX = e.pageX;
        mouseY = e.pageY;
    }

    xcoord = mouseX + offsetfrommouse[0]
    ycoord = mouseY + offsetfrommouse[1]

    // xcoord = 269;
    // ycoord = 500;
    if (insideImg == false) {

        gettrailobj().left = xcoord + "px"
        gettrailobj().top = ycoord + "px"
        insideImg = true;
        imageShown = true;
    }
}

////////////////////////////////// Let the layer follow your mouse //////////////////////////////////////////////////////
function followmouse(e) {

    var xcoord = offsetfrommouse[0]
    var ycoord = offsetfrommouse[1]

        var docwidth = document.all ? truebody().scrollLeft + truebody().clientWidth : pageXOffset + window.innerWidth - 15
        var docheight = document.all ? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)

        //if (document.all){
        //	gettrailobjnostyle().innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
        //} else {
        //	gettrailobjnostyle().innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
        //}

        if (typeof e != "undefined") {
            if (docwidth - e.pageX < 300) {
                xcoord = e.pageX - xcoord - 286; // Move to the left side of the cursor
            } else {
                xcoord += e.pageX;
            }
            if (docheight - e.pageY < (currentimageheight + 110)) {
                ycoord += e.pageY - Math.max(0, (110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
            } else {
                ycoord += e.pageY;
            }

        } else if (typeof window.event != "undefined") {
            if (docwidth - event.clientX < 300) {
                xcoord = event.clientX + truebody().scrollLeft - xcoord - 286; // Move to the left side of the cursor
            } else {
                xcoord += truebody().scrollLeft + event.clientX
            }
            if (docheight - event.clientY < (currentimageheight + 110)) {
                ycoord += event.clientY + truebody().scrollTop - Math.max(0, (110 + currentimageheight + event.clientY - docheight));
            } else {
                ycoord += truebody().scrollTop + event.clientY;
            }
        }

        var docwidth = document.all ? truebody().scrollLeft + truebody().clientWidth : pageXOffset + window.innerWidth - 15
        var docheight = document.all ? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)

    gettrailobj().left = xcoord + "px"
    gettrailobj().top = ycoord + "px"

}