var dtpopupStatus = 0;
var currTrail = null;



//loading popup with jQuery magic!
function dtloadPopup() {
    //loads popup only if it is disabled
    if (dtpopupStatus == 0) {
        var dtrailset = new DTrailSet();
        var dtrailarr = dtrailset.getDTrails();
        $("#DTrailMenu").html("");
        for (var i = 0; i < dtrailarr.length; i++) {
			var idstr = "";
			if(currTrail!=null){
				if(currTrail.dtrailID== dtrailarr[i].dtrailID){
					idstr = "id='selectedlitiem' ";
				}
			}
		
            var liststr = "<tr><td align='left' class='litem' value='" + dtrailarr[i].dtrailID + "' "+ idstr
			+"style='padding-left:0px;font-weight:bold;color:" + dtrailarr[i].color + ";'>&nbsp;&nbsp;" + dtrailarr[i].name + "</td></tr>";
            $("#DTrailMenu").append(liststr);
        }
       
        $(".litem").hover(function() {
            $(this).addClass("dtrailItemhover");
            }, function() {
            $(this).removeClass("dtrailItemhover");
        });

        $(".litem").click(function() {
			$("#selectedlitiem").attr("id","");
			$(this).attr("id","selectedlitiem");
            if(currTrail!=null)
                currTrail.removeTrail();
            var dt = dtrailset.getDTrail($(this).attr("value"));
            dt.paint();
            currTrail = dt;
        });


        
        
        $("#popupDesignTrail").fadeIn("slow");
        
        dtpopupStatus = 1;
    }
}

//disabling popup with jQuery magic!
function dtdisablePopup() {
    //disables popup only if it is enabled
    if (dtpopupStatus == 1) {
        $("#popupDesignTrail").fadeOut("slow");
        dtpopupStatus = 0;
    }
}

function getY(oElement) {
    var iReturnValue = 0;
    while (oElement != null) {
        iReturnValue += oElement.offsetTop;
        oElement = oElement.offsetParent;
    }
    return iReturnValue;
}

function getX(oElement) {
    var iReturnValue = 0;
    while (oElement != null) {
        iReturnValue += oElement.offsetLeft;
        oElement = oElement.offsetParent;
    }
    return iReturnValue;
}

//positioning popup
function dtpositionPopup() {
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupDesignTrail").height();
    var popupWidth = $("#popupDesignTrail").width();

    var o = document.getElementById("btntrailpop");
    var posY = getY(o);
    var posX = getX(o);
    //positioning
    $("#popupDesignTrail").css({
        "position": "absolute",
        "top": posY - popupHeight - 22,
        "left": posX - popupWidth + 122
    });
    //only need force for IE6


}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
    //LOADING POPUP
    //Click the button event!
    $("#popuptrailbutton").click(function() {
        //centering with css
        dtpositionPopup();

        //load popup
        dtloadPopup();
    });

    //CLOSING POPUP
    //Click the x event!
    $("#popupDesignTrailClose").click(function() {
        dtdisablePopup();
    });
    //Press Escape event!
    $(document).keypress(function(e) {
        if (e.keyCode == 27 && dtpopupStatus == 1) {
            dtdisablePopup();
        }
    });

    //load first trail only in design trails
    var pathname = window.location.pathname;
    if (!pathname.match("event")) {
        var dtrailset = new DTrailSet();
        var dtrailarr = dtrailset.getDTrails();
        currTrail = dtrailarr[0];
        currTrail.paint();

    }

});