/*
Methods
------

    You can use some methods to programmatically interact with tabs. Methods except 'isOpen' are chainable.

        $('#my-tab').tabSlideOut('isOpen'); // return true or false
        $('#my-tab').tabSlideOut('open'); // opens it
        $('#my-tab').tabSlideOut('close'); // closes it
        $('#my-tab').tabSlideOut('toggle'); // toggles it
        $('#my-tab').tabSlideOut('bounce'); // bounces the tab
		
	You can also send JQuery events to initiate actions:
	
	    $('#my-tab').trigger('open'); // opens it
        $('#my-tab').trigger('close'); // closes it
        $('#my-tab').trigger('toggle'); // toggles it
        $('#my-tab').trigger('bounce'); // bounces the tab

Events
------

    Three events are defined and can be caught when tabs open and close:

        $(document).on('slideouttabopen slideouttabclose slideouttabbounce',function(event){
            var $panel = $(event.target);
            var eventType = event.type;
            // your code here
        });

	Features are demonstrated on the demo page.

Options
-------

You can leave out any options, and the following defaults are used:

	tabLocation: 'left', // left, right, top or bottom
	tabHandle: '.handle', // JQuery selector for the tab, can use any JQuery selector
	action: 'click',  // action which will open the panel, e.g. 'hover'
	hoverTimeout: 5000, // ms to keep tab open after no longer hovered - only if action = 'hover'
	offset: '200px', // panel dist from top or left (bottom or right if offsetReverse is true)
	offsetReverse: false, // if true, panel is offset from  right or bottom of window instead of left or top
	otherOffset: null, // if set, panel size is also set to maintain this dist from bottom or right of view port (top or left if offsetReverse)
	handleOffset: null, // e.g. '10px'. If null, detects panel border to align handle nicely on edge
	handleOffsetReverse: false, // if true, handle is offset from right or bottom of panel instead of left or top
	bounceDistance: '50px', // how far bounce event will move everything
	bounceTimes: 4, // how many bounces when 'bounce' is called
	bounceSpeed: 300, // time to animate bounces
	tabImage: null, // optional image to show in the tab
	tabImageHeight: null, // optional IE8 and lower only, else autodetected size
	tabImageWidth: null, // optional IE8 and lower only, else autodetected size
	onLoadSlideOut: false, // slide out after DOM load
	clickScreenToClose: true, // close tab when somewhere outside the tab is clicked
	clickScreenToCloseFilters: ['.ui-slideouttab-panel'], // if click target or parents match any of these, click won't close this tab
	onOpen: function(){}, // handler called after opening
	onClose: function(){} // handler called after closing

Add the class ui-slideouttab-handle-rounded to a handle to give it rounded outer corners.

*/


$(document).ready(function() {

    $('#right').tabSlideOut({
      tabLocation: 'right',
      offsetReverse: true, // position the panel from the bottom of the page, rather than the top
      handleOffsetReverse: true, // position the tab from the bottom of the panel, rather than the top
      onLoadSlideOut: true, // open by default
      offset: '80px', // panel dist from top or left (bottom or right if offsetReverse is true)
      //handleOffset: '40px',
      bounceTimes: 5,
      bounceDistance: '10px',
      bounceSpeed: 100,
      onOpen: function(){
        //alert('open');

       var aBoxOutHeight = $('#right').outerHeight();

       //alert('aBoxOutHeight: ' + aBoxOutHeight);

        $( '#right .handle').css({
          'width': aBoxOutHeight+'px',
        });


        $( '#right').css({
          'margin': '0px -40px 0px 0px;',
        });
      },
      onClose: function(){
        //alert('close');

        $( '#right').css({
          'margin': '0px 0px 0px 0px',
        });
      }, 	
	  /* don't close this tab if a button is clicked, or if the checkbox is set */
	  clickScreenToCloseFilters: [
			'button', // ignore button clicks
			function(event){ // custom filter
				// filters need to return true to filter out the click passed in the parameter
				return $('#keepTabOpen').is(':checked');
			}
	  ]
    

  });


setTimeout(function(){

  $('#right').trigger('close'); 

  setTimeout(function(){

    //  $( '#right').css({
    //    'display': 'inline-block',
    //  });

    $('#right').fadeIn( 200, function() {

      $('#right').tabSlideOut('bounce');

    });

  }, 1000);

  //alert('close');

}, 500);



  $(window).resize(function() {

    var aBoxOutHeight = $('#right').outerHeight();
    //alert('aBoxOutHeight: ' + aBoxOutHeight);

    $( '#right .handle').css({
      'width': aBoxOutHeight+'px',
    });

  });

});