var globalactivehotspotid =  new Array
var globalactivehotspotimageurl =  new Array
var globalactiveMapPosX =  new Array
var globalactiveMapPosY =  new Array

function iamapCreateTooltips(kompid){
    
    if ($('#imaphidetooltips-' + kompid).val()=='1') {
        return
    }
    var   ids = $('#mapitemlist-' +  kompid).val().split(',')
    var   ttpos = $('#mapitemtooltippos-' +  kompid).val().split(',') 
    for (var j = 0; j <ids.length; j++) {
        $('#i-' + ids[j]).tooltip({tip:'#t-i-' + ids[j],
        events: {tooltip: " ,",def: "mouseover,mouseout click drag"}, 
        relative:false,
        predelay:50,
        delay: 10, 
        lazy:false,
        position: ttpos[j],
        offset: [0, 0]  })  
    }
}

function iamapMakeMapItemsDragAble(strhidmapitems,kompid){
    var   ids = $('#' + strhidmapitems).val().split(',')
    
    for (var j = 0; j <ids.length; j++) {
        
        //Hotspots Dragable machen
        $('#i-' + ids[j]).draggable({containment: '#d-mapcontainer-i-' + kompid}) 
                 
        //Editor nach Drag öffnen
        $('#i-' + ids[j]).bind('dragstop',({id:'i-' + ids[j],kompid: kompid}), function(event, ui) {
            mapitemdragend(event.data.id,event.data.kompid) 
        });
        
    }
}

function mapIsDragAble(kompid) {
    if ($('#imapisddragable-' + kompid).val()==0) {
        return false
    
    }
    else {
        return true
    }
}




function iamapMakeMapDragAble(kompid,dragstartposX,dragstartposY) {
    if (mapIsDragAble(kompid)==false) {return}
    
    var imgwidth = $('#mapmainimage-' + kompid).width()
    var imgheight = $('#mapmainimage-' + kompid).height()
    var contwidth = $('#d-mapcontainer-' + kompid).width() 
    var contheight = $('#d-mapcontainer-' + kompid).height()
    var dragDirection
    // Grösse des Drag-Container setzen
    $('#d-mapcontainer-i-' + kompid).width(imgwidth)
    $('#d-mapcontainer-i-' + kompid).height(imgheight)
    
    //Grösse des Dragbaren Bereichs
    $('#d-mapcontainer-draglimit-' + kompid).width((imgwidth * 2) - contwidth)
    $('#d-mapcontainer-draglimit-' + kompid).height((imgheight * 2) - contheight)
    
    //Dragbaren Bereich Positionieren
    $('#d-mapcontainer-draglimit-' + kompid).css({position:'relative',left:(imgwidth-contwidth) *-1 + 'px',top:(imgheight-contheight) *-1 + 'px'})
    
    //Drag-Container auf startposition schieben
    $('#d-mapcontainer-i-' + kompid).css({
        position:'absolute', 
        left: parseInt(imgwidth-contwidth - dragstartposX) + 'px', 
        top: parseInt(imgheight - contheight - dragstartposY) + 'px', 
        cursor: 'move'})
    
    
    
    if ($('#imapdragdirection' + kompid).val()==2) {}
   
    $('#d-mapcontainer-i-' + kompid).draggable({handle:'#mapmainimage-' + kompid, 
                                                containment: '#d-mapcontainer-draglimit-' + kompid, 
                                                stop: function(event, ui) { 
                                                    setmapfitinRage(kompid) 
                                                    }
                                               }) 
   
    if ($('#imapdragdirection-' + kompid).val()==1) {
        $('#d-mapcontainer-i-' + kompid).draggable('option','axis','x')
     }
    if ($('#imapdragdirection-' + kompid).val()==2) {
        $('#d-mapcontainer-i-' + kompid).draggable('option','axis','y')
     }
    
    $('#mapmainimage-' + kompid).width($('#mapmainimage-' + kompid).width())
    $('#mapmainimage-' + kompid).height($('#mapmainimage-' + kompid).height())
   
}



//$(document).ready(function() {
//   	
//})

// Mouseover Mouseout un Click - Steuerung 
function setMapitemActiv(oImage,imageurl,mainimageurl,kompid) {
    
    if (globalactivehotspotimageurl[kompid]!=null) {
        document.getElementById(globalactivehotspotid[kompid]).src=globalactivehotspotimageurl[kompid]
    }
    globalactivehotspotid[kompid]=oImage.id
    globalactivehotspotimageurl[kompid]=mainimageurl
    oImage.src=imageurl
    
}

