var mapviewer;
var panzoomWidget;
var smallPanzoomWidget;
var smallZoomWidget;
var mapTypeWidget;
var externaljsloaded = false;
var mappingdone = false;

function loadExternalJs(){
    showMapFrame();
    if(!externaljsloaded){
        var e = document.createElement("script");
        e.src = "http://clients.multimap.com/API/maps/1.2/activeh_api?callback=tryMapIt";
        e.type="text/javascript";
        document.getElementsByTagName("head")[0].appendChild(e);
    }
    else{
        tryMapIt();
    }
}

function tryMapIt(){
    if(!mappingdone){
        mapviewer = new MultimapViewer(document.getElementById('mapviewer'));
        mapviewer.drawAndPositionMap(new MMLocation(new MMLatLon(mm_hotellat,mm_hotellon),17));
        AddPanZoomWidget();

        mapviewer.addEventHandler('click',function(type,target,point){
            if(!point && target.infobox_html){
                if(target.infoBoxOpened()){
                    target.closeInfoBox();
                }else{
                    target.openInfoBox(target.infobox_html);
                }
            }
        });

        placeHotels(mappedhotels);
        externaljsloaded = true;
        mappingdone = true;
    }
    //hide loading image
    //document.getElementById("loading").style.display = "none";
    if(document.getElementById("loading")){
        document.getElementsByTagName('body')[0].removeChild(document.getElementById("loading"));
    }
}

function initmap(){
    if(!document.getElementById('mapviewer')){

        //show loading image
        var loadingcontainer = document.createElement("div");
        loadingcontainer.setAttribute('id','loading');
        loadingcontainer.setAttribute('style','position:absolute;');

        var IEbgcontainer = document.createElement("iframe");
        IEbgcontainer.setAttribute('id','mapviewerIEbg');
        IEbgcontainer.setAttribute('style','position:absolute;');

        var container = document.createElement("div");
        container.setAttribute('id','mapviewer');
        container.setAttribute('style','position:absolute;');

        setClassAttribute(container,"bordered bg");
        setClassAttribute(loadingcontainer,"bordered bg");
        var closelink = document.createElement("a");
        closelink.setAttribute('href','javascript:void(undefined)');
        closelink.setAttribute('id','closelink');
        setClassAttribute(closelink,"closelink");
        var closelinktext = document.createTextNode("Close");
        closelink.appendChild(closelinktext);
        container.appendChild(closelink);
        document.getElementsByTagName("body")[0].appendChild(IEbgcontainer);
        document.getElementsByTagName("body")[0].appendChild(container);
        document.getElementsByTagName("body")[0].appendChild(loadingcontainer);

        //give onclick to closelink
        document.getElementById("closelink").onclick = function(){
            hideMapFrame();
            return false;
        }
    }
    loadExternalJs();
}

function mappedhotel(number,hotelid,name,rating,ratingtype,description,lat,lon,brochureurl,guestrating,currenthotelid,lowestrate){
    this.number = number;
    this.hotelid = hotelid;
    this.name = name;
    this.rating = rating;
    this.ratingtype = ratingtype;
    this.description = description;
    this.lat = lat;
    this.lon = lon;
    this.brochureurl = brochureurl;
    this.guestrating = guestrating;
    this.currenthotelid = currenthotelid;
    this.lowestrate = lowestrate;
}

function AddPanZoomWidget(){
    mapviewer.removeWidget( panzoomWidget );
    panzoomWidget = new MMPanZoomWidget();
    mapviewer.addWidget( panzoomWidget );
}

function AddMapTypeWidget(){
    mapviewer.removeWidget( mapTypeWidget );
    mapTypeWidget = new MMMapTypeWidget();
    mapviewer.addWidget( mapTypeWidget );
}

function placeHotels(mappedhotels){
    for(i=0;i<mappedhotels.length;i++){
        var touristratingimg = "";
        if(mappedhotels[i].rating != '0'){
            touristratingimg = "<img src='/wl/wlimages/rating_" + mappedhotels[i].ratingtype + "_" + mappedhotels[i].rating + ".gif' alt='" + mappedhotels[i].rating + " " + mappedhotels[i].ratingtype + "' class='ratingimage'/>";
        }
        var html = "<h2><a href='" + mappedhotels[i].brochureurl + "'>" + mappedhotels[i].name + "</a> " + touristratingimg + "</h2>";
        html += "<p><img src='http://images.activehotels.com/photos/" + mappedhotels[i].hotelid + "/AAB" + mappedhotels[i].hotelid + ".jpg' class='popuphotelimg bordered' />" + mappedhotels[i].description + "</p>";
        html += "<span class='review'>" + mappedhotels[i].guestrating + "</span>";
        html += "<span class='rate'>" + mappedhotels[i].lowestrate + "</span>";
        html = "<div class='popupcontainer'>" + html + "</div>";

        var point = new MMLatLon(mappedhotels[i].lat,mappedhotels[i].lon);
        if(mappedhotels[i].number == '0'){
            var icon = new MMIcon('/wl/wlimages/icon_hotcurrent.gif');
        }
        else{
            var icon = new MMIcon('/wl/wlimages/icon_hot.gif');
        }
        icon.iconSize = new MMDimensions(14,20);
        icon.iconAnchor = new MMPoint(7,20);
        icon.infoBoxAnchor = new MMPoint(7,0);
        var marker = mapviewer.createMarker(new MMLocation(point),"Marker",icon);
        marker.infobox_html = html;
        if(i==0){
            marker.openInfoBox(marker.infobox_html);
        }
    }
}

function showMapFrame(){
    //get scrollheight and add to position top
    var x,y;
    if (self.pageYOffset) // all except Explorer
    {
            x = window.innerWidth;
            y = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop)
            // Explorer 6 Strict
    {
            x = document.documentElement.clientWidth;
            y = document.documentElement.scrollTop;
    }
    else if (document.body) // all other Explorers
    {
            x = document.body.clientWidth;
            y = document.body.scrollTop;
    }

    var leftpos = ((x - 700) / 2) + 'px';
    var toppos = (120 + y) + 'px';
    document.getElementById("mapviewer").style.left = leftpos;
    document.getElementById("mapviewer").style.top = toppos;
    document.getElementById("mapviewerIEbg").style.left = leftpos;
    document.getElementById("mapviewerIEbg").style.top = toppos;
    if(document.getElementById("loading")){
        document.getElementById("loading").style.left = leftpos;
        document.getElementById("loading").style.top = toppos;
    }
}

function hideMapFrame(){
    document.getElementById("mapviewer").style.left = "-1000px";
    document.getElementById("mapviewerIEbg").style.left = "-1000px";

}

function setClassAttribute(theElementName,theClassValue){
   if (theElementName.getAttributeNode("class")) {
     for (var a = 0; a < theElementName.attributes.length; a++) {
       var attrName = theElementName.attributes[a].name.toLowerCase();
       if (attrName == 'class') {
         theElementName.attributes[a].value = theClassValue;
       }
     }
   // otherwise create a new attribute
   } else {
     theElementName.setAttribute("class", theClassValue);
   }
}

/*
    function getElementsByClassName
    Written by Jonathan Snook, http://www.snook.ca/jonathan
    Add-ons by Robert Nyman, http://www.robertnyman.com
*/
function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}