$(document).ready(function(){

	$(".slider-button").click(function(e){e.preventDefault();});	
	var wrapper = $("#slider-wrapper"),
	 	s=$("#slider");
		sc=$("#slider-container"),
	 	scl=$("#slider-collapse"),
	 
		se=$("#slider-expand"),
		bg=$("#slider-bg"),
		height = wrapper.height(),
		collapsed=true;
 

	sWidth = sc.width();

	
	
	function initPos(){
		bg.css("margin-top",height/2);
		sc.css({left:"100%"});
		se.stop(true).show().animate({"margin-left":-se.width()});
		s.width(0);
		s.css({"margin-left":"100%"});
		$(bg).add(sc).hide();
		collapsed=true;
	};
	function collapse()
	{		
			var height =  s.height();
		 
			sc.stop(true).animate({
							left:$(window).width()
						 
						},
						{ 	
							duration:800,
							complete:function()
							{	 	sc.hide();
								bg.stop(true).animate({
										left:$(window).width(),
										height:0,
										 "margin-top": s.height()/2 
										},
									{					 
										duration:1200,
										complete:initPos
									})
							}
						})
	}
	
	function expand()
	{
		se.stop(true).animate({"margin-left":0},se.hide);
		s.css({"margin-left":"0"});
		var width = $(window).width();
		collapsed=false;glue();
		sc.width(sWidth).show();
		bg.css({left:width}).stop(true).show().animate({"margin-top":0 ,left:0,width:width,height:height},{duration:500,complete:function(){
				sc.show().stop(true).css({left:width})
				.animate({left:0},{duration:300,complete:function(){} });
		}})
	}
	initPos();
	scl.click(collapse);
	se.click(expand);
 
  $(window).bind("resize scroll",glue).resize();
 

	function glue(){
		if(!collapsed)
			bg.add(s).width("100%");
		
	};
	 
	 
 
  setTimeout(function(){
	se.css({ "margin-left": se.width() })
	 
	},200);
 
 
});