function setMapitemMouseout(oImage,imageurl,kompid) {
    if (oImage.id==globalactivehotspotid[kompid]) {
        return
    }
    oImage.src=imageurl
}

function setMapitemMouseon(oImage,imageurl,kompid) {
    if (oImage.id==globalactivehotspotid[kompid]) {
        return
    }
    oImage.src=imageurl
}


function saveMapoffsetPos(kompid) {
    var offsetpos = $('#d-mapcontainer-i-' + kompid).position();
    globalactiveMapPosX[kompid]=offsetpos.left
    globalactiveMapPosY[kompid]=offsetpos.top
}


function mapitemdragend(itemid,kompid) {
    var offset = $('#' + itemid).offset();
    var offsetMap = $('#d-mapcontainer-i-' + kompid).offset();
   
    var oAnchor=document.getElementById(itemid).parentNode
    var posX  = offset.left - offsetMap.left
    var posY = offset.top - offsetMap.top
    
    oAnchor.href = oAnchor.href + "&posX=" + posX + "&posy=" + posY
    openHotspoteditor(oAnchor,kompid)
    
    
}


function AddNewHotspot(oAnchor,kompid) {
    
    if (mapIsDragAble(kompid)==true) {
        var offsetMapitem = $('#d-mapcontainer-i-' + kompid).offset();
        var offsetMap = $('#d-mapcontainer-' + kompid).offset();
        var posX  = offsetMap.left - offsetMapitem.left
        var posY  = offsetMap.top - offsetMapitem.top
        oAnchor.href = oAnchor.href + "&posX=" + posX + "&posY=" + posY
        //alert(posY)
    }
    openHotspoteditor(oAnchor,kompid)
}

// Editor 
function openHotspoteditor(oAnchor,kompid) {
  //var win = window.open(oAnchor.href,'Hotspoteditor','width=500,height=600,toolbar=0,status=1,scrollbars=1,resizable=1');win.focus() 
    
    saveMapoffsetPos(kompid)
    
    var offset = $('#d-mapcontainer-' + kompid).offset()
    var imgoffset=$('#' + oAnchor.childNodes[0].id).offset();
    offset.left = offset.left + 30
   offset.top = offset.top - 100
   if (offset.top<0) {offset.top=0} 
 
   //Bildgrösse hinzufügen
   oAnchor.href = oAnchor.href + "&imgmheight=" + $("#mapmainimage-" + kompid).attr("height") + "&imgmwidth=" + $("#mapmainimage-" + kompid).attr("width") 
   $('#imeditor-' + kompid).css(offset)
   $('#imeditor-' + kompid).show()
   $('#imeditoriframe-' + kompid).attr('src',oAnchor.href)
  
}


//Interface zum Editor
function reloadEntireMap(kompid) {
    //location.href=location.href
    var posX=globalactiveMapPosX[kompid] + 'px'
    var posY=globalactiveMapPosY[kompid] + 'px'
    $('#imeditor-' + kompid).hide()
    
    
   //alert(posX + '-' + posY)
   
   //Inhalt neu laden
   $('#iimaproot-' + kompid).load(location.href + ' #inneriimaproot-' +kompid, function(){
        
        iamapCreateTooltips(kompid); //Tooltips erzeugen
        $('#imeditor-'  + kompid ).draggable({handle:'.handle'}); // Editorfenster Dragable machen
        $('#imeditorclose-' + kompid).bind("click", function(e){ $('#imeditor-' + kompid).hide()}); // Close-Link für Editor
        iamapMakeMapItemsDragAble('mapitemlist-' + kompid,kompid);
       
        iamapMakeMapDragAble(kompid,0,0)
        if (mapIsDragAble(kompid)==true) {
            //Dragposition der Karte wiederhersetllen!
            $('#d-mapcontainer-i-' + kompid).css({position:'relative',top: posY , left: posX })
            iamapMakeAddDragButtonPos(kompid)
        }
         
       
   }) 
}


function iimapshowoverlay(kompid,overlaypar){
   
    $('#mapitemoverlay-' + kompid).overlay(overlaypar).load()
}


