$('#governorateSelect').on('change', function(){
var country_id = this.value;

$("#regionSelect").prepend("<option value='' selected='selected'>المنطقة</option>");
$('#regionSelect option:not([data-region|="'+country_id+'"])').css({"display":"none"} );
$('#regionSelect option[data-region|="'+country_id+'"]') .css({"display":"block"} );
  });

      var map;
	  var zoom=10;
	  var initial_lon = 36.2850706;
	  var initial_lat = 33.520296;
	  var markers = new Array();

    function hideAllPopups(){
        var overlays = map.getOverlays();
        overlays.forEach(element => {
            element.setPosition(undefined);
        });
    }

      function initMap() {
       
 
  var locations = [['الفرع الرئيسي',36.295545889218445,33.520438716857285,'011-4435550','011-4435551','دمشق - ساحة السبع بحرات','branch',1],['فرع المزة',36.25743918254509,33.50237637027958,'011-6112824','011-6113494','دمشق - اتستراد المزة - اياب - مقابل طلعة الاسكان','branch',1],['فرع أبو رمانة',36.283398682305624,33.52040643744917,'011-3339445','011-3339443','دمشق - شارع الجلاء – مقابل مكتب البريد','branch',1],['فرع الفيصل',37.140695,36.2133829,'021-2223855','021-2223977','حلب – شارع الفيصل – جوار القنصلية الفرنسية','branch',1],['فرع اللاذقية',35.77271335109401,35.52250381702224,'041-2586750','041-2586751','اللاذقية - الكورنيش الغربي - برج سبيرو','branch',1],['فرع طرطوس',35.87538467726195,34.89997798822603,'043-2232501','043-2232510','طرطوس - شارع المينا ','branch',1],['فرع الميدان',36.29263757839509,33.49014945900626,'011-8815055','011-8819552','دمشق - غربي الميدان - مقابل شركة البريد السريع ','branch',1],['فرع يعفور ',36.1188649342507,33.497669922893024,'011-3977480','011-3977488','ريف دمشق - البوابة الثامنة - بناء بنك البركة ','branch',1],['فرع الفرقان ',37.115085,36.205347,'021-2671277','021-2671644','حلب - الفرقان - شارع الاكسبريس','branch',1],['فرع الدروبي',36.708435,34.729356,'031-2459070','0312459071','حمص - شارع عبد الحميد الدروبي ','branch',1],['فرع القوتلي',36.75528,35.130373,'033-2536460','033-2536457','حماة - شارع القوتلي','branch',1],['مكتب مرفأ اللاذقية ',35.771357,35.511048,'041-2777051','041-2777052',' اللاذقية - باب المرفأ الرئيسي - صالة النافذة الواحدة ','branch',1],['مكتب صافيتا',36.11287010239724,34.81801814648538,'043-5544540','043-5544541','صافيتا – شارع الكورنيش – امتداد السرايا','branch',1],['فرع أشرفية صحنايا',36.25246041206597,33.43330192737016,'011-6712020','011-6712239','ريف دمشق - أشرفية صحنايا - الشارع الرئيسي','branch',1],['فرع دامسكينو مول',36.27555453577251,33.500462276559354,'011-2166788','011-2166789','دمشق - تنظيم كفرسوسة - دامسكينو مول','branch',1],['فرع صلاح الدين',36.7508886246245,35.1260470073168,'033-2510494','033-2510330','حماه - شارع صلاح الدين','branch',1],['ATM Qassion Mall',36.313192944066785,33.548403378320636,'011-9525','','Barzeh - Hamish Highway, New Qasioun Mall','atm',1],['ATM Junada Resort',35.873200993393,34.895930451365906,'043-2232501 / 011-9525','','Junada Resort','atm',1],['فرع شارع حلب ',36.3149285184323,33.52095522240829,'011-4440211','011-4440535','دمشق - منطقة القصاع – شارع حلب','branch',1],['صراف آلي المزة مول',36.246341316550364,33.49749850292247,'011-9525','','المزة - خلف دار البعث','atm',1],     
];

    var baseUrl = "https:\/\/www.albaraka.com.sy";

    
    // Marker as ATM icon
    var atmIconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            src: baseUrl + "/images/atm.png",
        })
    });

    // Marker as branch icon
    var branchIconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            src: baseUrl + "/images/branch.png",
        })
    });

    map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([initial_lon, initial_lat]),
            zoom: zoom
        })
    });
    
    for (i = 0; i < locations.length; i++) {
        var lonLat = ol.proj.fromLonLat([locations[i][1], locations[i][2]]);
        var feature = new ol.Feature({
          geometry: new ol.geom.Point(lonLat),
        });
        
        var popup;
        
        if(locations[i][6] == 'atm'){
          feature.setStyle(atmIconStyle);

          var element = document.createElement('div');
          element.innerHTML = '<div id="content" class="script-governorate-content">' + 
              '<div id="bodyContent">' + 
              '<p class="text-align-left ltr-direction"><b>ATM: </b></p>' +
              '<p class="text-align-left ltr-direction"><b>phone: </b>' + locations[i][3] + '</p>' +
              '<p class="text-align-left ltr-direction"><b>fax: </b>' + locations[i][4] + '</p>' +
              '<p class="text-align-left ltr-direction"><b>address: </b>' + locations[i][5] + '</p>' +
              '</div>' +
              '</div>'.trim();
          popup = new ol.Overlay({
            element: element,
			});
        }
        else{
          feature.setStyle(branchIconStyle);

          var element = document.createElement('div');
          element.innerHTML = '<div id="content" class="script-governorate-content-padding-all">' +
              '<div id="bodyContent">' + 
              '<p class="text-align-left ltr-direction"><b>phone: </b>' + locations[i][3] + '</p>' +
              '<p class="text-align-left ltr-direction"><b>fax: </b>' + locations[i][4] + '</p>' +
              '<p class="text-align-left ltr-direction"><b>address: </b>' + locations[i][5] + '</p>' +
              '</div>' +
              '</div>'.trim();
          popup = new ol.Overlay({
            element: element,
          });
        }

        popup.setPosition(lonLat);
		popup.setOffset([-150,0]);
        markers[i] = feature;
        markers[i].popup = popup;

        map.addOverlay(popup);
    }

    hideAllPopups();

    map.on('click', function(e){
        map.forEachFeatureAtPixel(e.pixel, function(feature, layer){
            hideAllPopups();
            feature.popup.setPosition(e.coordinate);
            map.getView().animate({
				zoom:12,
                center: feature.getGeometry().getCoordinates(),
            });
        });
    });

    var layer = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: markers
        })
      });

      map.addLayer(layer);
    }

