var aaaa=false;
MapVizual = function(init){
    
    this.map = null;
    
    this.height = null;
    
    this.width = null;
    
    this.zoomCoefficient = 100;
    
    this.zoomIndex = 0;
    
    this.loadingBar = null;
    
    this.cancelCoordsRecalculations = false;
    
    if(init.map){
        this.map = init.map;
    }else{
        return false;
    }
    
    this.height = $("body").height();
    
    this.width = $("body").width();
    
    this.orderIframe = null;
    
    this.initOrderIframe();
    
    this.originalCoords = this.getCoords();  
    
    
    this.loadingStart();
    
    var _this = this;
    
    var loadStatus = 2;
    
    
    $(this.map).find(".image-under-map img, img.map, .image-under-map canvas.filled-areas").load(function(e){
        loadStatus--;
        //alert(loadStatus);
        if(loadStatus!=0){
            return false;
        }
        
        _this.originalHeight = $(_this.map).find("img.map").height();
        _this.fillPolygons();
        _this.mapClickPos = false;
    
          
    
        _this.statusBar = $(".map-status-bar");
    
        _this.initMap();
        _this.initZoomControl();
        _this.initAreaControl();
        
        _this.fullZoomOut();
        
        _this.loadingDone();
    });
    
    $(this.map).find(".image-under-map img, img.map").each(function(){
        var src = $(this).attr("tmp-src");
        $(this).removeAttr("tmp-src");
        $(this).attr("src",src);
        
    });
}

MapVizual.prototype.initOrderIframe = function(){
    this.orderIframe = document.createElement("div");
    
    var back = document.createElement("span");
    $(back).text("Zpět");
    $(back).addClass("back");
    $(back).bind("click",{_this:this},function(e){
        e.data._this.closeOrderIframe();
    });
    
    $(this.orderIframe).append(back);
    $(this.orderIframe).append(document.createElement("iframe"));
    
    $(this.orderIframe).css("width" ,this.width)
                       .css("height",this.height)
                       .css("display","none")
                       .addClass("map-order");
    $(this.map).append(this.orderIframe);                   
    
}

MapVizual.prototype.closeOrderIframe = function(){
    $(this.orderIframe).css("display","none");
}

MapVizual.prototype.openOrderIframe = function(url){
    this.loadingStart()
    
    $(this.orderIframe).find("iframe").attr("src",url);   
    $(this.orderIframe).find("iframe").bind("load",{_this:this},function(e){
        e.data._this.loadingDone();
    });
    
    $(this.orderIframe).css("display","block");
}

MapVizual.prototype.loadingStart = function(){
    if(this.loadingBar == null){
        
        this.loadingBar = document.createElement("div");
        $(this.loadingBar).addClass("map-loading-bar");
        $(this.loadingBar).css("display","none")
                          .css("width",this.width)
                          .css("height",this.height);
        
        $(this.loadingBar).append(document.createElement("span"));                  
        $(this.loadingBar).find("span").text("Loading...");
        $(this.map).append(this.loadingBar);
    }
    $(this.loadingBar).css("display","block");
    
}

MapVizual.prototype.loadingDone = function(){
    $(this.loadingBar).css("display","none");
}



MapVizual.prototype.fullZoomOut = function(){
    var zc = this.zoomCoefficient;
    this.zoomCoefficient = this.originalHeight-this.height;
    
    this.zoomOut();
    this.zoomCoefficient = zc;
    this.recalculateCoords($(this.map).find("img.map").height()/this.originalHeight); 
    this.zoomIndex = -((this.originalHeight-$(this.map).find("img.map").height())/zc);
    this.zoomCoefficient = zc;
    
    /*Posunuti nahoru*/
    var y = this.height-$(this.map).find("img.map").height();
    $(this.map).find("img.map").css("top",y);
    $(this.map).find(".image-under-map img").css("top",y);
    $(this.map).find(".image-under-map canvas.filled-areas").css("top",y);
}

MapVizual.prototype.initMap = function(){
    
    $(this.map).addClass("map-area");
    
    $(this.map).css("height",this.height+"px")
               .css("width",this.width+"px");
     
    $(this.map).find("img.map, area").bind("mousedown",{_this:this},function(e){
            e.preventDefault();
            
            $(e.data._this.map).find("img.map").addClass("moving");
            $(this).addClass("moving");
            var el = $(e.data._this.map).find("img.map");
            e.data._this.mapClickPos = {x:e.pageX,
                                        y:e.pageY,
                                        mapY:$(el).offset().top,
                                        mapX:$(el).offset().left};
        }
    ); 
     
        
    $(this.map).find("img.map, area").bind("mouseup",{_this:this},function(e){
            e.preventDefault();
            $(e.data._this.map).find("img.map").removeClass("moving");
            $(this).removeClass("moving");
            e.data._this.mapClickPos = false;
        }
    );  
        
    $(this.map).find("img.map, area").bind("mousemove",{_this:this},function(e){
        //$(".test").html(($(e.data._this.map).find("img.map").width())  + " < " + e.data._this.width);
            e.preventDefault();
            if(e.data._this.mapClickPos){
                e.data._this.moveMap(e);
            }
        }
    );

}


