var btns = $H();
var btns_count = 0;
var btns_wide = 1;
var btns_border_width = 0;
var btns_border_color = '';
var btns_order = '';
var btns_hrefs = $H();
var btns_titles = $H();
var btns_srcs = $H();
var _loaded = false;

var wait_text = 'Please wait... Loading...';
var error_btns_count = 'Pick out some buttons before going to this step!';
var tag_link = '<a href="http://www.artypapers.com/buttons/" style="display:block;"><img src="http://www.artypapers.com/buttons/sets/tag.gif" alt="Artypapers Buttons" style="border-width:0;" /></a>';
var tag_link_v = '<a href="http://www.artypapers.com/buttons/"><img src="http://www.artypapers.com/buttons/sets/tag_vertical.gif" alt="Artypapers Buttons" style="border-width:0;" /></a>';

var btn = {
	reset:function()
	{
		btns.each(function(pair) {
			btn.del(pair.key);
		});
		
		$('resettext').innerHTML = '';
		step.get('step1');
	},
	showResetLink:function()
	{
		$('resettext').innerHTML = '<em><a href="#" onClick="btn.reset();return false;">Clear Selected</a></em>';
	},
	add:function(id)
	{
		if (btns[$(id).id]) { 
			btn.del($(id).id); 
		} else {
			var href = $(id).href;
			var img  = $(id).innerHTML;
			var src  = $($(id).id + '_img').src;
			var alt  = $($(id).id + '_img').alt;
			
			btns_count++;
			btns[$(id).id] = img;
			btns_hrefs[$(id).id] = href;
			btns_titles[$(id).id] = alt;
			btns_srcs[$(id).id] = src;
			
			btn.highlightSelected();
			
			step.updateFooter('step1_hasbtns');
		}
	},
	del:function(i)
	{
		btns_count--;
		$(i + '_add').className = 'add';	
		
		btns.remove(i);		
		btns_hrefs.remove(i);
		btns_titles.remove(i);		
	
		btn.buildDetails('details');
		
		if (btns_count <= 0) {
			step.get('step1');
			step.updateFooter('step1');
		}			
	},
	highlightSelected:function()
	{
		btns_count = 0;
		
		btns.each(function(pair) {
			btns_count++;
			$(pair.key + '_add').className = 'add_active';
		});
	},
	buildList:function(id)
	{
		$(id).innerHTML = '';
		btns_count = 0;
		
		btns.each(function(pair) {
			btns_count++;
			$(id).innerHTML += '<li id="li' + pair.key + '">' + pair.value + ' <a href="#" title="Remove from List" onClick="btn.del(\'' + pair.key + '\'); return false;" class="remove">Remove</a></li>';
		});	
	},
	buildCustomizer:function(id)
	{
		btns_count = 0;
		$('butts').innerHTML = '';
		
		btns.each(function(pair) {
			btns_count++;
			pair.key = pair.key.replace(/b/g, '');
			$('butts').innerHTML += '<li id="cb' + pair.key + '"></li>';
			updater('cb'+pair.key, 'load.php', 'type=customize&id='+pair.key);
		});	

		css.setHeight('customizer', btns_count * 90);
	},
	buildDetails:function(id)
	{
		
		btns_count = 0;
		$(id).innerHTML = '';
		
		btns.each(function(pair) {//pair.key
			btns_count++;
			pair.key = pair.key.replace(/b/g, '');
			updater(id, 'load.php', 'type=details&id='+pair.key+'&name='+btns_titles['b'+pair.key]+'&url='+btns_hrefs['b'+pair.key]);
		});			
	
	},
	buildMarkup:function()
	{
		var w = btns_wide * 90;
		if (btns_count > 1 && btns_count == btns_wide) { w += 25; }
		
		var border = '';
		
		if (btns_border_width > 0) {
			border = 'border:'+btns_border_width+'px solid #'+$('bordercolor').value+';';
		}

		var markup = '<div id=\"sweet_buttons\" style=\"width:'+w+'px;'+border+'\">'+"\n";
		
		btns.each(function(pair) {
			markup += "\t" + '<a href="' + btns_hrefs[pair.key] + '"><img src="' + btns_srcs[pair.key] + '" alt="' + btns_titles[pair.key] + '" style="border-width:0" /></a>' + "\n";
		});
		
		if (btns_count > 1 && btns_count == btns_wide) {
			markup += "\t" + tag_link_v + "\n";
		} else {
			markup += "\t" + tag_link + "\n";
		}
		
		markup += '</div>';
		
		$('preview').innerHTML = markup;
		
		if (!is_fb) {
			$('code').value = markup;
		}
		
	},
	saveToProfile:function()
	{
		$('saveheading').hide();
	
		var data = $H();
		
		data['btns'] = btns.toQueryString();
		data['hrefs'] = btns_hrefs.toQueryString();
		data['titles'] = btns_titles.toQueryString();
		data['srcs'] = btns_srcs.toQueryString();
	
		updater('save', 'load.php', 'type=save'  + '&' + data.toQueryString()+'&wide='+btns_wide+'&border_width='+btns_border_width+'&border_color='+btns_border_color);
	},
	updateCounter:function()
	{
		var s = 's';
		if (btns_count == 1) { s = ''; }
		$('itemcount').innerHTML = '<strong>' + btns_count + '</strong> Button' + s;	
	},
	updateTitle:function(id, title)
	{
		btns_titles[id] = title;
	},
	updateHref:function(id, url)
	{
		btns_hrefs[id] = url;
	}
}

