var app;
var shops;
var mapWidth;
var centerCoord = null;
Joms.dataScript = 'apiClient.php';

window.onload = mapload;

function mapload() 
{
	// Konfigurace aplikace.
	var cfg = new Joms.AppConf();
	cfg.width = mapWidth;
	cfg.height = 400;

	app = new Joms.App('mapElement', cfg);
	app.init('czt-cesko', 0);
	
	if (centerCoord != null) {
		app.map.maxZoom(centerCoord);
	}
	
	//new Joms.Scale(app);
    new Joms.MoveControl(app);
    new Joms.ZoomControl(app);
   
    var bubbleCfg = new Joms.TextBoxConf();
	bubbleCfg.width = 280;
	bubbleCfg.height = 150;
	bubbleCfg.overflowStyle = 'hidden';
	app.textBox.cfg = bubbleCfg;

	var icon_green = new Joms.Icon('http://api.planstudio.cz/images/flag_green.png', 53, 46, Joms.IconCenter.BOTTOM_LEFT, 'png');
	var icon_orange = new Joms.Icon('http://api.planstudio.cz/images/flag_orange.png', 53, 46, Joms.IconCenter.BOTTOM_LEFT, 'png');
	var myLayer = new Joms.CustomLayer(app, 'myIcons');
	
	//var shopListEl = gid('shopList');

	for (var i = 0; i < shops.length; i++) {
		var shop = shops[i];
		var coord = new Joms.Coord();
		if (coord.fromGpsString(shop[0]))
		{
			var icon;
			if (shop[5] == 'green') {
				icon = icon_green;
			} else {
				icon = icon_orange;
			}
			marker = new Joms.Marker(app, coord, icon);
			marker.setClickAction(shopMarkerClicked, shop)
			shop.marker = marker;
			myLayer.add(marker);
			
			/*
			var aEl = cel('a');
			aEl.href="#mapa";
			aEl.onclick = zoomToShop.bind(this, i);
			aEl.onmouseover = moveToShop.bind(this, i);
			aEl.appendChild(ctn(shop[1]));
			
			shopListEl.appendChild(aEl);
			if (i != shops.length -1) {
				shopListEl.appendChild(ctn(', '));
			}*/
		}
	}
	
	
};

function moveToShop(index) {
	var shop = shops[index];
	var coord = new Joms.Coord();
	if (coord.fromGpsString(shop[0]))
	{
		app.map.move(coord);
	}
}

function zoomToShop(index) {
	var shop = shops[index];
	var coord = new Joms.Coord();
	if (coord.fromGpsString(shop[0]))
	{
		app.map.maxZoom(coord);
		//var text = getShopBubbleText(shop);
		//shop.marker.openTextBox(text);
	}
};

function getShopBubbleText(shop) {
	var text = '<b>'+shop[1]+'</b> <br/><br/>';
	text += shop[2] + '<br/>';
	text += shop[3] + '<br/>';
	text += shop[4] + '<br/>';
	text += '<br/> GPS: <i>' + shop[0] + '</i><br/>';
	
	return text;
};

function shopMarkerClicked(shop) {
	var text = getShopBubbleText(shop);
	this.openTextBox(text);
};