MapVizual.prototype.moveMap = function(e){
    
    var x,y = 0;
    
    var el = $(this.map).find("img.map");
    var underEl = $(this.map).find(".image-under-map img");
    var filledAreas = $(this.map).find(".image-under-map canvas.filled-areas");
    
    x = this.mapClickPos.mapX + e.pageX - this.mapClickPos.x;
    y = this.mapClickPos.mapY + e.pageY - this.mapClickPos.y;
    
    if(y<0 && -y < $(el).height()-this.height){
        $(el).css("top",y);
        $(underEl).css("top",y);
        $(filledAreas).css("top",y);
    }else{
        this.mapClickPos.y = e.pageY;
        this.mapClickPos.mapY = $(el).offset().top;
    }
    
    if(x<0 && -x < $(el).width()-this.width){
        $(el).css("left",x);
        $(underEl).css("left",x);
        $(filledAreas).css("left",x);
    }else{
        this.mapClickPos.x = e.pageX;
        this.mapClickPos.mapX = $(el).offset().left;
    }    
}


MapVizual.prototype.initZoomControl = function(){
    
    var zoomControl = $("<div class='zoom-control'><span class='zoom-out'>-</span><span class='zoom-in'>+</span></div>");
    
    $(this.map).append(zoomControl);
    
    $(zoomControl).find(".zoom-in").bind("click", {_this:this}, function(e){
        e.data._this.cancelCoordsRecalculations = true;  
        e.data._this.zoomIn();
    });
    
    $(zoomControl).find(".zoom-out").bind("click", {_this:this}, function(e){
        e.data._this.cancelCoordsRecalculations = true;  
        e.data._this.zoomOut();
    });
}

var calcIndex = 0;

MapVizual.prototype.recalculateCoords = function(coef){
    this.cancelCoordsRecalculations = false;
    var c = calcIndex++;
//    $(".test").html($(".test").html() +" | "+(c)+" - progres ");
    for(var key in this.originalCoords){
        var coordsString = "";
        for(var i = 0; i<this.originalCoords[key].coords.length;i++){
            if(this.cancelCoordsRecalculations){
               // alert("fuj");
                this.cancelCoordsRecalculations = false;
                return;
            }
            coordsString+=", "+Math.ceil(this.originalCoords[key].coords[i]*(coef));
        }
        $(this.originalCoords[key].area).attr("coords",coordsString.substr(2));
    }
//    $(".test").html($(".test").html() +" | "+(c)+" - done | ");
}

MapVizual.prototype.zoomOut = function(){
    this.cancelCoordsRecalculations = true;                
    var el = $(this.map).find("img.map");   
    
    var moveX,moveY,resize = 0;
    
    resize = this.zoomCoefficient;  

    var ratio = $(el).width()/$(el).height();
    
     
    if(($(el).offset().top + $(el).height()-this.zoomCoefficient < this.height)){
       if($(el).offset().left == 0 && $(el).width() >= this.width){
           return;
       }
        
        resize =  ($(el).height() - this.height);
        moveY = -$(el).offset().top;
        if($(el).offset().top != 0){
            if(-$(el).offset().top > Math.ceil(this.zoomCoefficient*ratio)){
                moveY = Math.ceil(this.zoomCoefficient*ratio);
                resize = this.zoomCoefficient;
            }else{
                moveY = -$(el).offset().top; // na left: 0px
            }
        }
    }
    
    if($(el).offset().left + $(el).width()-this.zoomCoefficient*ratio < this.width){
        
        resize =  ($(el).width() - this.width)/ratio;
        moveX = -$(el).offset().left;
        
        if($(el).offset().left != 0){
            if(-$(el).offset().left > this.zoomCoefficient*ratio){
                moveX = Math.ceil(this.zoomCoefficient*ratio);
                resize = this.zoomCoefficient;
            }else{
                moveX = -$(el).offset().left; // na left: 0px
            }
           
        }
    }
    
    if(resize == 0){
        return;
    }

    
    $(el).css("height","-="+resize)
         .css("left","+="+moveX)
         .css("top","+="+moveY);
    $(this.map).find(".image-under-map img")
               .css("height","-="+resize)
               .css("width",$(el).width())
               .css("left","+="+moveX)
               .css("top","+="+moveY);
               
    $(this.map).find(".image-under-map canvas.filled-areas")
               .css("height","-="+resize)
               .css("width",$(el).width())
               .css("left","+="+moveX)
               .css("top","+="+moveY);           
               
    this.zoomIndex--;     
    this.recalculateCoords(1+ ((this.zoomCoefficient)/this.originalHeight)*(this.zoomIndex+1)-(resize/this.originalHeight)); 
}

