function sizeof(obj) {
	var n = 0;
	for (var i in obj) {
		++n;
	}
	return n;
}

function lastIndex(obj) {
	var index;
	for (var i in obj) {
		index = i;
	}
	return index;
}

var Sliders;
var labels = new Array();
var buttons = new Array();
var button_id = 0;
var edit_id = -1;
var sampleText = 'Sample Text';

var selected_icon_id = 0;
var selected_icon_cat_id = 0;
var scroll =  new Fx.Scroll('button-list', {});

var Status = {
	show: function() {
		$('status').removeClass('x-hidden');
	},
	
	hide: function() {
		$('status').addClass('x-hidden');
	},
	
	start: function(message) {
		$('status').innerHTML = message;
		Status.show();
	},
	
	end: function() {
		Status.hide();
		$('status').innerHTML = '';
	}
}

var Set = {
    id: 0,
    name: '',
    init: function(id, buttons, copy) {
        if (!copy)
    	   this.id = id;
        $('block-button-download').style.display = 'block';
        var content = '';
        content = '';
        var img_src;
        for (var i in buttons['items']) {
            var item = buttons['items'][i];
            img_src = Buttons.getSrc(i);
            content += getButtonRow(i, img_src);
        }
		$('button-list').innerHTML = content;
        return true;
    },
    
    save: function(event) {
        $('button_settings').value = Json.toString(buttons);
        if (!this.id && $('new_set_name').value == '') {
        	this.showSaveAs(event);
        	return;
        }
        $('block-saveas').style.display = 'none';
        
        var url = baseUrl + '/set/save/';
        if (this.id) {
        	url += 'id/' + this.id + '/';
        } else {
        	url += 'name/' + $('new_set_name').value + '/';
        }
        
        var req = new Ajax(url, {
            data: $('form_download'),
            onComplete: function(response) {
            	Status.end();
            	var r = Json.evaluate(response);
            	Set.id = r.id;
            	$('new_set_name').value = '';
                Customer.loadSets();
            }
        });
        Status.start('Saving set');
        req.request();
    },
    
    showSaveAs: function(event) {
    	var coord = getMouseCoord(event);
		$('block-saveas').style.top = coord[1];
		$('block-saveas').style.left = coord[0];
		$('block-saveas').style.display = 'block';
    },
    
    remove: function(id) {
    	if (!confirm('Delete set?'))
			return;
		if (id == Set.id) {
			Set.id = 0;
		}
		var req = new Ajax(baseUrl + '/set/delete/id/' + id, {
            onComplete: function(response) {
            	Status.end();
                Customer.loadSets();
            }
        });
        Status.start('Deleting set');
        req.request();
    }
};

var Buttons = {
	add: function(event) {
		var settings = getSettings();
		if (!settings['button_id']) {
			alert('Select Template');
			return false;
		}
		var coord = getMouseCoord(event);
		$('block-add-button').style.top = coord[1];
		$('block-add-button').style.left = coord[0];
		$('block-add-button').style.display = 'block';
	},
	addSave: function() {
		var id = parseInt(lastIndex(buttons['items'])) + 1;
		buttons['items'][id] = {
			settings: getSettings(),
			text: $('new_button_text').value,
			file_name: $('new_button_filename').value
		};
		
		$('button-list').innerHTML += getButtonRow(id, this.getSrc(id));
		$('block-add-button').style.display = 'none';
		this.scroll.toBottom();
	},
	
	getSrc: function(id) {
		var src = getSrc(buttons.items[id].settings);

		src += 'text/' + buttons.items[id]['text'] + '/';

		if (buttons['items'][id]['icon_id']) {
			src += 'icon_id/' + buttons['items'][id]['icon_id'] 
				+ '/icon_settings/' + buttons['items'][id]['icon_settings'];
		}
		return src;
	},
	
	remove: function(id) {
		if (!confirm('Delete button?'))
			return;
		delete buttons.items[id];
		$('img_' + id).getParent().getParent().getParent().getParent().remove();
	}
};


