(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)