function largeCity(id) {   


    var cityNormalHeight=$('#cityNormal_'+id).height();
    var cityLargeHeight=$('#cityLarge_'+id).height();

    var cityNormalWidth=$('#cityNormal_'+id).width();
    var cityLargeWidth=$('#cityLarge_'+id).width();

    var topOffset=parseInt((cityLargeHeight-cityNormalHeight)/2,10);
    var leftOffset=parseInt((cityLargeWidth-cityNormalWidth)/2,10);

    var top=$('#cityNormal_'+id).css('top');
    var left=$('#cityNormal_'+id).css('left');

    top=top.substr(0,top.length-2);    
    top=parseInt(top,10)-parseInt(topOffset,10);

    left=left.substr(0,left.length-2);
    left=parseInt(left,10)-parseInt(leftOffset,10); 

    var cityPointNormal=$('#cityPointNormal_'+id).height();
    var cityPointLarge=$('#cityPointLarge_'+id).height();

    pointOffset=parseInt((cityPointLarge-cityPointNormal)/2,10);

    var topPoint=$('#cityPointNormal_'+id).css('top');
    topPoint=topPoint.substr(0,topPoint.length-2);
    var leftPoint=$('#cityPointNormal_'+id).css('left');
    leftPoint=leftPoint.substr(0,leftPoint.length-2);    

    topPoint=parseInt(topPoint,10)-parseInt(pointOffset,10);    
    leftPoint=parseInt(leftPoint,10)-parseInt(pointOffset,10); 

    $('#cityNormal_'+id).hide();
    $('#cityLarge_'+id).css({'left':top+'px','left':left+'px'});
    $('#cityLarge_'+id).show();

    $('#cityPointNormal_'+id).hide();
    $('#cityPointLarge_'+id).css({'left':topPoint+'px','left':leftPoint+'px'});
    $('#cityPointLarge_'+id).show();
}

function unLargeCity(id){
    $('#cityLarge_'+id).hide();
    $('#cityNormal_'+id).show();
    $('#cityPointLarge_'+id).hide();
    $('#cityPointNormal_'+id).show();
}

$(document).ready(function(){

    for(var i in countryNames){
        placeCountryName(countryNames[i].countryName,countryNames[i].countryUrl,countryNames[i].fontSize,countryNames[i].nameX,countryNames[i].nameY,i);  
    }

    for(var i in cityNames){
        placeCity(cityNames[i].cityName,cityNames[i].cityUrl,cityNames[i].fontSize,cityNames[i].pointSize,cityNames[i].pointX,cityNames[i].pointY,cityNames[i].nameX,cityNames[i].nameY,i); 
    } 

    var onElement=null;
    var pause=100;

    $('.map .countryName').mouseenter(function(){

        var strId=$(this).attr('id').split('_');
        var id=strId[1];

        var countryNormalHeight=$('#countryNormal_'+id).height();
        var countryLargeHeight=$('#countryLarge_'+id).height();

        var countryNormalWidth=$('#countryNormal_'+id).width();
        var countryLargeWidth=$('#countryLarge_'+id).width();

        var topOffset=parseInt((countryLargeHeight-countryNormalHeight)/2,10);
        var leftOffset=parseInt((countryLargeWidth-countryNormalWidth)/2,10);

        var top=$('#countryNormal_'+id).css('top');
        var left=$('#countryNormal_'+id).css('left');

        top=top.substr(0,top.length-2);
        top=parseInt(top,10)-parseInt(topOffset,10);

        left=left.substr(0,left.length-2);
        left=parseInt(left,10)-parseInt(leftOffset,10);        

        $('#countryNormal_'+id).hide();
        $('#countryLarge_'+id).css({'left':top+'px','left':left+'px'});
        $('#countryLarge_'+id).show();
    });


    $('.map .countryName').mouseleave(function(){
        var strId=$(this).attr('id').split('_');
        var id=strId[1];
        $('#countryLarge_'+id).hide();
        $('#countryNormal_'+id).show();
    });


    var intervalId=null;

    $('.map .cityName').mouseenter(function(){
        var strId=$(this).attr('id').split('_');
        var id=strId[1];
        onElement=id;
        setTimeout(function() { 
            if(onElement==id) largeCity(id); 
        }, pause);
    });


    $('.map .cityName').mouseleave(function(){
        var strId=$(this).attr('id').split('_');
        var id=strId[1];
        onElement=null;
        setTimeout(function() { 
            if(onElement!=id) unLargeCity(id);  
        }, pause);
    });



    $('.map .cityPoint').mouseenter(function(){
        var strId=$(this).attr('id').split('_');
        var id=strId[1];
        onElement=id;
        setTimeout(function() { 
            if(onElement==id) largeCity(id); 
        }, pause);
    });


    $('.map .cityPoint').mouseleave(function(){
        var strId=$(this).attr('id').split('_');
        var id=strId[1];
        onElement=null;
        setTimeout(function() { 
            if(onElement!=id) unLargeCity(id);  
        }, pause);
    });


    /*    $('.cityPoint').mouseenter(function(){
    var url=$(this).attr('href');
    $('.cityName[href="'+url+'"]').addClass('select');
    });

    $('.cityPoint').mouseleave(function(){
    var url=$(this).attr('href');
    $('.cityName[href="'+url+'"]').removeClass('select');
    });*/

});


