﻿$(document).ready(
  
  // this will start the innerfade on the middle image
  function(){
  $('#slideshow').innerfade({
    speed: 2500,
    timeout: 7500,
    type: 'sequence',
    containerheight: '363px'
  });
  
  // this will automaticly put the last-child on the productlist, so it works in IE7.
  $(function(){
     $(".productlist ul li:last-child").css("margin-right","0px")
  });
  
  // this will make the shoppingcart, submenu and productlist dropdown when page is loaded
  $(function(){
    $("#basket").slideDown('slow'),
    $(".submenuPadding").slideDown('slow'),
    $('#subpageContent').fadeIn(1000),
    $('.productlist ul li').fadeIn(1000),
    $('.productOnlyImages img').fadeIn(1000)
  });
    
  // The start of the image gallery. Go go go!
  //$(function() {
    // initialize scrollable
    //$("div.scrollable").scrollable();
  //});
    
  $(function() {
    $(".items img").click(function() {
      // calclulate large image's URL based on the thumbnail URL (flickr specific)
      var url = $(this).attr("src").replace("_t", "");
      var title = $(this).attr("title").replace("_t", "");
      
      // get handle to element that wraps the image and make it semitransparent
      var wrap = $("#image_wrap").fadeTo("medium", 0.5);
      
      // the large image from flickr
      var img = new Image();
      
      // call this function after it's loaded
      img.onload = function() {
        
        // make wrapper fully visible
        wrap.fadeTo("fast", 1);
        
        // change the image
        wrap.find("img").attr("src", url);
        
        // change the title
        wrap.find("img").attr("title", title);
      };
      
      // begin loading the image from flickr
      img.src = url;
      
      // when page loads simulate a "click" on the first image
    }).filter(":first").click();
  });

});

    // acordion start
    
$(document).ready(function(){

  //Hide (Collapse) the toggle containers on load
  $(".toggle_container").hide();

  //Switch the "Open" and "Close" state per click
  $("h2.trigger").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
  });

  //Slide up and down on click
  $("h2.trigger").click(function(){
    $(this).next(".toggle_container").slideToggle("slow");
  });

});
    
    
