Ext.onReady(function(){

Ext.QuickTips.init();

// start Variabile ------------------------------------------------------------------------------------------------------------
var xg = Ext.grid;
var sm = new xg.CheckboxSelectionModel();
var remoteSort = true;
var localFilter = false;
// end Variabile ------------------------------------------------------------------------------------------------------------

// start parametri harta ------------------------------------------------------------------------------------------------------------
// fereastră filtru hartă
var win, block = Ext.Element.get(Ext.DomQuery.select("div.execute")[0]);
var container = Ext.Element.get(Ext.DomHelper.append(block, {tag: "div"}));

var rextent = new OpenLayers.Bounds(2120668,5359152,3417039,6215247);

var options = {
	projection: new OpenLayers.Projection("EPSG:900913"),
	displayProjection: new OpenLayers.Projection("EPSG:4326"),
	units: "m",
	controls: [],
	maxResolution: 156543.0339,
	maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
	restrictedExtent: rextent
};

var map = new OpenLayers.Map('map', options);
	
// straturi
var index_pt_20k = new OpenLayers.Layer.WMS("Caroiaj","https://www.geo-spatial.org/geoserver/wms", {layers: 'geospatial:index_pt_20k', format: 'image/png', srs: 'EPSG:900913', tiled: 'true', transparent: 'true'}, {isBaseLayer: false, displayInLayerSwitcher: false});

var osm = new OpenLayers.Layer.OSM("OpenStreetMap", null, {transitionEffect: "resize", attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"});



var select = new OpenLayers.Layer.Vector("Selection", {styleMap: new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"]), displayInLayerSwitcher: false});

map.addLayers([osm, index_pt_20k, select]);

//controale harta
map.addControl (new OpenLayers.Control.PanZoom());
map.addControl(new OpenLayers.Control.LayerSwitcher());

//butoane & filtre selectie

selectControls = {
	
	controlBox: new OpenLayers.Control.GetFeature({
		protocol: OpenLayers.Protocol.WFS.fromWMSLayer(index_pt_20k),
		click: false,
    	box: true,
    	hover: false,
    	multipleKey: "shiftKey",
    	toggleKey: "altKey"
	}),
  

	controlClick: new OpenLayers.Control.GetFeature({
		protocol: OpenLayers.Protocol.WFS.fromWMSLayer(index_pt_20k),
		click: true,
		box: false,
		hover: false,
		multipleKey: "shiftKey",
		toggleKey: "altKey"
	})
}

selectControls.controlClick.events.register("featureselected", this, function(e) {
	select.addFeatures([e.feature]);
	});

selectControls.controlClick.events.register("featureunselected", this, function(e) {
	select.removeFeatures([e.feature]);
	});

	selectControls.controlBox.events.register("featureselected", this, function(e) {
		select.addFeatures([e.feature]);
	});
      
selectControls.controlBox.events.register("featureunselected", this, function(e) {
	select.removeFeatures([e.feature]);
	});

map.addControl(selectControls.controlBox);
selectControls.controlBox.activate();
map.addControl(selectControls.controlClick);

var selectByClickBtn = new OpenLayers.Control({displayClass: "selectByClickBtn", title: "Select "});
var selectByBoxBtn = new OpenLayers.Control({displayClass: "selectByBoxBtn", title: "Select by box"});
var clearSelectionBtn = new OpenLayers.Control.Button({displayClass: "clearSelectionBtn", trigger: clearSelection, title: "Clear selection"});
var panel = new OpenLayers.Control.Panel({defaultControl: selectByBoxBtn});
var pan = new OpenLayers.Control.Navigation({title: "Pan", displayClass: "panControl"});
var zoom = new OpenLayers.Control.ZoomBox({title:"Zoom in", displayClass: "zoomControl"});
panel.addControls([selectByBoxBtn, selectByClickBtn, clearSelectionBtn, zoom, pan]);
panel.activateControl([selectByClickBtn]);
map.addControl(panel);

selectByBoxBtn.events.register("activate", this, function(e) {
	select.destroyFeatures();
	selectControls.controlClick.deactivate();
	selectControls.controlBox.activate();
});

selectByClickBtn.events.register("activate", this, function(e) {
	select.destroyFeatures();
	selectControls.controlBox.deactivate();
	selectControls.controlClick.activate();
});

function clearSelection() {
	select.destroyFeatures();
}

// functie extragere tile-uri OSM
function osm_getTileURL(bounds) {
    var res = this.map.getResolution();
    var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
    var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
    var z = this.map.getZoom();
    var limit = Math.pow(2, z);

    if (y < 0 || y >= limit) {
        return OpenLayers.Util.getImagesLocation() + "404.png";
    } else {
        x = ((x % limit) + limit) % limit;
        return this.url + z + "/" + x + "/" + y + "." + this.type;
    }
}

function toggleControl(element) {
	for (var key in selectControls) {
		var control = selectControls[key];
		if (element.value == key && element.checked) {
			control.activate();
			select.destroyFeatures();
		} else {
			control.deactivate();
		}
	}
}

// end parametri harta ------------------------------------------------------------------------------------------------------------
	
store = new Ext.data.Store({
	url: 'pt-grid-json.php',
	remoteSort: remoteSort,
	reader: new Ext.data.JsonReader({
		root: 'rows',
		id: 'idi',
		totalProperty: 'results'
	},
	[
		{name: 'idi', sortType: 'asInt', type: 'int'},
		{name: 'indicativ'},
		{name: 'numePlansa'},
		{name: 'anTiparire'},
		{name: 'action'},
		{name: 'dowId'}		
	])
});

store.setDefaultSort('idi', 'asc');

function butonStatus(val){
	if (val == 0){
	return  '<img src="images/neinceput.png" alt="Neînceput" title="Neînceput">';
	}
	if (val == 1){
	return  '<img src="images/inLucru.png" alt="În lucru" title="În lucru">';
	}
	if (val == 2){
	return  '<img src="images/finalizat.png" alt="Finalizat" title="Finalizat">';
	}		
}
	
function editLink(val){
action = val.split('#');
	if( action[0] == 1)
		return  '<a href="preview-pt-zoomify.php?mapId='+action[1]+'" target="_blank"><img src="images/preview.png" alt="Preview" title="Preview" /></a>';
	else
		return  '<a href="pt-metadata.php?mapId='+action[1]+'" target="_blank"><img src="images/preview.png" alt="Preview" title="Preview" /></a>';
}

function downloadLink(val){
		return  '<a href="https://www.geo-spatial.org/vechi/file_download/'+val+'"><img src="images/download.png" alt="Download" title="Download" /></a>';
}	

var combo = new Ext.form.ComboBox({
	name : 'perpage',
	width: 50,
	store: new Ext.data.ArrayStore({
		fields: ['id'],
		data  : [
		['10'],
		['20'],
		['35'],
		['50'],
		['100']
   		]
}),
  mode : 'local',
  value: '20',

  listWidth     : 40,
  triggerAction : 'all',
  displayField  : 'id',
  valueField    : 'id',
  editable      : false,
  forceSelection: true
});

	
var filters = new Ext.ux.grid.GridFilters({
	encode: false,
	local: localFilter,
	filters: [
		{type: 'string', dataIndex: 'numePlansa'}, 
		{type: 'int', dataIndex: "indicativ"}, 
		{type: 'int', dataIndex: "idi"},
		{type: 'int', dataIndex: "anTiparire"}							
	]
});

// start model coloane ------------------------------------------------------------------------------------------------------------
var createColModel = function (finish, start) {
	var columns = [
		sm, 
		{dataIndex: 'idi', header: 'Id', width: 100},
		{dataIndex: 'indicativ', id: 'indicativ', header: 'Map sheet number'}, 
		{dataIndex: 'numePlansa', header: 'Map name', width: 100, id: 'numePlansa', width: 300},
		{dataIndex: 'anTiparire', header: 'Printing year', width: 100},		
		//{dataIndex: 'action', header: 'Preview', width: 50, renderer: editLink},
		{dataIndex: 'dowId', header: 'Download', width: 100, renderer: downloadLink}		
	];
	return new Ext.grid.ColumnModel({
		columns: columns.slice(start || 0, finish),
		defaults: {sortable: true}
	});
};	
// end model coloane ------------------------------------------------------------------------------------------------------------

// bara subsol
var	bbar = new Ext.PagingToolbar({
		pageSize: 20,
		store: store,
		displayInfo: true,
		plugins: [filters],
		items:[
			'-',
			'Per Page: ',
			combo, 
			{
				pressed: false,
                enableToggle:true,
				tooltip: 'Toggle between local and server sorting',
                text: 'Local sorting: ' + (store.remoteSort ? 'Off' : 'On'),
                toggleHandler: function(btn, pressed){
					var toggle = (store.remoteSort === true) ? false : true;
					store.remoteSort = toggle;
					var text = 'Local sorting: ' + (store.remoteSort === true ? 'Off' : 'On');
					btn.setText(text);
                }
            },
			{
				pressed: false,
            	enableToggle:true,
            	text: 'Local filter: ' + (localFilter ? 'On' : 'Off'),
				tooltip: 'Toggle between local and server filtering',
				toggleHandler: function(btn1, pressed1){
					var toggle = (grid.filters.local === true) ? false : true;
					grid.filters.local = toggle;
					var text = 'Local filter: ' + (grid.filters.local === true ? 'On' : 'Off');
					btn1.setText(text);
            	}
			},
			{
				text: 'Cancel filters',
				tooltip: 'Cancel all filters',
				handler: function () {
					grid.filters.clearFilters();
				} 
			},
			{
				text: 'Cancel map filter',
				handler: function () {
					store.setBaseParam('mapFilters','');				
					store.load();
				} 
			},
			{
				text: "Map filter",
				cls: "execute",
				handler: function() {
					if(!win){
						win = new Ext.Window({
							title: "Map filter",
							height: 420, width: 620,
							layout: "fit",
							closeAction: "hide",
							items: [{
								xtype: "gx_mappanel",
								map: map,
								bbar: new Ext.Toolbar({
									items:[
										'-', 
										{
											text: 'Apply filter',
											handler: function () {
												var mapFilters = new Array();
												for ( var i=0, len=select.features.length; i<len; ++i ){
													mapFilters[i] = select.features[i].attributes.indicativ;
												}
												store.setBaseParam('mapFilters', Ext.util.JSON.encode(mapFilters));
												store.load();
											}
										}
									]
								})
							}]
						});
					}
					win.show(this);
				}
			}
		]
    })

// start grid ------------------------------------------------------------------------------------------------------------
grid = new xg.GridPanel({
	store: store,
	loadMask: true,
	colModel: createColModel(25),
	plugins: [filters],
	stripeRows: true,
	region: 'center',	
	sm: sm,	 
	title: 'Map sheets',
	frame: true,
	iconCls:'icon-grid',
	buttonAlign:'center',
	viewConfig: {forceFit:true, enableRowBody:true},
	bbar: bbar

});

new Ext.Viewport({
  layout: 'fit',
	items: {
		layout: "border",
		deferredRender: false,
		items: [grid,{
              region: 'north',
              contentEl: 'header',
              margins: '0 0 5 0'
          }] 
	}
});


combo.on('select', function(combo, record) {
  bbar.pageSize = parseInt(record.get('id'), 10);
  bbar.doLoad(bbar.cursor);
}, this);

store.load({params:{start: 0, limit:20, mapFilters:"", mapReservations:""}});

});