// carousel variables:
var _speed      = 40;         // the _speed interval at which the function is called.
var _pixels     = 2;          // the amount of _pixels we move to the left
var _scroller   = "scroller"; // the ID of the container object in which the images are kept
var _scroll     = false;       // boolean to let the imageCarousel function know if it needs to keep scrolling
var total_width = 0;
var item_moved = true;

// default form values:
var field_871     = 0;
var field_873     = 0;
var field_874     = 0;
var field_875     = 0;
var field_876     = 0;
var field_856     = 0;
var field_857     = 0;
var field_834From = 0;
var field_834To   = 10000;

var field_1063    = 0;
var field_1064    = 0;
var field_1065    = 0;

var field_984     = 0; // Carnaval keuze 1
var field_985     = 0; // Carnaval keuze 2

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function cfc( action )
{
  return '/shared/components/lauradols.cfc?method=' + action;
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search873( borstomvang )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_873 = borstomvang;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search874( taille )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_874 = taille;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search875( heup )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_875 = heup;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search876( lengte )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_876 = lengte;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search834From( prijsFrom )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_834From = prijsFrom;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search834To( prijsTo )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_834To = prijsTo;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search857( kleur )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_857 = kleur;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search856( maat )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_856 = maat;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search871( stof )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_871 = stof;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search1063( kleur )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_1063 = kleur;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search1065( maat )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_1065 = maat;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search1064( stof )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_1064 = stof;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search984( keuze1 )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_984 = keuze1;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function search985( keuze2 )
{
  new Effect.Appear( 'loading_form', { duration : 0.3 });

  field_985 = keuze2;
  _scroll = false;
  trackMe();
  setTimeout( "getProducts()", 500 );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function getProducts( params )
{  
  if( params != "" && group == "")
    group = params;
    
  _scroll = false; // stop scrolling

  $( 'selection' ).style.display = "block";
  $( 'jurkencontainer' ).innerHTML = "";

  myimg                   = document.createElement( "img" );
  myimg.src               = s_WEBROOT + "/shared/images/radertjes.gif";
  myimg.style.marginTop   = "75px";
  
  mydiv                   = document.createElement( "div" );
  mydiv.style.width       = "880px";
  mydiv.style.height      = "350px";
  mydiv.style.textAlign   = "center";
  mydiv.id                = "loading";
  
  $( 'jurkencontainer' ).appendChild( mydiv );
  $( 'loading' ).appendChild( myimg );
  
  new Ajax.Updater(
    'jurkencontainer',
    cfc( 'getProducts' ),
    {
      method      : 'get',
      evalScripts : true,
      parameters  : {
                      field_871     : field_871,
                      field_873     : field_873,
                      field_874     : field_874,
                      field_875     : field_875,     
                      field_876     : field_876,
                      field_856     : field_856,
                      field_857     : field_857,
                      field_834From : field_834From,
                      field_834To   : field_834To,
                      field_1063    : field_1063,
                      field_1064    : field_1064,
                      field_1065    : field_1065,
                      field_984     : field_984,
                      field_985     : field_985,

                      nGroupID      : group,
                      bOverzicht    : overzicht,
                      sLanguage     : _sLanguage
                    }
    }
  );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function regenerateForm()
{
  // default form values:
  field_871     = 0;
  field_873     = 0;
  field_874     = 0;
  field_875     = 0;
  field_876     = 0;
  field_856     = 0;
  field_857     = 0;
  field_834From = 0;
  field_834To   = 10000;
  
  field_1063    = 0;
  field_1064    = 0;
  field_1065    = 0;

  field_984     = 0;
  field_985     = 0;

  new Effect.Appear( 'loading_form', { duration : 0.3 });
  getProducts()
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function generateForm( groupid, ids )
{
  
  if( typeof( ids ) != 'string' )
    ids = "";

  new Ajax.Updater(
    'selectionForm', 
    cfc( 'generateSearchForm' ),
    {
      evalScripts : true, 
      parameters  : {
                      nGroupID      : groupid,
                      lSelectedProducts : ids,
                      field_871     : field_871,
                      field_873     : field_873,
                      field_874     : field_874,
                      field_875     : field_875,     
                      field_876     : field_876,
                      field_856     : field_856,
                      field_857     : field_857,
                      field_834From : field_834From,
                      field_834To   : field_834To,
                      field_1063    : field_1063,
                      field_1064    : field_1064,
                      field_1065    : field_1065,
                      field_984     : field_984,
                      field_985     : field_985,
                      sLanguage     : _sLanguage
                    }
    }
  );
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
window.dhtmlHistory.create(
  {
    toJSON    : function( o ){ return Object.toJSON( o ); },
    fromJSON  : function( s ){ return s.evalJSON(); }
  }
);

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function initialize( id )
{
  // initialize RSH
  dhtmlHistory.initialize();
  
  // add ourselves as a listener for history
  // change events
  dhtmlHistory.addListener( collectionChangesHandle );
  
  // determine our current location so we can
  // initialize ourselves at startup
  var initialLocation = dhtmlHistory.getCurrentLocation();
  
  // if no location specified, use the default
  if( initialLocation == null || initialLocation == undefined || !initialLocation )
    getProducts();
}

/** A function that is called whenever the user
    presses the back or forward buttons. This
    function will be passed the newLocation,
    as well as any history data we associated
    with the location. */
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function collectionChangesHandle( newLocation, historyData )
{
  // use the history data to update our UI
  updateUI( newLocation, historyData );
}

/** A simple method that updates our user
    interface using the new location. */
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function updateUI(newLocation, historyData)
{
  // simply display the location and the
  // data
  
  if( newLocation != "")
  {
    field_871     = listGetAt(newLocation,1,'_');
    field_873     = listGetAt(newLocation,2,'_');
    field_874     = listGetAt(newLocation,3,'_');
    field_875     = listGetAt(newLocation,4,'_');    
    field_876     = listGetAt(newLocation,5,'_');
    field_856     = listGetAt(newLocation,6,'_');
    field_857     = listGetAt(newLocation,7,'_');
    field_834From = listGetAt(newLocation,8,'_');
    field_834To   = listGetAt(newLocation,9,'_');
    _scroll = false;
    getProducts();
  }

}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function trackMe()
{        
  dhtmlHistory.add('location_' + field_871 + "_" + field_873 + "_" + field_874 + "_" + field_875 + "_" + field_876 + "_" + field_856 + "_" + field_857 + "_" + field_834From + "_" + field_834To,{}) 
}
















// carousel functions
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function startCarousel()
{
  var total_width = 0;

  if( arguments.length > 0 )
    _scroller = arguments[0];

  $( _scroller ).cleanWhitespace();
  $( _scroller ).setStyle( { marginLeft : "0px" });

  // don't scroll if we don't have to
  $( _scroller ).childElements().each( function( carousel_item ){ total_width += carousel_item.getWidth(); });

  if( total_width <= $( _scroller ).up().getWidth())
  {
    _scroll = false;
    Event.stopObserving( $( _scroller ).up(), 'mouseover' );
    Event.stopObserving( $( _scroller ).up(), 'mouseout' );
    return;
  }

  Event.observe( $( _scroller ).up(), 'mouseover', function(){ _scroll = false; } );
  Event.observe( $( _scroller ).up(), 'mouseout',  function(){ _scroll = true; imagesCarousel();  } );

  // start scrollin'
  if( !_scroll )
  {
    _scroll = true;
    imagesCarousel();
  }
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function imagesCarousel()
{
  var next_margin_left,
      current_margin_left,
      first_item_width;

  if( !_scroll )
    return;

  // get the current left margin
  current_margin_left = $( _scroller ).getStyle( "marginLeft" );

  // if there is no margin (at the beginning) set it to 0
  if( current_margin_left == undefined )
    current_margin_left = "0px";

  // calculate the next margin
  next_margin_left = parseInt( current_margin_left.replace( 'px', '' )) - _pixels;
  
  // get the width of the item we need to move to the end of the line:
  first_item_width = $( _scroller ).firstDescendant().getWidth();

  // the first image is moved to the end of the line when it becomes invisible:
  if( item_moved && next_margin_left < ( 0 - ( first_item_width / 2 )))
  {
    temp_div = $($( _scroller ).firstDescendant().cloneNode( true )); // 1. Copy the first div.
    $( _scroller ).insert( { bottom : temp_div } ); // 2. Paste it at the end.
    item_moved = false;
  }

  if( next_margin_left < ( 0 - first_item_width ))
  {
    next_margin_left = 0;
    $( _scroller ).firstDescendant().remove()       // 3. Remove it from the start.
    item_moved = true;
  }

  // set the left margin to the new value
  $( _scroller ).setStyle( { marginLeft : next_margin_left + "px" });

  // call this function in *_speed* milliseconds
  setTimeout( imagesCarousel, _speed );
}