window.addEvent('domready', function() {
	Buttons.scroll = new Fx.Scroll($('button-list'), {});
	
	var r = new MooRainbow('bw_Rainbow', {
		id : 'bw_Small_Rainbow',
		imgPath: baseUrl + '/scripts/mooRainbow/images/',
		'startColor': [0, 0, 0],
		'onComplete': function(color) {
			$('font_color').value = color.hex;
		}
	});
	var r_bg = new MooRainbow('bw_Rainbow_bg', {
		id : 'bw_Small_Rainbow_bg',
		imgPath: baseUrl + '/scripts/mooRainbow/images/',
		'startColor': [0, 0, 0],
		'onComplete': function(color) {
			$('bg_color').value = color.hex;
		}
	});
	var mytabs = new mootabs('mainTabContainer', {
		width: 448,
		height: 185,
		changeTransition : function(){}
	});
	update_templates();
	
	var as = [];

	$$('a').each(function(a){
		if (a.getAttribute('title')) as.push(a);
	});
	
	new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25});
	ajaxLoaderImage = new Image();
	ajaxLoaderImage.src = baseUrl + "/images/ajax_loader.gif";
    
    /*
    * Init slides
    */
    Sliders = {
        login: new Fx.Slide('block-form-login', {duration: 500}),
        register: new Fx.Slide('block-form-register', {duration: 500}),
        sets: new Fx.Slide('block-sets', {duration: 500})
    };
    Sliders.register.slideOut();
    if (logged) {
        Sliders.login.slideOut();
        Customer.loadSets();
        $('block-button-save').removeClass('x-hidden');
    } else {
        Sliders.sets.slideOut();
    }
    
    if (loadSet) {
        Customer.initSet(loadSet, true);
    }
});

function change_font_color(color) {
	dojo.byId('font_color').value = color;
	show_hide('font_color_palette');
}

function check_fields() {
	var settings = getSettings();
	if (!settings['button_id']) {
		alert('Select Template');
		return false;
	}
	return true;
}

function load_labels_list() {
	if (!check_fields()) {
		return false;
	}
	$('button-list').innerHTML = '<img src="' + baseUrl + '/images/ajax_loader.gif" />';
	var req = new Ajax(baseUrl + '/buttons/get.labels/', {
		data : {
			soft_id : $('soft_id').value,
			language_id : $('language_id').value
		},
		onComplete : function(res) {
			Status.end();
			Set.id = 0;
			labels = Json.evaluate(res);
			show_buttons();
		}
	});
	Status.start('Loading labels list');
	req.request();
}

