/* MANUAL SETTINGS */

// here are the actie images defined
var consumer_actie_images = [
//  image_countdown('/images/homepage/actie1_wii.gif', 1213934400, 86400, 12),
	'/images/actie_adslbellen_okt09_2.png',
	'/images/actie_adsl_okt09_2.png',
	'/images/actie_modem_juni09_2.png',
	'/images/actie_veiligheidstraining.gif'

]

// Let op! Bij de laatste image uit het rijtje geen afsluitende komma! Anders flipt IE.

// wordt niet meer gebruikt

// var business_actie_images = [
//	'/images/homepage/actie_verlengingsep08_2.gif'
// ]

// Let op! Bij de laatste image uit het rijtje geen afsluitende komma! Anders flipt IE.

// here are the classnames of the important elements
// defined
var image_container = 'actiebeeld'

// settings
var animation_speed = 500 // animation speed in miliseconds
var auto            = 0 // automatic animation interval, 0 = off, 5000 is acceptable.

/* AUTOMATIC SETTINGS */

// alle browser offsets op 0 gezet ivm met nieuwe huisstijl

var browser_offset  = 0 // offset in slide
if($.browser.mozilla) {
  browser_offset = 0
  // firefox 3
  if(navigator.userAgent.match('3.0')) {
    browser_offset = 0
  }
} else if($.browser.safari) {
  browser_offset = 0
} else if(navigator.userAgent && navigator.userAgent.match(/Konqueror/)) {
  browser_offset = 0
} else if($.browser.opera) {
  browser_offset = 0
}

/* FUNCTIONS */

/*
 * Init
 *
 */
function init(element, images, start_auto) {
  var data   = collect(element, images)

  prepare(element)
  install_elements(element, data)
  install_listeners(element)

  // set initial position
  var active = find_active(element)
  var container = $(element).children('.'+image_container)[0]
  var slide     = $(container).children('div')[0]
  var offset    = (($(slide).height() / data.length) + browser_offset) * active.index
  $(slide).css({
        display : 'block',
        top : '-'+offset+'px'
  })

  // start automatic animation if we want to
  if(start_auto && auto) {
    setInterval( function () {
      auto_animate(element, data)
    }, auto)
  }
}

/*
 * Collect
 * collects needed data and returns a complete
 * set of data.
 */
function collect(element, images) {
  // collect links
  var links = $(element).children('ul').children('li').children('.frontlink')
  if(links.length != images.length)
    return false

  var data = []
  for(var i = 0; i < links.length; i++) {
    links[i].index = i
    data.push({
      image : images[i],
      link  : $(links[i]).attr('href'),
      title : $(links[i]).html()
    })
  }

  return data;
}

/*
 * Find active
 * find the active element and return the array index
 */
function find_active(element) {
  var active = 0
  var links = $(element).children('ul').children('li')
  for(var i = 0; i < links.length; i++)
    active = $(links[i]).hasClass('active') ? i : active

  return links[active]
}

/*
 * Prepare
 * prepares the image container and links
 */
function prepare(element) {
  // set some additional style rules on the container
  var container = $(element).children('.'+image_container)[0]
  $(container).css({
    overflow : 'hidden'
  })

  // give all links their index
  var links = $(element).children('ul').children('li')
  for(var i = 0; i < links.length; i++)
    links[i].index = i
}

/*
 * Install
 * install elements into the image container
 */
function install_elements(element, data) {
  var container = $(element).children('.'+image_container)[0]

  // First create a layer to slide in the
  // container with the right dimensions
  var height = $(container).height() * data.length
  var width  = $(container).width()
  var slide  = document.createElement('div')
  container.appendChild(slide)
  $(slide).css({
    display  : 'none',
    background: '#fff',
    height   : height+'px',
    width    : width+'px',
    position : 'absolute'
  })

  // now add links and images to the slide
  for(var i = 0; i < data.length; i++) {
    var link = document.createElement('a')
    link.href = data[i].link
    var img  = document.createElement('img')
    img.src   = data[i].image
    img.alt   = 'info en bestel'
    $(img).css({ margin: '0px' })
    link.appendChild(img)
    slide.appendChild(link)
  }

}

/*
 * Install listeners
 * install slide listeners on links
 */
function install_listeners(element) {
  var container = $(element).children('.'+image_container)[0]
  var slide     = $(container).children('div')[0]
  var offset    = $(container).height() + browser_offset // 2 added for borders
  var links = $(element).children('ul').children('li')

  for(var i = 0; i < links.length; i++) {
    $(links[i]).children('.frontlink').bind('mouseover', function () {
      var link = $(this).parent()[0]

      // set a flag that we are mouseover, so the auto animation
      // pauzes
      element.is_mouseover = true

      // stop all animations and skip to the current
      $(slide).stop(true)

      element.animating = link.index
      $(slide).animate({
        top : '-'+offset*link.index+'px'
      }, animation_speed, null, activate())

      function activate() {
        var active = find_active(element)
        $(active).removeClass('active').addClass('inactive')
        $(link).addClass('active').removeClass('inactive')
      }
    })

    $(links[i]).children('.frontlink').bind('mouseout', function () {
      element.is_mouseover = false
    })
  }

  $(element).bind('mouseover', function () {
    element.is_mouseover = true
  })
  $(element).bind('mouseout', function () {
    element.is_mouseover = false
  })
}

/*
 * Auto animate
 * Start automatic animations
 */
function auto_animate(element, data) {
  if(element.is_mouseover)
    return false

  var active = find_active(element)
  var to     = active.index < data.length-1 ? active.index+1 : 0

  // set initial position
  var slide  = $(element).children('.'+image_container).children('div')[0]
  var offset = (($(slide).height() / data.length) + browser_offset) * to

  $(slide).animate({
    top : '-'+offset+'px'
  }, animation_speed, null, activate())

  function activate() {
    var links = $(element).children('ul').children('li')
    var active = find_active(element)
    $(links[to]).addClass('active')
    $(active).removeClass('active')
  }
}

// function to append a number to an image filename according to
// periods of time past the start timestamp. For example, periods of
// 86400 seconds (one day) from 1213934400 (20-06-08). Every day after
// this start periode the appended number (1, 2, 3, etc) will be increased.
// image.gif will become image.1.gif, image.2.gif, image.3.gif, etc.
// the filenames will be returned.
function image_countdown(image,start,period, max) {
  var d = new Date()
  var timestamp = Math.round(d.getTime()/1000)
  var nr = max - Math.ceil((timestamp - start)/period)
  if(nr <= 0)
    return image

  return image.replace(/(\.[a-z]{3})$/i, "." + nr + "$1")
}

/* INIT */

$(document).ready( function () {
  /* BLOCK ANIMATION */

  // install with a timeout to make sure
  setTimeout( function () {
    // initiate the consumer block
    var element = $('.frontactie_consumer')[0]
    init(element, consumer_actie_images, true)

  }, 500)

  // image countdown!
  if($(".image_countdown")) {
    var file = image_countdown('actie_adsl_mei03.gif', 1213934400, 86400, 10)
    if(file)
      $(".image_countdown").css({ 'background-image' : 'url(' + file + ')' })
  }
})