var pulsemaps = pulsemaps || {};

pulsemaps.widgetDesigns = {

	'default': { 'sea': '99b2cf', 'land': 'f2efe8', 'meta': '333333', 'heat1': 'ff0000',
				   'heat2': 'ffff00', 'heat3': 'ffffff', 'dots': 'ffffff', 'border': 'ffffff',
                                   'borders': true, 'bg': 'plain', 'show_dots': true, 'show_meta': true , 'width': 300 }
				   ,
	'sunny': { 'sea': 'feeebd', 'land': 'd19405', 'meta': '000000', 'heat1': 'ff0000',
				   'heat2': 'ffff00', 'heat3': 'ffffff', 'dots': 'ffffff', 'border': 'ffffff',
                                   'borders': true, 'bg': 'plain', 'show_dots': true, 'show_meta': true , 'width': 300 }
				   ,
	'bubblegum': { 'sea': 'e2cee1', 'land': '843b84', 'meta': '3f007f', 'heat1': 'ff007f',
				   'heat2': 'ffaad4', 'heat3': 'ffffff', 'dots': 'ffff00', 'border': 'ffffff',
                                   'borders': true, 'bg': 'plain', 'show_dots': true, 'show_meta': true , 'width': 300 }
				   ,
	'blueberry': { 'sea': 'c6bbce', 'land': '665874', 'meta': 'ffffff', 'heat1': '0000bf',
				   'heat2': '7777ff', 'heat3': 'b5daff', 'dots': 'ffffff', 'border': 'ffffff',
                                   'borders': true, 'bg': 'plain', 'show_dots': true, 'show_meta': true , 'width': 300 }
				   ,
	'camo': { 'sea': 'efebd2', 'land': '997929', 'meta': '326004', 'heat1': '7f7f00',
				   'heat2': '046b04', 'heat3': '263f0e', 'dots': 'ffffaa', 'border': 'ffffff',
                                   'borders': true, 'bg': 'plain', 'show_dots': true, 'show_meta': true , 'width': 300 }
				   ,
	'ladybird': { 'sea': 'ffffff', 'land': 'f42424', 'meta': '000000', 'heat1': 'ff7f00',
				   'heat2': 'ffff56', 'heat3': 'ffffff', 'dots': '000000', 'border': 'ffffff',
                                   'borders': true, 'bg': 'plain', 'show_dots': true, 'show_meta': true , 'width': 300 }
				   ,
	'white': { 'sea': 'transparent', 'land': 'ffffff', 'meta': 'ffffff', 'heat1': 'ff0000',
				   'heat2': 'ffff00', 'heat3': 'ffffff', 'dots': 'ffffff', 'border': 'ffffff',
                                   'borders': false, 'bg': 'plain', 'show_dots': true, 'show_meta': true , 'width': 300 }
				   ,
	'black': { 'sea': 'transparent', 'land': '000000', 'meta': '000000', 'heat1': 'ff0000',
				   'heat2': 'ffff00', 'heat3': 'ffffff', 'dots': 'ffffff', 'border': 'ffffff',
                                   'borders': false, 'bg': 'plain', 'show_dots': true, 'show_meta': true , 'width': 300 }
				   ,
	'satellite': { 'sea': '0b0a32', 'land': '000000', 'meta': 'ffffff', 'heat1': 'ff0000',
				   'heat2': 'ffff00', 'heat3': 'ffffff', 'dots': 'ffffff', 'border': 'ffffff',
                                   'borders': true, 'bg': 'satellite', 'show_dots': true, 'show_meta': true , 'width': 300 }
				   
};

