$(document).ready(function () {

var $panels1 = $('#slider1  .scrollContainer > div');
var $container1 = $('#slider1 .scrollContainer');
var $panels2 = $('#slider2  .scrollContainer > div');
var $container2 = $('#slider2 .scrollContainer');

// if false, we'll float all the panels left and fix the width 
// of the container
var horizontal = false;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels1.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });
  $panels2.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });
  
  // calculate a new width for the container (so it holds all panels)
  $container1.css('height', $panels1[0].offsetHeight * $panels1.height);
  $container2.css('height', $panels2[0].offsetHeight * $panels2.height);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll1 = $('#slider1 .scroll').css('overflow', 'hidden');
var $scroll2 = $('#slider2 .scroll').css('overflow', 'hidden');

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first') // find the first UL parent
      .find('a') // find all the A elements
        .removeClass('selected') // remove from all
      .end() // go back to all A elements
    .end() // go back to 'this' element
    .addClass('selected');
}

$('#slider1 .menu').find('a').click(selectNav);
$('#slider2 .menu').find('a').click(selectNav);

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

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.menu 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 offset1 = parseInt((horizontal ? 
  $container1.css('paddingTop') : 
  $container1.css('paddingLeft')) 
  || 0) * -1;
var offset2 = parseInt((horizontal ? 
  $container2.css('paddingTop') : 
  $container2.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions1 = {
  target: $scroll1, // the element that has the overflow
  
  // can be a selector which will be relative to the target
  items: $panels1,
  
  navigation: '.menu 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: offset1,
  
  // duration of the sliding effect
  duration: 1000,
  
  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};
var scrollOptions2 = {
  target: $scroll2, // the element that has the overflow
  
  // can be a selector which will be relative to the target
  items: $panels2,
  
  navigation: '.menu 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: offset2,
  
  // duration of the sliding effect
  duration: 1000,
  
  // 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.
$('#slider1').serialScroll(scrollOptions1);
$('#slider2').serialScroll(scrollOptions2);

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
$.localScroll(scrollOptions1);
$.localScroll(scrollOptions2);

// 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.
scrollOptions1.duration = 1;
$.localScroll.hash(scrollOptions1);
scrollOptions2.duration = 1;
$.localScroll.hash(scrollOptions2);

//portfolioslider
$("div#makeMeScrollable").smoothDivScroll({
	scrollingSpeed: 25, 
	mouseDownSpeedBooster: 2, 
	autoScroll: "", 
	autoScrollDirection: "endlessloop", 
	autoScrollSpeed: 12, 
	visibleHotSpots: "always", 
	startAtElementId: "startAtMe"});
	
// popup bubble
$('.bubbleInfo').each(function () {
    // options
    var distance = 10;
    var time = 500;
    var hideDelay = 250;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $('.trigger', this);
    var popup = $('.'+$(this).attr('id')+'popup').css('opacity', 0);
	var image = $("img", this);
	
    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function (e) {
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // don't trigger the animation again if we're being shown, or already visible
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;

		//slider image hareketi
		image.animate({top:"0px"},{queue:true,duration:500});
		// reset position of popup box
        popup.css({
          top: e.pageY-350,
          left: e.pageX-300,
          display: 'block' // brings the popup back in to view
        })

        // (we're using chaining on the popup) now animate it's opacity and position
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1,
		  queue: true
        }, time, 'swing', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      
      // store the timer so that it can be cleared in the mouseover if required
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
		
		image.animate({top:"100px"},{queue:true,duration:500});
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0,
		  queue: true
        }, time, 'swing', function () {
          // once the animate is complete, set the tracker variables
          shown = false;
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });
	
});