// The wizzard should slide out and show the first frame.
// also all next and back buttons should slide the wizzard
// left and right.
function initWizzard(even) {
    
    // initialize closure context
    var items = $('#wizzard-frames li.frame');
    var numItems = items.length;
    var current_index = 0;
    var next_index = 1;
    var moving = false;
    
    // without wizzard frames, no need to go any further
    if (items.length == 0)
        return
    
    // function that slides the wizzard left or right.
    function slide(direction) {

        var otherDirection;
        if (direction == 'left') {
            otherDirection = 'right'
            next_index = current_index < (numItems -1) ? current_index + 1 : current_index;
        } else {
            otherDirection = 'left';
            next_index = current_index ? current_index - 1 : current_index;
        }

        if (current_index == next_index) return false;
        // console.log(current_index, next_index);
        moving = true;

        $(items[current_index]).hide('slide', { 
                direction: direction
            }, 1000);
        $(items[next_index]).show('slide', { 
            direction: otherDirection
        }, 1000, function() {
            current_index = next_index;
            moving = false;
        });
    }

    // set the css for the frames and display first frame
    items.css({position:'absolute', display:'none'})
        .filter(':first')
        .show();
    
    // display initial button
    $('div.actie-codes-button').show();
    
    // attach the slide open handler to the open wizzard button
    $('div.actie-codes-button a').click(function(event) {
        event.preventDefault();
        $('#wizzard-frames').slideDown('slow', function(event){
            $('div.actie-codes-button a').unbind('click');
        });
        $('html, body').animate({'scrollTop': 6000}, 'slow');
    })
    
    // attach the next and back buttons in the wizzard
    $('div.next').each(function(index, element){
        $(element).click(function() {
            slide('left');
        }).show();
    });
    $('div.back').each(function(index, element){
        $(element).click(function() {
            slide('right');
        }).show();
    });
}

// The barcodelist needs to have a button used to add
// extra barcode entry fields to the list
function initBarcodeList(event){
    var lastInput = $('ul#barcode-list li:last');
    var fieldIndex = $('ul#barcode-list li').length + 1;
    
    // adds a clone of the last formfield to to the formfield list.
    function onClick(event) {
      if(fieldIndex < 16)
      {
        var newInput = lastInput.clone();
        newInput.find('label').text('Actiecode ' + fieldIndex);
        newInput.find('input').attr('name', 'code[' + fieldIndex + ']');
        newInput.find('input').attr('value', '');
        fieldIndex += 1;
        lastInput.after(newInput);
        lastInput = newInput;
  
        var wizardFrames = $('#wizzard-frames');
        var barcodesFrame = $('#wizzard-frames > li:first-child');
        
        if(wizardFrames.height() < barcodesFrame.height()){
          wizardFrames.css('height', barcodesFrame.height() + 10);
        }
      }
    };

    // add the button to the formfield list and add a click listener.
    $('ul#barcode-list')
        .append($('<li><a href="#add-code" class="add-form-field"><span/>Voer nog een actiecode in</a></li>'))
        .find('li:last')
        .click(onClick);
};

// The actie overlay should be able to
// be toggled visible and invisible from
// a hyperlink with id actiecode-overlay
function initActieOverlay(event) {
    // toggles visibility of the actie overlay
    function onClick(event) {
        $('#actiecode-overlay').toggle();
        return false;
    };
    
    // add the click handler
  $('a#show-actie-codes, a#actiecode-overlay-close')
      .click(onClick);
    
};

function BindControlEvents()
{
  initWizzard();
  initBarcodeList();
  initActieOverlay();
}

//Initial bind
$(document).ready(function () {
  BindControlEvents();
});

//$(document).ready(initWizzard)
//    .ready(initBarcodeList)
//    .ready(initActieOverlay);