$(document).ready(function($){
                $('#color, #bgColor').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);
                });
                // the X offset
                $("#Xslider").slider({
			value:-500,
			min: -800,
			max: 800,
			step: 5,
			slide: function(event, ui) {
				$("#xOffset").val(ui.value);
			}
		});
		$("#xOffset").val($("#Xslider").slider("value"));

                // the Y offset
                $("#Yslider").slider({
			value:10,
			min: -300,
			max: 300,
			step: 5,
			slide: function(event, ui) {
				$("#yOffset").val(ui.value);
			}
		});
		$("#yOffset").val($("#Yslider").slider("value"));
                // limit the tip width
                $('#tipWidth').blur(function(){
                    var size = $(this).val();
                    if(size > 800)
                        {
                            $(this).val('800');
                        }
                     if(size < 200)
                         {
                             $(this).val('200');
                         }
                });

                // reset default settings in form
                $('#reset').click(function(){
                    $('#color').val('333333');
                    $('#bgColor').val('7AA3CC');
                    $('#tipWidth').val('500');
                    $('#xOffset').val('-500');
                    $('#yOffset').val('10');
                });

                // make links mov
                $('#footSites h4').hover(function(){
                    $(this).stop().animate({
                        marginLeft: '.5em',
                        opacity: .7
                    },700);
                }, function(){
                    $(this).stop().animate({
                        marginLeft: 0,
                        opacity: 1
                    });
                });

                $('#docs').overlay();

            });