function getSettings() {
	var settings = new Object();
	settings['font_id'] = document.getElementById('font_id').value;
	var font_color = document.getElementById('font_color').value;
	settings['font_color'] = font_color.replace(/#+/, '');
	
	var bg_color = document.getElementById('bg_color').value;
	settings['bg_color'] = bg_color.replace(/#+/, '');
	
	settings['font_size'] = document.getElementById('font_size').value;
	
	if ($('font_style_bold').checked && $('font_style_italic').checked) {
		settings['font_style'] = '3';
	} else if ($('font_style_bold').checked) {
		settings['font_style'] = '1';
	} else if ($('font_style_italic').checked) {
		settings['font_style'] = '2';
	} else {
		settings['font_style'] = '0';
	}
	
	if ($('fix_height').value != '') {
		settings['fix'] = $('fix_height').value;
	}
	
	settings['font_case'] = $('font_case').value;
	settings['button_id'] = button_id;
	settings['padding'] = '' + document.getElementById('padding_top').value + ','
		+ document.getElementById('padding_right').value + ','
		+ document.getElementById('padding_bottom').value + ','
		+ document.getElementById('padding_left').value;
		
	return settings;
}

function getMouseCoord(e) {
	var IE = document.all ? true:false;
	var tempX, tempY;
	if (IE) { 
      tempX = event.clientX; 
      tempY = event.clientY; 
    } else { 
      tempX = e.pageX; 
      tempY = e.pageY; 
    }
	return new Array(tempX, tempY);
}

function edit_button(event, id) {
	edit_id = id;
	var coord = getMouseCoord(event);
	$('edit-block').style.top = coord[1];
	$('edit-block').style.left = coord[0];
	$('edit-block').style.display = 'block';
	$('new_text').value = buttons['items'][id]['text'];
	$('new_file_name').value = buttons['items'][id]['file_name'];
}

function getButtonRow(id, src) {
	return  '<table><tr>'
		  + '<td><a href="#" onclick="edit_button(event, ' 
               + id +'); return false;"><img src="' + baseUrl 
               + '/images/icon_edit.gif" /></a>&nbsp;'
		  + '<a href="#" onclick="reload_button(event, '
               + id +'); return false;"><img src="' + baseUrl + '/images/icon_refresh.gif" /></a>' 
		  + '<a href="#" onclick="Buttons.remove(' + id + '); return false;"><img src="' + baseUrl 
               + '/images/icon_delete.gif" /></a>' 
          + '</td><td>'
		+ '<img src="' + src + '" id="img_'+ id +'"/></td></tr></table>';
};

function show_buttons() {
	var button_list = document.getElementById('button-list');
	$('block-button-download').style.display = 'block';
	var content = '';
	var img_src;
	var settings = getSettings();
	buttons = new Object();
	buttons['items'] = new Object();
	var j = 0;
	for (var i in labels) {
		++j;
		buttons['items'][j] = {
			text: labels[i]['text'],
			settings: settings,
			file_name: labels[i]['file_name']
		};
		img_src = Buttons.getSrc(j);
		content += getButtonRow(j, img_src);
	}
	button_list.innerHTML = content;
	return true;
}

function set_icon_id(id) {
	selected_icon_id = id;
	var icon_prev = document.getElementById('icon_preview');
	icon_prev.style.display = "inline";
	icon_prev.src = baseUrl + '/images/icons/' + id + '.gif';
}

function change_icon_cat() {
	var icon_prev = document.getElementById('icon_preview');
	if (selected_icon_cat_id != '0') {
		$('icons_block_' + selected_icon_cat_id).style.display = 'none';
	}
	selected_icon_cat_id = $('icon_category').value;
	if (selected_icon_cat_id != '0') {
		$('icons_block_' + selected_icon_cat_id).style.display = 'block';
	} else {
		selected_icon_id = 0;
		icon_prev.style.display = 'none';
	}
}

function change_icon_cat2() {
	var cat_id = $('icon_category').value;
	if (cat_id=='0') {
		selected_icon_id = 0;
		$('icon_preview').style.display = 'none';
		$('icons-block').innerHTML = '';
		return 0;
	}
	var content = ''
	var n = icons[cat_id].length;
	for (var i = 0; i < n; i++) {
		id = icons[cat_id][i];
		content += '<img src="' + baseUrl + '/images/icons/' + id + '.gif" onclick="set_icon_id('+ id +')"/> ';
	}
	$('icons-block').innerHTML = content;
}

function save_reload() {
	if (!check_fields())
		return false;
	var icon_id = selected_icon_id;
	buttons['items'][edit_id]['settings'] = getSettings();
	var src = Buttons.getSrc(edit_id);
	$('img_'+edit_id).src = src;
	$('edit-block').style.display = 'none';
}

function save_reload_text_icon() {
	buttons['items'][edit_id]['text'] = $('new_text').value;
	buttons['items'][edit_id]['file_name'] = $('new_file_name').value;
	var icon_id = selected_icon_id;
	buttons['items'][edit_id]['icon_id'] = icon_id;
	buttons['items'][edit_id]['icon_settings'] = $('icon_x').value + ',' + $('icon_y').value + ',' + $('icon_m').value;
	var src = Buttons.getSrc(edit_id);
	$('img_'+edit_id).src = src;
	$('edit-block').style.display = 'none';
}

function reload_button(event, id) {
	edit_id = id;
	save_reload();
}

function getSrc(settings) {
	var src;
	src = baseUrl + '/buttons/generate/button_id/' + settings['button_id'] 
	+ '/font_id/' + settings['font_id'] 
	+ '/font_size/' + settings['font_size'] 
	+ '/font_style/' + settings['font_style'] 
	+ '/font_case/' + settings['font_case'] 
	+ '/font_color/' + settings['font_color'] 
	+ '/bg_color/' + settings['bg_color'] 
	+ '/padding/' + settings['padding'] + '/';
	if (settings['fix'] != undefined) {
		src += 'fix/' + settings['fix'] + '/';
	}
	return src;
}

function load_preview() {
	var preview = document.getElementById('preview');
	var src;
	var settings = getSettings();
	if (!check_fields()) {
		return false;
	}
	
	src = getSrc(settings);
	preview.innerHTML = '<img style="padding-top: 5px;" src="'+ src +'" /><br />';
}

function setButtonId(id) {
	button_id = id;
	load_preview();
}

function show_hide(id) {
	var el = document.getElementById(id);
	if (el.style.display && el.style.display=='none') {
		el.style.display = 'block';
	} else {
		el.style.display = 'none';
	}
}

function show_icon_prewiew(value) {
	var icon_prev = document.getElementById('icon_preview');
	if (value!='0') {
		icon_prev.style.display = "inline";
		icon_prev.src = baseUrl + '/images/icons/' + value + '.gif';
	} else {
		icon_prev.style.display = 'none';
	}
}

function download_buttons()
{
	$('button_settings').value = Json.toString(buttons);
	$('form_download').submit();
	return true;
}

function update_templates() {
	var cat_id = $('button_category').value;
	var template_list = document.getElementById('template_list');
	template_list.innerHTML = '';
	
	for (var i=0; n = templates[cat_id].length, i<n; i++) {
		template_list.innerHTML += '<img src="' + baseUrl + '/images/buttons/' 
            + templates[cat_id][i] + '/preview.gif" onclick="setButtonId(' 
            + templates[cat_id][i] + ');" />';
	}
}