function setmapfitinRage(kompid) {
    var oMap = $('#d-mapcontainer-' + kompid).offset();
    var oMapcontent = $('#d-mapcontainer-i-' + kompid).offset()
    var diff
    if(oMapcontent.top + 1  >= oMap.top) {
        //Bild zu tief!
        diff=oMapcontent.top - oMap.top
        oMapcontent = $('#d-mapcontainer-i-' + kompid).position()
        $('#d-mapcontainer-i-' + kompid).css({position:'relative',left: oMapcontent.left +'px',top:  parseInt(oMapcontent.top - diff) +'px'})
        oMapcontent = $('#d-mapcontainer-i-' + kompid).offset()
        $('#drb-top' + kompid).hide()
    }
    else { $('#drb-top' + kompid).show()}
    
    if(oMapcontent.top + $('#d-mapcontainer-i-' + kompid).height()-1 <= oMap.top + $('#d-mapcontainer-' + kompid).height() ) {
        //Bild zu hoch!
        diff= parseInt(oMap.top + $('#d-mapcontainer-' + kompid).height()) - parseInt(oMapcontent.top + $('#d-mapcontainer-i-' + kompid).height())
        oMapcontent = $('#d-mapcontainer-i-' + kompid).position()
        $('#d-mapcontainer-i-' + kompid).css({position:'relative',left: oMapcontent.left +'px',top:  parseInt(oMapcontent.top + diff) +'px'})
        oMapcontent = $('#d-mapcontainer-i-' + kompid).offset()
         $('#drb-bottom' + kompid).hide()
    }
    else { $('#drb-bottom' + kompid).show()}
    
    if(oMapcontent.left+1 >= oMap.left) {
        //Bild zu weit rechts
        diff= oMapcontent.left - oMap.left
        oMapcontent = $('#d-mapcontainer-i-' + kompid).position()
        $('#d-mapcontainer-i-' + kompid).css({position:'relative',left:  parseInt(oMapcontent.left -diff) +'px',top: oMapcontent.top +'px'})
        oMapcontent = $('#d-mapcontainer-i-' + kompid).offset()
        $('#drb-left' + kompid).hide()
    }
    else { $('#drb-left' + kompid).show()}
    
    if(oMapcontent.left + $('#d-mapcontainer-i-' + kompid).width()-1 <= oMap.left + $('#d-mapcontainer-' + kompid).width() ) {
        //Bild zu weit rechts!
        diff= parseInt(oMap.left + $('#d-mapcontainer-' + kompid).width()) - parseInt(oMapcontent.left + $('#d-mapcontainer-i-' + kompid).width())
        oMapcontent = $('#d-mapcontainer-i-' + kompid).position()
        $('#d-mapcontainer-i-' + kompid).css({position:'relative',left: parseInt(oMapcontent.left + diff) +'px',top: oMapcontent.top  +'px'})
        oMapcontent = $('#d-mapcontainer-i-' + kompid).offset()
        $('#drb-right' + kompid).hide()
    }
    else { $('#drb-right' + kompid).show()}

}

function imapIsInRange(newPos,kompid) {

    var maxX = $('#d-mapcontainer-draglimit-' + kompid).width() - $('#d-mapcontainer-i-' + kompid).width()
    var maxY = $('#d-mapcontainer-draglimit-' + kompid).height() - $('#d-mapcontainer-i-' + kompid).height()
    //alert(maxX + '--' + newPos.x)
   
    if (newPos.x > maxX) { // Zu weit rechts
        newPos.x = maxX  }
    if (newPos.x < 0 ) { // Zu weit links
        newPos.x = 0  }   
    if (newPos.y > maxY) { // Zu weit unten
        newPos.y = maxY  }    
    if (newPos.y < 0) { // Zu weit oben
        newPos.y = 0  }    
    return newPos
}

