var ImageDir = '/images/map/';

function infoWindow( marker, html, width ) {
    this.html = html;
    this.width = ( width ) ? width + 'px' : 'auto';
    this.marker = marker;
}

infoWindow.prototype = new GOverlay();

infoWindow.prototype.initialize = function( map ) {
    this.map = map;
    var container = document.createElement( 'div' );
    container.setAttribute( 'class', 'container' );
    map.getPane( G_MAP_FLOAT_PANE ).appendChild( container );
    this.container = container;

    var shadow = document.createElement( 'div' );
    shadow.setAttribute( 'class', 'shadowContainer' );
    map.getPane( G_MAP_FLOAT_SHADOW_PANE ).appendChild( shadow );
    this.shadow = shadow;
}
infoWindow.prototype.remove = function() {
    this.container.parentNode.removeChild( this.container );
    this.shadow.parentNode.removeChild( this.shadow );
}
infoWindow.prototype.redraw = function( force ) {
    if ( !force ) return;
    var content = document.createElement( 'span' );
    content.innerHTML = this.html;
    content.setAttribute( 'class', 'mapBookSurround' );
    content.style.margin = '6px 0px 0px 0px';
    content.style.padding = '0';
    content.style.border = '0';
    content.style.width = '208px';
    content.style.height = '108px';
    content.style.display = 'block';
    content.style.position = 'absolute';
    content.style.background = '#fff';
    this.map.getContainer().appendChild( content );
    content.parentNode.removeChild( content );
    var contentWidth = 204;
    var contentHeight = 105;
    var wrapper = document.createElement( 'div' );
    wrapper.setAttribute( 'class', 'mapSurround4' );
    wrapper.appendChild( content );
    var wrapperParts = {
        tl: {},
        t: {},
        tr: {},
        l: {},
        r: {},
        bl: {},
        p: {},
        b: {},
        br: {}
    }
    for (i in wrapperParts) {
        var img = document.createElement( 'img' );
        img.src = ImageDir + i + '.png';
        img.alt = '';
		img.className = 'bubbleCorners ' + i;
        wrapper.appendChild( img );
        wrapperParts[i].img = img;
    }
    var pixelLocation = this.map.fromLatLngToDivPixel( this.marker.getPoint() );
    this.container.style.position = 'absolute';
    this.container.style.left = ( pixelLocation.x - 3 ) + 'px';
    this.container.style.top = ( pixelLocation.y - contentHeight - 25 - this.marker.getIcon().iconSize.height ) + 'px';
    this.container.style.display = 'block';
    this.container.appendChild( wrapper );
    var mapNE = this.map.fromLatLngToDivPixel( this.map.getBounds().getNorthEast() );
    var panX = 0;
    var panY = 0;
    if ( this.container.offsetTop < mapNE.y ) {
        panY = mapNE.y - this.container.offsetTop;
    }
    if ( this.container.offsetLeft + contentWidth + 10 > mapNE.x ) {
        panX = ( this.container.offsetLeft + contentWidth + 10 ) - mapNE.x;
    }
}

infoWindow.prototype.show = function(){
	this.container.style.visibility = 'visible';
	this.shadow.style.visibility = 'visible';
}

infoWindow.prototype.hide = function(){
	this.container.style.visibility = 'hidden';
	this.shadow.style.visibility = 'hidden';
}


function Map(elem) {
	this.element = elem;
	this.markers = new Array();
	this.active = -1;
}

Map.prototype.run = function() {
	
	if ($('#'+this.element).length) {
		if (typeof GMap2 == "undefined") return;
		
		this.showLoading();
				
		this.gmap = new GMap2(document.getElementById(this.element));
		this.gmap.setCenter(new GLatLng(49.894634, 15.395216), 6);
		//this.gmap.disableDoubleClickZoom();
		//this.gmap.disableDragging();
		this.gmap.addControl( new GSmallMapControl() );
		//this.gmap.addControl( new GMapTypeControl() );
		//this.gmap.setUIToDefault();
		
		this.gcoder = new GClientGeocoder();
		
		this.loadJSON();
	}
}

Map.prototype.loadJSON = function() {
	jQuery.getJSON('/map-data.php', function(data){
		
		jQuery.each(data, function(index, item) {
			map.createMarker(item);
		});
		
		map.hideLoading();
	});
}

Map.prototype.createMarker = function(item) {
	map.gcoder.getLatLng(item.city, function(pos) {
		var info_opts = {//'maxWidth': 200,
		            'noCloseOnClick': true,
		            'pixelOffset': new GSize(5, 5)};
		
		var marker = new GMarker(pos);
		marker.info = new infoWindow(marker, map.createInfo(item));
		
		//marker.bindInfoWindowHtml(map.createInfo(item), info_opts);
		
		map.gmap.addOverlay(marker);
		map.gmap.addOverlay(marker.info);
		
		marker.info.hide();
		
		
		
		map.markers.push(marker);
	});
}

Map.prototype.createInfo = function(item) {
	var html = '';
	html += '<div style="padding: 3px;"><img class="map-image" src="/img/goods/small/' + item.goods + '.jpg" style="width:60px;" alt="' + item.goods_name + '"/>';
	html += '<div class="map-text">';
	html += '<span class="map-city"><strong>' + item.city + '</strong> - někdo koupil:</span>';
	html += '<br /><a href="/' + item.goods_url + '"><span class="map-goods">' + item.goods_name + '</span></a>';
	html += '<br /><span class="map-date">' + item.date + '</span>';
	html += '</div></div>';
	
	return html;
}

Map.prototype.showLoading = function() {
	jQuery('#'+this.element+' #loadingBar').css('display', 'block');
}

Map.prototype.hideLoading = function() {
	jQuery('#'+this.element+' #loadingBar').css('display', 'none');
}

var map = {};

$(document).ready(function(){
	if ($('#map').length) {
		map = new Map('map');
		map.run();
		GEvent.addDomListener(window,'load',function(){
			map.markers[0].info.show();
		});
		window.setInterval(function(){
			jQuery.each(map.markers, function(index, item){
				//item.closeInfoWindow();
				item.info.hide();
			});
			map.active += 1;
			if (map.active >= map.markers.length) map.active = 0;
			//GEvent.trigger(map.markers[map.active], "click");
			map.markers[map.active].info.show();
			
			var pos = map.gmap.fromLatLngToDivPixel(map.markers[map.active].getLatLng());
			pos.x += 100;
			pos.y -= 100;
			map.gmap.setCenter(map.gmap.fromDivPixelToLatLng(pos));
			
		}, 5000);
	}
});