var gAllServices = 'email,facebook,twitter,myspace,digg,sms,windows_live,delicious,stumbleupon,reddit,google_bmarks,linkedin,bebo,ybuzz,blogger,yahoo_bmarks,mixx,technorati,friendfeed,propeller,wordpress,newsvine,xanga,blinklist,twine,twackle,diigo,fark,faves,mister_wong,current,livejournal,kirtsy,slashdot,oknotizie,care2,aim,meneame,simpy,blogmarks,n4g,bus_exchange,funp,sphinn,fresqui,dealsplus,typepad,yigg'.split(",");

var gAllServicesInfo = {
	aim: {
		title: 'AIM'
	},
	sms: {
        title: 'Text'
    },
	email: {
        title: 'Email'
    },
    sharebox: {
        title: 'Save'
    },
	bebo: {
		title: 'Bebo'
	},
	blinklist: {
		title: 'Blinklist'
	},
	blogmarks: {
		title: 'Blogmarks'
	},
	blogger:  {
		title: 'Blogger'
	},
	bus_exchange: {
		title: 'Add to BX'
	},
	care2: {
		title: 'Care2'
	},
	current: {
		title: 'Current'
	},
	dealsplus: {
		title: 'Dealspl.us'
	},
	delicious: {
		title: 'Delicious'
	},
	digg: {
		title: 'Digg'
	},
	diigo: {
		title: 'Diigo'
	},
	facebook: {
		title: 'Facebook'
	},
	fark: {
		title: 'Fark'
	},
	faves: {
		title: 'Faves'
	},
	fresqui: {
		title: 'Fresqui'
	},
	friendfeed: {
		title: 'FriendFeed'
	},
	funp: {
		title: 'Funp'
	},
	google_bmarks: {
		title: 'G Bookmarks'
	},
	hi5: {
		title: 'Hi5'
	},
	kirtsy: {
		title: 'Kirtsy'
	},
	linkedin: {
		title: 'LinkedIn'
	},
	livejournal: {
		title: 'LiveJournal'
	},
	meneame: {
		title: 'Meneame'
	},
	mister_wong: {
		title: 'Mr Wong'
	},
	mixx: {
		title: 'Mixx'
	},
	myspace: {
		title: 'MySpace'
	},
	n4g: {
		title: 'N4G'
	},
	newsvine: {
		title: 'Newsvine'
	},
	oknotizie: {
		title: 'Oknotizie'
	},
	propeller: {
		title: 'Propeller'
	},
	reddit: {
		title: 'Reddit'
	},
	slashdot: {
		title: 'Slashdot'
	},
	simpy: {
		title: 'Simpy'
	},
	sphinn: {
		title: 'Sphinn'
	},
	stumbleupon: {
		title: 'Stumbleupon'
	},
	technorati: {
		title: 'Technorati'
	},
	twackle: {
		title: 'Twackle'
	},
	twine: {
		title: 'Twine'
	},
	twitter: {
		title: 'Twitter'
	},
	typepad:  {
		title: 'TypePad'
	},
	windows_live: {
		title: 'Live'
	},
	wordpress:  {
		title: 'WordPress'
	},
	xanga: {
		title: 'Xanga'
	},
	yahoo_bmarks: {
		title: 'Y! Bookmarks'
	},
	ybuzz: {
		title: 'Buzz Up!'
	},
	yigg: {
		title: 'Yigg'
	}
}

var gParams = {		
	publisher: '',
	type: 'website',
	onmouseover: false,
	buttonText: 'ShareThis',
	popup: false,
	offsetTop: 0,
	offsetLeft: 0,
	embeds: false,
	autoclose: false,
	style: 'default',
	post_services: gAllServices.slice(0, 22),
	headerfg: '#FFFFFF',
	headerbg: '#004A64',
	linkfg: '#222222',
	charset: 'utf-8',
	headerTitle: ''
}

var chicklet = new Ext.Template([
		'<a href="javascript:void(0);" class="{short}">{long}</a>'
]);
chicklet.compile();

function insertDefault() {
	var container = 'widget_swcontainer';
	Ext.DomHelper.overwrite(Ext.get('options_swcontainer'), []);
	Ext.DomHelper.overwrite(Ext.get('widget_swcontainer'), []);
	Ext.each(gAllServices, function(item, index, all) {
		chicklet.append(container, {
			short: item,
			long: gAllServicesInfo[item].title
		});
		if (index == 22) {
			container = 'options_swcontainer';
		}
	});
	Ext.each(Ext.DomQuery.select('#options_swcontainer a, #widget_swcontainer a'), function(item, index, all) {
		Ext.get(item).on('click', function() {
			this.radioClass('selected');
		});
	});
}

