/**
 * Description: general javascript actions and functions for the Jquery ui Slider
 * User: António Ramos
 * Date: 26/July/2011
 **/

$( function() {

  $( ".scroll-pane" ).each( function() {
    var $obj_parentsScrool = $( this ).parents( ".paragraphModule" ),
        $obj_scrollPane = $( this ),
        $obj_scrollContent = $obj_parentsScrool.find( ".scroll-content" ),
        int_scrollContentRealWidth = 0;

    $obj_scrollContent.find( "li" ).each( function() {
      int_scrollContentRealWidth += $( this ).outerWidth( true );
    } )

    $obj_scrollContent.css( "width" , int_scrollContentRealWidth + "px" )

    //build slider
    var $obj_scrollbar = $obj_parentsScrool.find( ".scroll-bar" ).slider( {
      slide: function(event , ui) {
        if ( $obj_scrollContent.width() > $obj_scrollPane.width() ) {
          $obj_scrollContent.css( "margin-left" , Math.round(
              ui.value / 100 * ( $obj_scrollPane.width() - $obj_scrollContent.width() )
          ) + "px" );
        }
        else {
          $obj_scrollContent.css( "margin-left" , 0 );
        }
      }
    } );

    //append icon to handle
    var $obj_handleHelper = $obj_scrollbar.find( ".ui-slider-handle" )
        .mousedown( function() {
          $obj_scrollbar.width( $obj_handleHelper.width() );
        } )
        .mouseup( function() {
          $obj_scrollbar.width( "100%" );
        } )
      //      .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
        .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();

    //change overflow to hidden now that slider handles the scrolling
    $obj_scrollPane.css( "overflow" , "hidden" );

    //size scrollbar and handle proportionally to scroll distance
    function sizeScrollbar() {
      var int_remainder = $obj_scrollContent.width() - $obj_scrollPane.width(),
          int_proportion = int_remainder / $obj_scrollContent.width(),
          int_handleSize = $obj_scrollPane.width() - ( int_proportion * $obj_scrollPane.width() );

      $obj_scrollbar.find( ".ui-slider-handle" ).css( {
        width: int_handleSize,
        "margin-left": -int_handleSize / 2
      } );
      $obj_handleHelper.width( "" ).width( $obj_scrollbar.width() - int_handleSize );
    }

    //reset slider value based on scroll content position
    function resetValue() {
      var int_remainder = $obj_scrollPane.width() - $obj_scrollContent.width(),
          int_leftVal = $obj_scrollContent.css( "margin-left" ) === "auto" ? 0 : parseInt( $obj_scrollContent.css( "margin-left" ) ),
          int_percentage = Math.round( int_leftVal / int_remainder * 100 );
      $obj_scrollbar.slider( "value" , int_percentage );
    }

    //if the slider is 100% and window gets larger, reveal content
    function reflowContent() {
      var int_showing = $obj_scrollContent.width() + parseInt( $obj_scrollContent.css( "margin-left" ) , 10 ),
          int_gap = $obj_scrollPane.width() - int_showing;
      if ( int_gap > 0 ) {
        $obj_scrollContent.css( "margin-left" , parseInt( $obj_scrollContent.css( "margin-left" ) , 10 ) + int_gap );
      }
    }

    //change handle position on window resize
    $( window ).resize( function() {
      resetValue();
      sizeScrollbar();
      reflowContent();
    } );

    //init scrollbar size
    setTimeout( sizeScrollbar , 10 );//safari wants a timeout

  } )

} );