RegionSelector

by alanbeech

HTML

<p><img id="TargetBanner1" style="position: absolute; right:0px;" src="http://www.shearwell.co.uk/Themes/Shearwell/Content/images/offers/set_tag_offer_flags.jpg" /></p>
<p><img id="TargetBanner2" style="position: absolute; right:0px; top:250px;" src="http://www.shearwell.co.uk/Themes/Shearwell/Content/images/offers/slaughter_settag.jpg" /></p>

CSS

.RegionSelector_mapcontainer
{
    float: left;
    font-size: 10px;
    color: #ccccc;
    font-family:Arial;
    text-align: center;
    width:115px;
}
.RegionSelector_map
{
    margin:10px;
    height:50px;
    
}

.RegionSelector_bubble
{
    position: absolute;
    border: solid 2px darkgreen;
    z-index:999;
    background-color: white;
    display: none;
}

.RegionSelector_bubble1
{
    border-radius:12px;    
    width: 15px;
    height: 15px;
}

.RegionSelector_bubble2
{
    border-radius:25px;    
    width: 20px;
    height: 20px;
}

.RegionSelector_bubble3
{
    border-radius:10px;    
    width: 350px;
    height: 90px;
}

#RegionSelectorTint
{
    background-color: black;
    position: absolute;
    top:0px; 
    left:0px;
    opacity: 0.6;
    display: none;
}

JavaScript

var RegionSelector = (function () {

    // local vars
    var options;
    var element;
    var bubble1, bubble2, bubble3;

    var init = function (e, o) {
        element = e;
        options = o;
        bindClick();
        addScreenTintElement();
        addBubbles();
        bindRegionClicks(element, options);
    };
    
    var bindRegionClicks = function(ownerElement, o){
        $('#' + $(ownerElement).attr('id') +  '_EWLink').click(function(){
            finishAndNavigate(o.EWURL);
        });
        
        $('#' + $(ownerElement).attr('id') +  '_NILink').click(function(){
            finishAndNavigate(o.NIURL);
        });
        
        $('#' + $(ownerElement).attr('id') +  '_SCLink').click(function(){
            finishAndNavigate(o.SCURL);
        });
    };

    var addBubbles = function () {
        // add bubble1
        element.after('<div id="' + $(element).attr('id') +  '_Bubble1" class="RegionSelector_bubble RegionSelector_bubble1"></div>');         
        
        // add bubble2
        element.after('<div id="' + $(element).attr('id') +  '_Bubble2" class="RegionSelector_bubble RegionSelector_bubble2"></div>');         
        
        // add bubble3
        element.after('<div id="' + $(element).attr('id') +  '_Bubble3" class="RegionSelector_bubble RegionSelector_bubble3"><div id="' + $(element).attr('id') +  '_EWLink"  class="RegionSelector_mapcontainer"><img class="RegionSelector_map" src="http://www.shearwell.co.uk/content/images/thumbs/0000187_england-and-wales_125.png"><br/>ENGLAND/WALES</div><div id="' + $(element).attr('id') +  '_NILink" class="RegionSelector_mapcontainer"><img  class="RegionSelector_map" src="http://www.shearwell.co.uk/content/images/thumbs/0000104_northern-ireland_125.png"/><br/>NORTHERN IRELAND</div><div id="' + $(element).attr('id') +  '_SCLink" class="RegionSelector_mapcontainer"><img  class="RegionSelector_map" src="http://www.shearwell.co.uk/content/images/thumbs/0000188_scotland_125.png"...