// kcd.js
$(document).ready(function() {
  $('input.submit').hover(
    function() { $(this).css('backgroundPosition', '0 -55px') },
    function() { $(this).css('backgroundPosition', '0 0') }
  );
  
  $('div.balk a.slide').click(
    function() {
      $('form#formulier').slideToggle('medium');
    }
  );
  
  if ($('div#error').text().length > 0) {
    $('form#formulier').show();
  }
  
  if ($('div.bedankt').length > 0) {
    $('div.balk a.slide').hide();
  }
  
  if ($('div.slideshow').length) {
    setInterval( "slideSwitch()", 5000 );
  }
  
  if ($('div#kiesfoto').length > 0) {
    foto_select_init();
  } else {
    populateElement('input[@name=naam]', 'Voor- en achternaam');
    populateElement('input[@name=organisatie]', 'Organisatie');
    populateElement('input[@name=email]', 'E-mailadres');
    $('input[@name=More_information]').hide();
  }
});

function stem(page, form, nr, score) {
  var nrs = $.cookie(form);
  var cookie;
  if (nrs) {
    var nrs = nrs.split(' ');
    nrs.push(nr);
    unique(nrs);
    cookie = nrs.sort().join(' ');
  } else {
    cookie = nr;
  }
  $.cookie(form, cookie, { expires: 30 });
  
  score = (score > 0 ? 1 : -1);
  location = '/' + page + '?stem=' + nr + ':' + score;
}

function unique(arr) {
	var skip = 0;
	o:for(var i = 0, n = arr.length; i < n; i++) {
		for(var x = 0; x < i; x++) {
			if(arr[x] == arr[i]) {
				skip++;
				continue o;
			}
		}
		arr[i - skip] = arr[i];
	}
	arr.length -= skip;
}
 
function populateElement(selector, defvalue) {
  if($.trim($(selector).val()) == "") {
    $(selector).val(defvalue);
  }
 
  $(selector).focus(function() {
    if($(selector).val() == defvalue) {
      $(selector).val("");
    }
  });
    
  $(selector).blur(function() {
    if($.trim($(selector).val()) == "") {
      $(selector).val(defvalue);
    }
  });
}

function slideSwitch() {
    var $active = $('.slideshow div.active');
    var $next = $active.next('div');

    if ( $active.length == 0 ) $active = $('.slideshow div:last');
    var $next =  $active.next('div').length ? $active.next('div') : $('.slideshow div:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
         .addClass('active')
         .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
          });
     //$('.slideshow h2').hide();
     //$next.next('h2').show();
}

/**** inzenden foto + beschrijving ****/
function foto_select_init() {
  var img = $('<img class="right" src="/foto/keuzebeelden/02.jpg">');
  $('#keuzebeelden').prepend(img);
  var img = $('<img class="middle" src="/foto/keuzebeelden/01.jpg">');
  $('#keuzebeelden').prepend(img);
  var img = $('<img class="left" src="/foto/keuzebeelden/66.jpg">');
  $('#keuzebeelden').prepend(img);
  
  if ($('#keuzebeelden h2.active').length == 0) {
    $('#keuzebeelden h2:eq(0)').addClass('active');
  }
  $('img.middle').attr('src', $('#keuzebeelden h2.active').attr('image'));
  $('input[name=foto]').attr('value', $('#keuzebeelden h2.active').attr('image'));

  $('#keuzebeelden img').click(foto_forward);
  
  populateElement('input[@name=titel]', 'titel');
  populateElement('textarea[@name=tekst]', 'tekst');
  $('ul.radiogroup li').click(
    function() {
      $('ul.radiogroup li').removeClass('selected');
      $(this).addClass('selected');
      $('input[name=onderwerp]').attr('value', jQuery.trim($(this).text()));
    }
  );
}

function foto_uploaded(file) {
  $('#keuzebeelden img.left').attr('src', $('#keuzebeelden h2:last').attr('image'));
  $('#keuzebeelden img.middle').attr('src', file);
  $('#keuzebeelden img.right').attr('src', $('#keuzebeelden h2:first').attr('image'));

  $('#keuzebeelden h2.active').removeClass('active');
  $('#keuzebeelden').append('<h2 class="active" image="'+file+'">'+file+'</h2>');
  $('input[name=foto]').attr('value', $('#keuzebeelden h2.active').attr('image'));
}

function foto_forward() {
  var next = $('#keuzebeelden h2.active').removeClass('active').next('h2');
  if (next.length == 0) {  next = $('#keuzebeelden h2:eq(0)') }
  next.addClass('active');
  $('input[name=foto]').attr('value', $('#keuzebeelden h2.active').attr('image'));
  next = next.next('h2');
  if (next.length == 0) {  next = $('#keuzebeelden h2:eq(0)') }
  
//  alert($('#keuzebeelden img.right').attr('src') + " wordt " + next.attr('image'));
  
  $('#keuzebeelden img.right').animate({ left:0 }, 'medium');
  $('#keuzebeelden img.middle').animate({ left:-150 }, 'medium', 
    function() {
      // neem foto over naar left en verplaats middle naar rechts
      $('#keuzebeelden img.left').attr('src', $('#keuzebeelden img.middle').attr('src'));
      $('#keuzebeelden img.middle').css({left:150});

      // verwissel class right en middle
      $('#keuzebeelden img.right').addClass('active');
      $('#keuzebeelden img.middle').addClass('right').removeClass('middle');
      $('#keuzebeelden img.active').addClass('middle').removeClass('right active');
      // laad nieuwe image in right
      $('#keuzebeelden img.right').attr('src', next.attr('image'));
    }
  );
  $('input[name=foto]').attr('value', $('#keuzebeelden h2.active').attr('image'));  
}

function foto_backward() {
  var prev = $('#keuzebeelden h2.active').removeClass('active').prev('h2');
  if (prev.length == 0) {  prev = $('#keuzebeelden h2:last') }
  prev.addClass('active');
  $('input[name=foto]').attr('value', $('#keuzebeelden h2.active').attr('image'));
  prev = prev.prev('h2');
  if (prev.length == 0) {  prev = $('#keuzebeelden h2:last') }
  
  //alert($('#keuzebeelden img.left').attr('src') + " wordt " + prev.length);
  
  $('#keuzebeelden img.left').animate({ left:0 }, 'medium');
  $('#keuzebeelden img.middle').animate({ left:150 }, 'medium', 
    function() {
      // neem foto over en verplaats middle naar links
      $('#keuzebeelden img.right').attr('src', $('#keuzebeelden img.middle').attr('src'));
      $('#keuzebeelden img.middle').css({left:-150});

      // verwissel class left en middle
      $('#keuzebeelden img.left').addClass('active');
      $('#keuzebeelden img.middle').addClass('left').removeClass('middle');
      $('#keuzebeelden img.active').addClass('middle').removeClass('left active');
      // laad nieuwe image in right
      $('#keuzebeelden img.left').attr('src', prev.attr('image'));
    }
  );
  $('input[name=foto]').attr('value', $('#keuzebeelden h2.active').attr('image'));
}