var step = {
	step1:function()
	{
		btn.highlightSelected();
		step.updateFooter('step1_hasbtns');
		if (btns_count <= 0) {
			step.updateFooter('step1');
		}
	},
	step2:function()
	{
		if (btns_count > 0) {
			btn.buildDetails('details');
			step.updateFooter('step2');
		} else {
			step.get('step1');	
			alert(error_btns_count);
		}	
	},
	step3:function()
	{
		if (btns_count > 0) {
			$('step2_3').hide();
			
			btn.buildCustomizer('customizer');
			
			fx.slider('handle1', 'track1', 'width', 1, btns_count, btns_wide);	
			fx.sliderAction(btns_wide, 'width');
			
			fx.slider('handle2', 'track2', 'border', 0, 10, btns_border_width);
			fx.sliderAction(btns_border_width, 'border');
			
			fx.sorter('butts');	
			step.updateFooter('step3');

		} else {
			step.get('step1');	
			alert(error_btns_count);
		}	
	},
	step4:function()
	{
		if (btns_count > 0) {
			btn.buildMarkup();
			step.updateFooter('step4');
		} else {
			step.get('step1');	
			alert(error_btns_count);
		}			
		
	},	
	get:function(id)
	{
		step.resetSteps();
		step.highlight(id);	
		if ($('saveheading')) $('saveheading').show();
		if ($('save')) $('save').innerHTML = '';
		
		eval('step.' + id + '();');	
	},
	resetSteps:function()
	{
		step.lowlight('step1');
		step.lowlight('step2');
		step.lowlight('step3');	
		step.lowlight('step4');	
	},
	lowlight:function(id)
	{
		$(id).className = $(id).className.replace(/_on/g, '');
		$(id + '_main').hide();	
	},
	highlight:function(id)
	{
		$(id).className += '_on';
		$(id + '_main').show();	
	},
	updateFooter:function(step)
	{
		var title = '';
		var text = '';
	
		if (step == 'step1') {
			title = 'Click on Buttons Above';
			text = 'Pick one or more buttons to go to the next step.';
		}
		
		if (step == 'step1_hasbtns') {
			title = 'Edit Your Buttons';
			text = 'Certain buttons have customizable names and url\'s: <a href="#" onClick="step.get(\'step2\');return false;">Next Step &raquo;</a>';
		}	
		
		if (step == 'step2') {
			title = 'Done Editing These Buttons?';
			text = 'Rearrange your buttons however you see fit with sweet drap on drop action: <a href="#" onClick="step.get(\'step3\');return false;">Next Step &raquo;</a>';
		}	
		
		if (step == 'step3') {
			title = 'Finished Customizing Your Buttons?';
			text = 'See a preview of your buttons and get the HTML markup: <a href="#" onClick="step.get(\'step4\');return false;">Next Step &raquo;</a>';
		}				
	
		if (step == 'step4') {
			title = 'Not Satisfied?';
			text = 'Start from the begining until you\'re happy: <a href="#" onClick="step.get(\'step1\');return false;">Start Over</a>';
		}		
	
		$('steps_footer_title').innerHTML = title;
		$('steps_footer_text').innerHTML = '<strong>Next Step:</strong> ' + text;
	}
}

var css = {
	setHeight:function(id, h)
	{
		$(id).style.height = h + 'px';
	},
	setWidth:function(id, w)
	{
		$(id).style.width = w + 'px';
	},
	setBorder:function(id, border)
	{
		$(id).style.border = border;
	},
	setBorderColor:function(id, color)
	{
		$(id).style.borderColor = '#'+color;	
	}
}

var fx = {
	slider:function(handle, track, action, min, max, def)
	{
		var values = '';
		for (var i = min; i<= max;i++) {
			if (values != '') { values += ',' }	
			values += i;
		}
		
		values = '['+ values +']';
		
		new Control.Slider(handle, track, {
				sliderValue:def,
				range: $R(min, max),
				values: eval(values),
				onSlide: function(v) { fx.sliderAction(v, action); }
			});		
	},
	sliderAction:function(v, action)
	{
		if (action == 'width') { btns_wide = v; css.setWidth('butts', v * 86); }
		if (action == 'border') { 
			btns_border_width = v;
			css.setBorder('butts', v + 'px solid #'+$('bordercolor').value);
			if (v > 0) { 			
				$('step2_3').show();
			} else {
				$('step2_3').hide();
			}
		}
	},
	sorter:function(id)
	{
		Sortable.create(
			id,
			{
				overlap:'horizontal',
				ghosting:false,
				constraint:false,	
				onChange:function(element){ 
					var tmp_btns = $H();
					
					btns.each(function(pair) {
						tmp_btns[pair.key] = pair.value;
					});
					
					btns = $H();
					
					$A($(element.parentNode.id).childNodes).each( function(item) {
						item.id = item.id.replace(/cb/g, 'b');
						btns[item.id] = tmp_btns[item.id];
					});

				}
			});		
	}
}

function init () {
	step.get('step1');
	
	if (_loaded == true) {
		btn.showResetLink();
	}
}

function updater (obj, query, pars) {
	
	pars += is_fb ? '&fb=true' : '';
	
	var myAjax = new Ajax.Updater(
				{success: obj }, 
				query, 
				{
					method: 'get', 
					parameters: pars, 
					onFailure: function(resp) { alert('Error: ' + resp); },
					insertion: Insertion.Bottom
				});	
	
}