$(document).ready(function (){

    function newLocation(newLat, newLng, z){
        
        map.getView().setCenter(ol.proj.transform([newLng, newLat], 'EPSG:4326','EPSG:3857'));
        map.getView().setZoom(z);
        hideAllPopups();
    }

    var citiesArray=[
        [1,36.2128547,33.5075989],[2,37.13426,36.202105],[3,36.755199,35.140888],[4,36.713696,34.732427],[5,35.795267,35.54071],[6,35.886652,34.895928],[7,36.118991,33.497576]    ];
 
    var areaArray=[
        [2,36.25743918254509,33.50237637027958],[3,36.295545889218445,33.520438716857285],[4,36.29263757839509,33.49014945900626],[5,36.283398682305624,33.52040643744917],[7,37.1089089,36.2006587],[8,37.140695,36.2133829],[9,36.755199,35.140888],[10,36.7062561,34.7296164],[11,35.77271335109401,35.52250381702224],[12,35.87538467726195,34.89997798822603],[13,36.1188649342507,33.497669922893024],[14,36.11287010239724,34.81801814648538],[16,36.25246041206597,33.43330192737016],[17,36.27555453577251,33.500462276559354],[18,36.7508886246245,35.1260470073168],[19,36.31410119771573,33.548601252728744],[20,35.873200993393,34.895930451365906],[21,36.3149285184323,33.52095522240829]    ];

    function mapSearch(){
	    var gover=$('#governorateSelect').find(":selected").val();
	    var area=$('#regionSelect').find(":selected").val();
	  
	
        for(var i=0; i<citiesArray.length; i++){
            if (citiesArray[i][0] == gover) {
                newLocation(citiesArray[i][2], citiesArray[i][1], 10);
            }
        }

        for(var i=0; i<areaArray.length; i++) {
            if (areaArray[i][0] == area) {
                newLocation(areaArray[i][2], areaArray[i][1], 14);
            }
        }

        if(gover!=0 && area!==0){
            for(var i=0; i<areaArray.length; i++) {
                if (areaArray[i][0] == area) {
                    newLocation(areaArray[i][2], areaArray[i][1], 10)
                }
            }
        }
    }

    $("#search").on('click', function(){
		mapSearch();
    });

});


$(window).on('load',initMap);