pulsemaps.updateWidgetPreview = function() {
	width = $('#widget-width').val();

	if ($.jPicker.List[0].color.active.val('all')) {
		c1 = $.jPicker.List[0].color.active.val('hex');
	} else {
		c1 = 'transparent';
	}
	c2 = $.jPicker.List[2].color.active.val('hex');
	c3 = $.jPicker.List[4].color.active.val('hex');
	c4 = $.jPicker.List[1].color.active.val('hex');
	c5 = $.jPicker.List[3].color.active.val('hex');
	c6 = $.jPicker.List[5].color.active.val('hex');
	c7 = $.jPicker.List[6].color.active.val('hex');
	c8 = $.jPicker.List[7].color.active.val('hex');

	scr = document.createElement('script');
	scr.type = 'text/javascript';
	scr.id = 'pulsemaps_123456789';
	scr.src = '/widget.js?id=123456789&target=widget-preview';

	var wparms = '&w=' + width + '&c1=' + c1 + '&c2=' + c2 + '&c3=' + c3 + '&c4='
		+ c4 + '&c5=' + c5 + '&c6=' + c6 + '&c7=' + c7 + '&c8=' + c8
	if ($('#widget-borders').is(':checked')) {
		wparms += '&border=1';
	}
	if (!$('#widget-dots').is(':checked')) {
		wparms += '&nodots=1';
	}
	if (!$('#widget-meta').is(':checked')) {
		wparms += '&nometa=1';
	}

	var scheme = $('input[name=color-scheme]:checked').val();
	var bg = pulsemaps.widgetDesigns[scheme]['bg'];
	if (bg != 'plain') {
		wparms += '&type=' + bg
	}
	scr.src += wparms;
	scr.src += '&notrack=1';


	$('#widget-preview').empty();
	$('#script-container').empty();
	$('#script-container').append(scr);

	var code = '<a style="text-decoration: none;" target="pulsemaps" href="{% absurl map map_id %}" title="Click for more details!  Visitor map widget by PulseMaps.com">';
	code += '<script id="pulsemaps_" type="text/javascript">';
	code += '(function() { var pm=document.createElement(\'script\');';
	code += 'pm.type=\'text/javascript\';';
	code += 'pm.async=true;';
	var widget_url = '/index.php?_mod=pulsemaps&_action=widget';
	code += 'pm.src=\'' + widget_url + 'id=' + wparms + '\';';
	code += 'var s=document.getElementsByTagName(\'script\')[0];';
	code += 's.parentNode.insertBefore(pm, s); })();';
	code += '</script></a>';
	code += '<noscript><a href="http://pulsemaps.com/">WordPress counter widget</a> by PulseMaps</noscript>';

	$('#widget-code').val(wparms);
}

pulsemaps.setWidgetWidth = function(w) {
	$('#widget-width').val(w);
	if ($('#widget-borders').is(':checked')) {
		w -= 10;
	}
	h = w * 0.5346;
	if ($('#widget-meta').is(':checked')) {
		h += 30;
	} else {
		h += 5;
	}
	$('#pulsemaps_div_123456789').width(w);
	$('#pulsemaps_div_123456789').height(h);
}

pulsemaps.updateWidgetWidth = function(w) {
	pulsemaps.updateWidgetPreview();
}

pulsemaps.manualWidgetWidth = function() {
	var w = $('#widget-width').val();
	$('#width-slider').slider('option', 'value', w);
	pulsemaps.setWidgetWidth(w);
}

pulsemaps.setWidgetColor = function() {
	var name = $('input[name=color-scheme]:checked').val();
	var scheme = pulsemaps.widgetDesigns[name];

	cols = ["sea", "heat1", "land", "heat2", "meta", "heat3", "dots", "border"];
	for (var i = 0; i < cols.length; i++) {
		var col = scheme[cols[i]];
		var tgt = $('#color-' + cols[i]);
		if (col == 'transparent') {
			$.jPicker.List[i].color.active.val('all', null);
		} else {
			$.jPicker.List[i].color.active.val('hex', col, this);
		}
		tgt.attr('data-color', col);
	}
	$('#widget-borders').attr('checked', scheme['borders']);
	pulsemaps.updateWidgetPreview();
}

pulsemaps.showColorSchemes = function() {
	$('#color-schemes-container').fadeIn(200);
	$('#modal').fadeTo(200, 0.5);
	return false;
}

pulsemaps.hideColorSchemes = function() {
	$('#color-schemes-container').fadeOut(200);
	$('#modal').fadeOut(200);
}

pulsemaps.widgetBuilder = function() {
    $(document).ready(function() {
		$('.color-scheme-radio:first').attr('checked', true);
		$('.color-scheme-radio').click(pulsemaps.setWidgetColor);
                var widget_width = 300;
                if ($('#color-scheme-current').length == 1)
                {
                    var scheme = pulsemaps.widgetDesigns['current'];
                   widget_width = scheme['width']; 
                   $('#widget-dots').attr('checked', scheme['show_dots']);
                   $('#widget-meta').attr('checked', scheme['show_meta']);
                }
		$('#width-slider').slider({
			value: widget_width,
			max: 500,
			min: 150,
			change: function(event, ui) { pulsemaps.updateWidgetWidth(ui.value); },
			slide: function(event, ui) { pulsemaps.setWidgetWidth(ui.value); }
		});
		$('#widget-width').change(pulsemaps.manualWidgetWidth);
		$('.widget-ctrl').change(pulsemaps.updateWidgetPreview);

		$('.color-picker').jPicker({window: {expandable: true,
											 effects: {type: 'fade',
													   speed: {show: 150,
															   hide: 150 }},
											 position: { y: '10px',
													     x: '60px'}},
									color: {alphaSupport: true},
									images: {clientPath: '/template/default/images/'}},
								   function (color, ctx) { pulsemaps.updateWidgetPreview(); });

		pulsemaps.setWidgetWidth(widget_width);
		pulsemaps.setWidgetColor();
		$('#color-scheme-button').click(pulsemaps.showColorSchemes);
		$('#modal').click(pulsemaps.hideColorSchemes);
		$('#color-scheme-close').click(pulsemaps.hideColorSchemes);
	});
}