// when the DOM is ready...

$(document).ready(function () {



var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
// if false, we'll float all the panels left and fix the width 
// of the container
var horizontal = true;
// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });
  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');
// apply our left + right buttons

$scroll
  .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
  .after('<img class="scrollButtons right" src="images/scroll_right.png" />');
  

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');

}



$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}



if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.navigation a:first').click();
}



// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;

var scrollOptions = {
  target: $scroll, // the element that has the overflow
  // can be a selector which will be relative to the target
  items: $panels,
  navigation: '.navigation a',
  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'img.left', 
  next: 'img.right',
  
  // allow the scroll effect to run both directions
  axis: 'xy',
  onAfter: trigger, // our final callback
  offset: offset,
  // duration of the sliding effect
  duration: 500,
  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};



// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation.
$('#slider').serialScroll(scrollOptions);







// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
$.localScroll(scrollOptions);
var clicker = 0; 

// auto cycle
var cycleTimer = setInterval(function () {
  $scroll.trigger('next');
}, 8000);

// trigger
var $stopTriggers = $('#slider .navigation').find('a') // tab headers
   .add('.scroll')                                     // panel itself
   .add("a[href^='#']");                               // links to a tab



// stop funktion

function stopCycle() {
   $stopTriggers.unbind('click.cycle');
   clearInterval(cycleTimer);
   clicker = 1;
}

function pauseCycle() {
// remove the no longer needed stop triggers
   clearInterval(cycleTimer);             // stop the auto-cycle itself
}



// bind stop cycle function to the click event using namespaces
/*
$stopTriggers.bind('click.cycle', stopCycle);
$('#slider').hover(function() {
   pauseCycle();
}, function() {
if (clicker == 0){
   cycleTimer = setInterval(function () {
  $scroll.trigger('next');
}, 8000);
};
});
*/
// finally, if the URL has a hash, move the slider in to position, 

// setting the duration to 1 because I don't want it to scroll in the

// very first page load.  We don't always need this, but it ensures

// the positioning is absolutely spot on when the pages loads.

scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);


// Link to www.handwerk.de/simon.html in div#1.panel
//$('div.scrollContainer div#1.panel').append('<a syle="cursor:pointer;" href="http://www.handwerk.de/simon.html"><div id="teaserbox2" style="cursor:pointer;height: 250px;position:absolute;width:370px;z-index:99;top:50px;left:50px;"></div></a>');

//Link zum Gewinnspiel
//$('div.scrollContainer div#1.panel').append('<a syle="cursor:pointer;" href="http://www.handwerk.de/index.php?id=219"><div id="teaserGewinnspiel" style="cursor:pointer;height: 250px;position:absolute;width:260px;z-index:99;top:40px;left:660px;"></div></a>');

//Links für Slider 1, 2 und 3, großes Bild
$('div.scrollContainer div#1').append('<a href="http://www.handwerk.de/simon.html" style="text-indent:-9999px;position:absolute;width:1000px;height:290px;z-index:9;">Simon Filme</a>');
$('div.scrollContainer div#2').append('<a href="http://www.handwerk.de/kampagne/motive-downloads.html" style="text-indent:-9999px;position:absolute;width:1000px;height:290px;z-index:9;">Kampagnen Motive&Downloads</a>');
$('div.scrollContainer div#3').append('<a href="http://www.handwerk.de/berufe-checker.html" style="text-indent:-9999px;position:absolute;width:1000px;height:290px;z-index:9;">Berufe-Checker</a>');

if ($("#teaser_a .button_link_teaser_bild_text a").attr("href").length < 1) {
    var linkziel = $("#teaser_a a.teaser_link_global").attr("href");
    //alert (linkziel);
    $("#teaser_a .button_link_teaser_bild_text a").attr("href", linkziel);
}


if ($("#teaser_b .button_link_teaser_bild_text a").attr("href").length < 1) {
    var linkziel = $("#teaser_b a.teaser_link_global").attr("href");
    //alert (linkziel);
    $("#teaser_b .button_link_teaser_bild_text a").attr("href", linkziel);
}

if ($("#teaser_c .button_link_teaser_bild_text a").attr("href").length < 1) {
    var linkziel = $("#teaser_c a.teaser_link_global").attr("href");
    //alert (linkziel);
    $("#teaser_c .button_link_teaser_bild_text a").attr("href", linkziel);
}


});