$(document).ready(function() {

    /**
    * Image spots for hotspots
    **/
    function CreateHotSpots() {

        $("#hotspot_area").append("<div id=\"hs_histreet\" class=\"hotspot\" style=\"top:40px;left:5px\"><a href=\"#\" title=\"The hi street\"></a></div>");
        $("#hotspot_area").append("<div id=\"hs_safer\" class=\"hotspot\" style=\"top:20px;left:245px\"><a href=\"#\" title=\"Safer Using\"></a></div>");
        $("#hotspot_area").append("<div id=\"hs_twitter\" class=\"hotspot\" style=\"top:50px;left:785px\"><a href=\"#\" title=\"Twitter\"></a></div>");
        $("#hotspot_area").append("<div id=\"hs_health\" class=\"hotspot\" style=\"top:205px;left:630px\"><a href=\"#\" title=\"Health\"></a></div>");
        $("#hotspot_area").append("<div id=\"hs_hiway\" class=\"hotspot\" style=\"top:185px;left:825px\"><a href=\"#\" title=\"The hi way\"></a></div>");
        $("#hotspot_area").append("<div id=\"hs_drugs\" class=\"hotspot\" style=\"top:355px;left:25px\"><a href=\"#\" title=\"Drugs guide\"></a></div>");
        $("#hotspot_area").append("<div id=\"hs_treatment\" class=\"hotspot\" style=\"top:320px;left:525px\"><a href=\"#\" title=\"Treatment\"></a></div>");
        $("#hotspot_area").append("<div id=\"hs_about\" class=\"hotspot\" style=\"top:380px;left:420px\"><a href=\"#\" title=\"About\"></a></div>");
        $("#hotspot_area").append("<div id=\"hs_rights\" class=\"hotspot\" style=\"top:550px;left:110px\"><a href=\"#\" title=\"Your rights\"></a></div>");
        $("#hotspot_area").append("<div id=\"hs_services\" class=\"hotspot\" style=\"top:540px;left:680px\"><a href=\"#\" title=\"Services\"></a></div>");

        $(".hotspot").unbind("click").click(function(e) {

            var who = $(this).attr("id");
            var obj = $(this);
            var p = obj.position();
            var hs_text = "ERROR";
            var hs_link = "#";

            $(".hotspot").show();
            obj.hide();

            $("#hotspot_info").empty();
            $("#hotspot_info").append("<div id=\"hotspot_bar\"></div><div id=\"hotspot_text\"></div>");
            $("#hotspot_info").css({"top": p.top + "px","left": p.left + "px"})

            var hs_more = "tb";

            switch (who) {
                case "hs_histreet":
                    hs_text = "<h2>The hi street</h2><p>This is a new feature and is coming soon.</p>";
                    hs_link = "/about/the-hi-street.aspx";
                    break;
                case "hs_safer":
                    hs_text = "<h2>Safer using</h2><p>No drug use is risk or harm free, there are practical things that can be done to reduce the harms caused by drug use.</p>";
                    hs_link = "/safer-using/";
                    break;
                case "hs_twitter":
                    hs_text = "";
                    hs_link = "#";
                    hs_more = "";
                    $("#hotspot_info").css({ "left": p.left - 100 + "px" });
                    $("#hotspot_text").append("<div id=\"twitter\"></div>");
                    $("#twitter").getTwitter({
                        userName: "hiwecanhelp",
                        numTweets: 1,
                        loaderText: "Loading tweets...",
                        slideIn: true,
                        slideDuration: 750,
                        showHeading: false,
                        headingText: "Latest Tweets",
                        showProfileLink: true,
                        showTimestamp: false,
                        refresh: 60
                    });
                    break;
                case "hs_health":
                    hs_text = "<h2>Health</h2><p>Being healthy is not just about physical health. It also includes emotional, social, sexual and mental well being.</p>";
                    hs_link = "/health/";
                    break;
                case "hs_hiway":
                    hs_text = "<h2>The hi way</h2><p>This is a new feature and is coming soon.</p>";
                    hs_link = "/about/the-hi-way.aspx";
                    $("#hotspot_info").css({ "left": p.left - 140 + "px" });
                    break;
                case "hs_drugs":
                    hs_text = "<h2>Drugs guide</h2><p>Here you can search using official names or slang terms for drugs.</p>";
                    hs_link = "/drug-guide/";
                    break;
                case "hs_treatment":
                    hs_text = "<h2>Treatments</h2><p>Drug treatment has changed. There is faster and better treatment available now, this does not make the first visit less daunting.</p>";
                    hs_link = "/treatments/";
                    break;
                case "hs_about":
                    hs_text = "<h2>About</h2><p>hi, affected by drug use and need to be better connected?</p>";
                    hs_link = "/about/";
                    break;
                case "hs_rights":
                    $("#hotspot_info").css({ "top": p.top - 150 + "px" });
                    hs_text = "<h2>Rights</h2><p>We want you to feel secure when using the site and we are committed to respecting your privacy. This is an overview of how we do that.</p>";
                    hs_link = "/your-rights/";
                    break;
                case "hs_services":
                    $("#hotspot_info").css({ "top": p.top - 150 + "px" });
                    hs_text = "<h2>Services</h2><p>Knowing what services are out there and how to access them is an essential part of successful drug treatment.</p>";
                    hs_link = "/local-services/";
                    break;
            }

            //output and display content
            if (hs_more == "tb") { hs_more = "<a href=\"" + hs_link + "\">find out more</a>"; }
            $("#hotspot_text").append("<div>" + hs_text + "</div>" + hs_more);
            $("#hotspot_info").show();

            //event to close the info box
            $("#hotspot_bar").unbind("click").click(function(e) {
                $("#hotspot_info").empty();
                $("#hotspot_info").hide();
                obj.show();
            });
            return false;
        });
    }

    CreateHotSpots();

});