function fillWidget() {
	var services = new Array();
	Ext.DomHelper.overwrite(Ext.get('swcontainer'), []);
	Ext.each(Ext.DomQuery.select('#widget_swcontainer a'), function(item, index, all) {
		service = item.className.replace(/\s+(selected)?/, '');
		services[index] = service;
		if (index < 12) {
			chicklet.append('swcontainer', {
				short: service,
				long: gAllServicesInfo[service].title
			});
		}
	});
	gParams.post_services = services.join(',');
	
	Ext.each(Ext.DomQuery.select('#widget .carousel .view a, #top_services a'), function(item, index, all) {
		Ext.get(item).setStyle('color', gParams.linkfg);
	});
}

function hideButtons() {
	Ext.get('buttonStandard').setStyle('display', 'none');
	Ext.get('buttonRotating').setStyle('display', 'none');
	Ext.get('buttonVertical').setStyle('display', 'none');
	Ext.get('buttonHorizontal').setStyle('display', 'none');
	Ext.get('buttonShareThisBar').setStyle('display', 'none');
	Ext.get('buttonShareThisBarNoEmail').setStyle('display', 'none');
}

function init() {
	// Instantiate Elements
	var radioVertical = new Ext.form.Radio({
		id: 'icon_vertical',
		name: 'icon',
		renderTo: 'cntRadioIconVertical',
		value: 'vertical',
		checked: false,
		boxLabel: '&nbsp;',
		handler: function(checkbox, checked) {
			if (checked) {
				gParams.style = 'vertical';
				hideButtons();
				Ext.get('buttonVertical').setStyle('display', 'block');
			}
		}
	});
		
	var radioHorizontal = new Ext.form.Radio({
		id: 'icon_horizontal',
		name: 'icon',
		renderTo: 'cntRadioIconHorizontal',
		value: 'horizontal',
		checked: false,
		boxLabel: '&nbsp;',
		handler: function(checkbox, checked) {
			if (checked) {
				gParams.style = 'horizontal';
				hideButtons();
				Ext.get('buttonHorizontal').setStyle('display', 'block');
			}
		}
	});
		
	var radioShareThisBar = new Ext.form.Radio({
		id: 'icon_stbar',
		name: 'icon',
		renderTo: 'cntRadioShareThisBar',
		value: 'stbar',
		checked: false,
		boxLabel: '&nbsp;',
		handler: function(checkbox, checked) {
			if (checked) {
				gParams.style = 'stbar';
				hideButtons();
				Ext.get('buttonShareThisBar').setStyle('display', 'block');
			}
		}
	});
	
	var radioShareThisBarNoEmail = new Ext.form.Radio({
		id: 'icon_stbar_noemail',
		name: 'icon',
		renderTo: 'cntRadioShareThisBarNoEmail',
		value: 'stbar_noemail',
		checked: false,
		boxLabel: '&nbsp;',
		handler: function(checkbox, checked) {
			if (checked) {
				gParams.style = 'stbar_noemail';
				hideButtons();
				Ext.get('buttonShareThisBarNoEmail').setStyle('display', 'block');
			}
		}
	});
	
	var radioStandardIcon = new Ext.form.Radio({
		id: 'icon_standard',
		name: 'icon',
		renderTo: 'cntRadioIconStandard',
		value: 'default',
		checked: true,
		boxLabel: 'Standard Icon',
		handler: function(checkbox, checked) {
			if (checked) {
				gParams.style = 'default';
				hideButtons();
				Ext.get('buttonStandard').setStyle('display', 'block');
			}
		}
	});
	
	var radioRotatingIcon = new Ext.form.Radio({
		id: 'icon_rotating',
		name: 'icon',
		renderTo: 'cntRadioIconRotating',
		value: 'rotate',
		checked: false,
		boxLabel: 'Rotating Icon',
		handler: function(checkbox, checked) {
			if (checked) {
				gParams.style = 'rotate';
				hideButtons();
				Ext.get('buttonRotating').setStyle('display', 'block');
			}
		}
	});
	
	var inputCustomText = new Ext.form.TextField({
		id: 'custom_text',
		renderTo: 'cntInputCustomText',
		value: 'ShareThis',
		selectOnFocus: true
	});
	
	var checkOptionsEmbed = new Ext.form.Checkbox({
		id: 'options_embed',
		renderTo: 'cntCheckOptionsEmbed',
		value: 'embed',
		boxLabel: 'Enable Embeds',
		handler: function(checkbox, checked) {
			gParams.embeds = checked;
		}
	});

	var checkOptionsPopup = new Ext.form.Checkbox({
		id: 'options_popup',
		renderTo: 'cntCheckOptionsPopup',
		value: 'embed',
		boxLabel: 'Pop-Up',
		handler: function(checkbox, checked) {
			gParams.popup = checked;
		}
	});
	
	var radioHeaderNone = new Ext.form.Radio({
		id: 'header_none',
		name: 'header',
		renderTo: 'cntRadioHeaderNone',
		value: 'none',
		checked: true,
		boxLabel: "Don't use a header",
		handler: function(checkbox, checked) {
			if (checked) {
				gParams.headerTitle = '';
				Ext.get('header_title').addClass('hidden');
				Ext.get('cntHeaderText').addClass('hidden');
			}
		}
	});

	var radioHeaderText = new Ext.form.Radio({
		id: 'header_text',
		name: 'header',
		renderTo: 'cntRadioHeaderText',
		value: 'text',
		checked: false,
		boxLabel: "Text header",
		handler: function(checkbox, checked) {
			if (checked) {
				gParams.headerTitle = Ext.get('title_header').getValue();
				Ext.get('header_title').removeClass('hidden');
				Ext.get('cntHeaderText').removeClass('hidden');
				Ext.get('title_header').focus();
			}
		}
	});
	
	var inputHeaderTitle = new Ext.form.TextField({
		id: 'title_header',
		renderTo: 'cntInputHeaderTitle',
		value: "I'm the header",
		selectOnFocus: true,
		maxLength: 40
	});
	
	var inputHeaderBG = new Ext.ux.form.ColorField({
		id: 'title_header_bg',
		renderTo: 'cntInputHeaderBG',
		value: "#004A64",
		selectOnFocus: true,
		updateSelector: '#widget_header',
		updateStyle: 'background-color',
		updateValue: 'gParams.headerbg'
	});
	
	var inputHeaderFG = new Ext.ux.form.ColorField({
		id: 'title_header_fg',
		renderTo: 'cntInputHeaderFG',
		value: "#FFFFFF",
		selectOnFocus: true,
		updateSelector: '#header_title',
		updateStyle: 'color',
		updateValue: 'gParams.headerfg'
	});
	
	var inputLinkFG = new Ext.ux.form.ColorField({
		id: 'link_fg',
		renderTo: 'cntInputLinkFG',
		value: "#222222",
		selectOnFocus: true,
		updateSelector: '#widget .carousel .view a, #top_services a',
		updateStyle: 'color',
		updateValue: 'gParams.linkfg'
	});
	
	var buttonControlDefault = new Ext.Button({
		renderTo: 'cntControlDefault',
		text: 'Insert Default',
		handler: function(button, event) {
			insertDefault();
			fillWidget();
		}
	});
	
	var buttonControlRight = new Ext.Button({
		renderTo: 'cntControlRight',
		width: 25,
		height: 25,
		icon: '/images/configurator/arrow_right.png',
		style: {
			margin: '162px 0 0 16px'
		},
		handler: function(button, event) {
			var item = Ext.DomQuery.selectNode('#options_swcontainer a.selected');
			if (item != undefined) {
				if (Ext.get(item).next() != undefined) {
					Ext.get(item).next().radioClass('selected');
				} else if (Ext.get(item).prev() != undefined) {
					Ext.get(item).prev().radioClass('selected');
				}
				Ext.get('widget_swcontainer').appendChild(item);
				fillWidget();
			}
		}
	});
	
	var buttonControlLeft = new Ext.Button({
		renderTo: 'cntControlLeft',
		width: 25,
		height: 25,
		icon: '/images/configurator/arrow_left.png',
		style: {
			margin: '25px 0 0 16px'
		},
		handler: function(button, event) {
			var item = Ext.DomQuery.selectNode('#widget_swcontainer a.selected');
			if (item != undefined) {
				if (Ext.get(item).next() != undefined) {
					Ext.get(item).next().radioClass('selected');
				} else if (Ext.get(item).prev() != undefined) {
					Ext.get(item).prev().radioClass('selected');
				}
				Ext.get('options_swcontainer').appendChild(item);
				fillWidget();
			}
		}
	});
	
	var buttonControlUp = new Ext.Button({
		renderTo: 'cntControlUp',
		width: 25,
		height: 25,
		icon: '/images/configurator/arrow_up.png',
		style: {
			margin: '162px 0 0 16px'
		},
		handler: function(button, event) {
			var item = Ext.DomQuery.selectNode('#widget_swcontainer a.selected');
			if (item != undefined) {
				if (Ext.get(item).prev() != undefined) {
					Ext.get(item).insertBefore(Ext.get(item).prev());
				}
				fillWidget();
			}
		}
	});
	
	var buttonControlDown = new Ext.Button({
		renderTo: 'cntControlDown',
		width: 25,
		height: 25,
		icon: '/images/configurator/arrow_down.png',
		style: {
			margin: '25px 0 0 16px'
		},
		handler: function(button, event) {
			var item = Ext.DomQuery.selectNode('#widget_swcontainer a.selected');
			if (item != undefined) {
				if (Ext.get(item).next() != undefined) {
					Ext.get(item).insertAfter(Ext.get(item).next());
				}
				fillWidget();
			}
		}
	});
	
	var buttonGetCode = new Ext.Button({
		renderTo: 'cntButtonGetCode',
		text: 'Get ShareThis Code',
		style: 'margin: 5px 0 0 0',
		handler: function(button, event) {
			try {
				pageTracker._trackPageview('/dynamic/getbutton/' + gParams.type);
			} catch(err) {}
			Ext.util.Cookies.set('CustomWidgetOptions', Ext.util.JSON.encode(gParams));
			document.location = '/publishers/getcode';
		}
	})
	
	// Bind Events
	Ext.get('tabs_button').on('click', function() {
		Ext.get('tabs_button').addClass('active');
		Ext.get('tabs_header').removeClass('active');
		Ext.get('tabs_services').removeClass('active');
		Ext.get('tray_button').addClass('active');
		Ext.get('tray_header').removeClass('active');
		Ext.get('tray_services').removeClass('active');
	});
	
	Ext.get('tabs_header').on('click', function() {
		Ext.get('tabs_button').removeClass('active');
		Ext.get('tabs_header').addClass('active');
		Ext.get('tabs_services').removeClass('active');
		Ext.get('tray_button').removeClass('active');
		Ext.get('tray_header').addClass('active');
		Ext.get('tray_services').removeClass('active');
	});
	
	Ext.get('tabs_services').on('click', function() {
		Ext.get('tabs_button').removeClass('active');
		Ext.get('tabs_header').removeClass('active');
		Ext.get('tabs_services').addClass('active');
		Ext.get('tray_button').removeClass('active');
		Ext.get('tray_header').removeClass('active');
		Ext.get('tray_services').addClass('active');
	});
	
	Ext.get('custom_text').on('keyup', function() {
		gParams.buttonText = this.getValue();
		Ext.get('buttonStandard').update((this.getValue() == "") ? "&nbsp;" : this.getValue());
		Ext.get('buttonRotating').update((this.getValue() == "") ? "&nbsp;" : this.getValue());
	});

	Ext.get('title_header').on('keyup', function() {
		gParams.headerTitle = this.getValue();
		Ext.get('header_title').update((this.getValue() == "") ? "&nbsp;" : this.getValue());
	});
	
	Ext.get('service_web').addClassOnOver('hover');
	Ext.get('service_wordpress').addClassOnOver('hover');
	Ext.get('service_typepad').addClassOnOver('hover');
	Ext.get('service_blogger').addClassOnOver('hover');
	
	Ext.get('service_web').on('click', function() {
		Ext.get('service_web').radioClass('selected');
		gParams.type = 'website';
	});
	
	Ext.get('service_wordpress').on('click', function() {
		Ext.get('service_wordpress').radioClass('selected');
		gParams.type = 'wordpress';
	});
	
	Ext.get('service_typepad').on('click', function() {
		Ext.get('service_typepad').radioClass('selected');
		gParams.type = 'typepad';
	});
	
	Ext.get('service_blogger').on('click', function() {
		Ext.get('service_blogger').radioClass('selected');
		gParams.type = 'blogger';
	});
	
	Ext.get('service_web').radioClass('selected');
	
	insertDefault();
	fillWidget();
}