(function($){

	var initLayout = function() {

		var hash = window.location.hash.replace('#', '');

		var currentTab = $('ul.navigationTabs a')

							.bind('click', showTab)

							.filter('a[rel=' + hash + ']');

		if (currentTab.size() == 0) {

			currentTab = $('ul.navigationTabs a:first');

		}

		showTab.apply(currentTab.get(0));

		$('#colorpickerHolder').ColorPicker({flat: true});

		$('#colorpickerHolder2').ColorPicker({

			flat: true,

			color: '#00ff00',

			onSubmit: function(hsb, hex, rgb) {

				$('#colorSelector2 div').css('backgroundColor', '#' + hex);

			}

		});

		$('#colorpickerHolder2>div').css('position', 'absolute');

		var widt = false;

		$('#colorSelector2').bind('click', function() {

			$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);

			widt = !widt;

		});

		$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({

			onSubmit: function(hsb, hex, rgb, el) {

				$(el).val(hex);

				$(el).ColorPickerHide();

			},

			onBeforeShow: function () {

				$(this).ColorPickerSetColor(this.value);

			}

		})

		.bind('keyup', function(){

			$(this).ColorPickerSetColor(this.value);

		});

		$('#colorSelector').ColorPicker({

			color: '#0000ff',

			onShow: function (colpkr) {

				$(colpkr).fadeIn(500);

				return false;

			},

			onHide: function (colpkr) {

				$(colpkr).fadeOut(500);

				return false;

			},

			onChange: function (hsb, hex, rgb) {

				$('#colorSelector div').css('backgroundColor', '#' + hex);

			}

		});

	};

	var showTab = function(e) {

		var tabIndex = $('ul.navigationTabs a')

							.removeClass('active')

							.index(this);

		$(this)

			.addClass('active')

			.blur();

		$('div.tab')

			.hide()

				.eq(tabIndex)

				.show();

	};

	EYE.register(initLayout, 'init');

})(jQuery)