function placeCity(cityName,cityUrl,fontSize,pointSize,pointX,pointY,nameX,nameY,i){

    var m=1.25;
    var fontSizeBig=parseInt(fontSize*m,10); 
    var pointSizeBig=parseInt(pointSize*m,10); 

    $('.map .container').append('<a class="cityPoint normal"  id="cityPointNormal_'+i+'"  href="'+cityUrl+'" style="top:'+parseInt(pointY-(pointSize/2),10)+'px;left:'+parseInt(pointX-(pointSize/2),10)+'px;height:'+pointSize+'px;width:'+pointSize+'px;"><img src="client/img/map/point.png" style="height:'+pointSize+'px;width:'+pointSize+'px;"></a>');

    $('.map .container').append('<a class="cityPoint large"  id="cityPointLarge_'+i+'"  href="'+cityUrl+'" style="top:'+parseInt(pointY-(pointSize/2),10)+'px;left:'+parseInt(pointX-(pointSize/2),10)+'px;height:'+pointSizeBig+'px;width:'+pointSizeBig+'px;"><img src="client/img/map/point.png" style="height:'+pointSizeBig+'px;width:'+pointSizeBig+'px;"></a>');

    $('.map .container').append('<a class="cityName normal"  id="cityNormal_'+i+'" href="'+cityUrl+'" style="top:'+nameY+'px;left:'+nameX+'px;font-size:'+fontSize+'px;line-height:'+fontSize+'px;">'+cityName+'</a>');

    $('.map .container').append('<a class="cityName large"  id="cityLarge_'+i+'" href="'+cityUrl+'" style="top:'+nameY+'px;left:'+nameX+'px;font-size:'+fontSizeBig+'px;line-height:'+fontSizeBig+'px;">'+cityName+'</a>');

}


function placeCountryName(countryName,countryUrl,fontSize,nameX,nameY,i){
    var m=1.25;
    var fontSizeBig=parseInt(fontSize*m,10);    
    $('.map .container').append('<a href="'+countryUrl+'" class="countryName normal" id="countryNormal_'+i+'" style="top:'+nameY+'px;left:'+nameX+'px;font-size:'+fontSize+'px;line-height:'+fontSize+'px;">'+countryName+'</a>');
    $('.map .container').append('<a href="'+countryUrl+'" class="countryName large" id="countryLarge_'+i+'" style="top:'+nameY+'px;left:'+nameX+'px;font-size:'+fontSizeBig+'px;line-height:'+fontSize+'px;">'+countryName+'</a>');
}