//Hotspots Suchen
function setMapItemToCenter(imgid,kompid) {
    var maxX 
    var maxY
    var newPos = new  Array
    
    var oImage = $('#' + imgid).offset()
    var oMap = $('#d-mapcontainer-' + kompid).offset();
    var mapCenterX = parseInt(oMap.left + ($('#d-mapcontainer-' + kompid).width() /2))
    var mapCenterY = parseInt(oMap.top + ($('#d-mapcontainer-' + kompid).height() /2))
    var mapXdiff = mapCenterX - oImage.left - parseInt($('#' + imgid).width() /2)
    var mapYdiff = mapCenterY - oImage.top - parseInt($('#' + imgid).height() /2)
    var oMapcontent = $('#d-mapcontainer-i-' + kompid).position()
    newPos.x = oMapcontent.left + mapXdiff
    newPos.y = oMapcontent.top + mapYdiff
    newPos=imapIsInRange(newPos,kompid)
    
    $('#d-mapcontainer-i-' + kompid).animate({ left: newPos.x +'px', top: newPos.y +'px' }, 
                                                   300,
                                                   'linear', 
                                                   function(){setmapfitinRage(kompid)})
    
    //function(){setmapfitinRage(kompid)}
    //'#d-mapcontainer-draglimit-' + kompid
    //Prüfen ob ausserhalb
    setmapfitinRage(kompid)
    //var oImg = $('#' + imgid).offset()
    
    
}

// Dgragbilder Setzen

function iamapMakeAddDragButtonPos(kompid) {
   var oMap = $('#d-mapcontainer-' + kompid).offset()
   var x
   var y
   //Linker Button
   x = oMap.left + 5 //+ parseInt($('#drb-left' + kompid).width())
   y=  oMap.top +  parseInt($('#d-mapcontainer-' + kompid).height()/2)  - parseInt($('#drb-left' + kompid).height() /2)
   $('#drb-left' + kompid).css({position:'absolute', left: x + 'px', top: y +'px', zindex: 990,display:'block'})
   
   //Rechter Button
   x = oMap.left + $('#d-mapcontainer-' + kompid).width() - 5 - parseInt($('#drb-right' + kompid).width())
   $('#drb-right' + kompid).css({position:'absolute', left: x + 'px', top: y +'px', zindex: 990,display:'block'})
   
   //Oberer Button
   x = oMap.left + parseInt($('#d-mapcontainer-' + kompid).width()/2) - parseInt($('#drb-top' + kompid).width()/2) 
   y=  oMap.top  +5 // -  parseInt($('#drb-top' + kompid).height()) + 10
   $('#drb-top' + kompid).css({position:'absolute', left: x + 'px', top: y +'px', zindex: 990,display:'block'})
   
   //Unterer Button
   y=  oMap.top + parseInt($('#d-mapcontainer-' + kompid).height())  - (parseInt($('#drb-bottom' + kompid).height()) ) -5
   $('#drb-bottom' + kompid).css({position:'absolute', left: x + 'px', top: y +'px', zindex: 990,display:'block'})
   
   setmapfitinRage(kompid)
 

}


//Dragbefehl ausführen 
function iaimsetDragMap(kompid,dragwidth,ddir) {
    var oMapcontent = $('#d-mapcontainer-i-' + kompid).position()
   var newPos = new  Array
   if(ddir=='x'){
          newPos.x = oMapcontent.left + dragwidth
         newPos.y = oMapcontent.top
         newPos=imapIsInRange(newPos,kompid)
         $('#d-mapcontainer-i-' + kompid).animate({ left: newPos.x +'px' }, 
                                                   300,
                                                   'linear',
                                                   function(){
                                                        setmapfitinRage(kompid)
                                                   } )
    }
    
    if(ddir=='y'){
         newPos.y = oMapcontent.top + dragwidth
         newPos.x= oMapcontent.left
         newPos=imapIsInRange(newPos,kompid)
         $('#d-mapcontainer-i-' + kompid).animate({ top: newPos.y +'px' }, 
                                                   150,
                                                   'linear',
                                                   function(){
                                                        setmapfitinRage(kompid)
                                                   } )
    }
}


/** LADE ANIMATION */

function imapShowLoading(kompid) {
    
    var offset = $('#mco-' + kompid).offset();
    var lposX = offset.left + parseInt($('#mco-' + kompid).width() /2) -  parseInt($('#imapwaitimg-' + kompid).width() /2)
    var lposY = offset.top + parseInt($('#mco-' + kompid).height() /2) -  parseInt($('#imapwaitimg-' + kompid).height() /2)
    $('#imapwaitimg-' + kompid).css({position:'absolute', 
                                    left: lposX + 'px', 
                                    top: lposY +'px', 
                                    display: 'block',
                                    zdinsex:999
                                    })
 }

function imapHideLoading(kompid) {
    $('#imapwaitimg-' + kompid).hide()
}