MapVizual.prototype.fillPolygons = function(){
    var canvas = document.createElement("canvas");
    canvas.className = "filled-areas";
    canvas.height = $(this.map).find("img.map").height();
    canvas.width = $(this.map).find("img.map").width();
    if($.browser.msie){
        window.G_vmlCanvasManager.initElement(canvas);
    }
    $(this.map).find(".image-under-map").append(canvas);
    
    if (!canvas.getContext){
        return false;
    }
    
    
    var ctx = canvas.getContext('2d');
   
    var statusColor = areaStatusColors;
    
    $(this.map).find("area").each(function(){
        ctx.beginPath();
        var coords = $(this).attr("coords").split(",");
        ctx.moveTo(coords[0],coords[1]);
            
        for(var i = 2; i < coords.length; i+=2){
            ctx.lineTo(coords[i],coords[i+1]);            
        }
        if($(this).hasClass("status-1")){
            ctx.fillStyle = statusColor["status-1"];
        }else if($(this).hasClass("status-2")){
            ctx.fillStyle = statusColor["status-2"];
        }else if($(this).hasClass("status-3")){
            ctx.fillStyle = statusColor["status-3"];
        }else if($(this).hasClass("status-4")){
           
            ctx.fillStyle = statusColor["status-4"];
        }
        ctx.fill();
        return;
    });
       
       
    
}

MapVizual.prototype.initAreaControl = function(){
        
    $(this.map).find("area").each(function(){
        var href = $(this).attr("href");
        $(this).removeAttr("href");
        $(this).attr("reserve-link",href);
    });    
        
    $(this.map).find("area[reserve-link]").bind("click",{_this:this},function(e){
            e.preventDefault();
             
            e.data._this.openOrderIframe($(this).attr("reserve-link"))
        }
    ); 
        
    $(this.map).find("area").bind("mouseup",{_this:this},function(e){
            e.preventDefault();
            $(".test").html("area mouseup");
        }
    );
       
        
    $(this.map).find("area").bind("mousedown",{_this:this},function(e){
            e.preventDefault();
            $(".test").html("area mousedown");
        }
    );  
        
    $(this.map).find("area").bind("mouseup",{_this:this},function(e){
            e.preventDefault();
            $(".test").html("area mouseup");
        }
    );
        
    $(this.map).find("area[reserve-link]").hover(function(){
  
        $(this).css("cursor","pointer");
    },
    function(){
        $(this).css("cursor","auto");
    });
        
    $(this.map).find("area").bind("mousemove",{_this:this},function(e){
            e.preventDefault();
            $(".test").html("area mousemove");
        }
    );
        
                
    var _this = this;
    $(this.map).find("area").hover(function(e){
            //$(_this.statusBar).fadeIn("slow");
            $(_this.statusBar).css("display","block");
            $(_this.statusBar).find("span").html($(this).attr("title"));
        },function(e){
            $(_this.statusBar).css("display","none");
        }
    );
}

MapVizual.prototype.zoomIn = function(){
    this.cancelCoordsRecalculations = true;           
    var el = $(this.map).find("img.map");   
    
    var moveX,moveY,oldHeight = 0;
    
    oldHeight = $(el).height();
    
    var ratio = $(el).height()/$(el).width();
    
    moveX = (this.zoomCoefficient/2);
    moveY = (this.zoomCoefficient/2)*ratio;

    $(el).css("height","+=" + this.zoomCoefficient)
         .css("left","-="+moveX)
         .css("top","-="+moveY);
         
    $(this.map).find(".image-under-map img")
               .css("height","+=" + this.zoomCoefficient)
               .css("width",$(el).width())
               .css("left","-="+moveX)
               .css("top","-="+moveY);
               
    $(this.map).find(".image-under-map canvas.filled-areas")
               .css("height","+=" + this.zoomCoefficient)
               .css("width",$(el).width())
               .css("left","-="+moveX)
               .css("top","-="+moveY);           
               
    this.zoomIndex++;
    this.recalculateCoords(1+ this.zoomCoefficient/this.originalHeight*this.zoomIndex); 
}


MapVizual.prototype.getCoords = function(){
    var coords = new Array();
    
    $(this.map).find("area[coords!='']").each(function(){
        coords.push({area: this,
                    coords: $(this).attr("coords").split(",")});
    });
    
    return coords;
}






$(function(){
    
    $("#menu-left li.pos-6 a, #vizualMenu2 li.poradi_6 a").addClass("iframe");
    
    $("#menu-left li.pos-6, #vizualMenu2 li.poradi_6").css("display","block");
    
    
    $("#menu-left li.pos-6 a.iframe, #vizualMenu2 li.poradi_6 a").fancybox({width:1100});

    if($(".map-vizualization map").size()==1){
        new MapVizual({map:$(".map-vizualization map")});
    }
});