jQuery(document).ready(function($) {
  //This keeps any carousel-items not in line and with their pants on from showingbefore the carousel is loaded.
    $('#carousel-container').delay(1000).show();
    //Setup Carousel and Controls
    function highlight(carousel, obejctli,liindex,listate){
       $('#carousel-controls span:nth-child('+ liindex +')').addClass("selected");
    };
    
    function removehighlight(carousel, obejctli,liindex,listate){
       $('#carousel-controls span:nth-child('+ liindex +')').removeClass("selected");
    };
    
    function carousel_controls(carousel){
      $('#carousel-controls span').bind('click', function() {
          carousel.scroll($.jcarousel.intval($(this).attr('id')));
          return false;
        });
      $('.carousel-item-next').bind('click', function() {        
          carousel.next();        
          return false;    
      });
      $('.next').bind('click', function() {        
          carousel.next();        
          return false;    
        });
      $('.prev').bind('click', function() {        
          carousel.prev();        
          return false;    
        });
      $(document).keydown( function(eventObject) {
           if(eventObject.which==37) {
              $('.prev').click();
           } else if(eventObject.which==39) {
              $('.next').click();
           }
      });
    };
    //Initialize Carousel
    $('#inkfolio-carousel').jcarousel({
      initCallback: carousel_controls,
      visible: 1,
      scroll: 1,
      wrap: 'last',
      animation: 'fast',
      easing: 'swing',
      buttonNextHTML: null,
      buttonPrevHTML: null,
      itemVisibleInCallback:  highlight,
    	itemVisibleOutCallback: removehighlight
    });
    $('#dccj').delay(1000).fadeIn(800, function(){
        $(this).delay(800).animate({right:'395px'}, 1500, function(){
            $('#intro-forward').fadeIn(1000);
        });
    });
    $('.browsing-instructions').qtip({
       content: 'To browse this portfolio:<ul><li>Use the arrows in the top corners of this carousel.</li><li>Use the page navigation below the carousel.</li><li>Or you can use the left & right arrow keys on your keyboard.</li></ul>',
       show: 'mouseover',
       hide: 'mouseout',
       effect: 'fade',
       position: {
          corner: {
             target: 'topMiddle',
             tooltip: 'bottomRight'
           }
       },   
       style: { 
          width: 242,
          paddingTop: 10,
          paddingRight: 15,
          paddingLeft: 10,
          paddingBottom: 10,
          textAlign: 'left',
          fontSize:'.90em',
          lineHeight:'1.2em',
          background:'#232323',
          border: {
             width: 2,
             radius: 6,
             color: '#232323'
          },
          tip: 'bottomRight',
          name: 'dark' // Inherit the rest of the attributes from the preset dark style
       }
    });
    $("#inkfolio-carousel .wp-caption a").before("<div id='instructions'>Click image below for gallery view.</div><div class='zoomable'><p>Gallery View</p></div>");
    $("#inkfolio-carousel .wp-caption").hover(
                function () {
                    $('.zoomable').fadeIn();
                },
                function () {
                    $('.zoomable').fadeOut();
                }
    );
    $("#inkfolio-carousel .wp-caption .zoomable").bind('click', function(){
        $(this).next().click();
    });
    $('#index-page-container .more-link').bigTarget({
      hoverClass: 'over', 
      clickZone : 'div:eq(1)'
    });
    $("#footer h1 a").bigTarget({
      hoverClass: 'over', 
      clickZone : 'div:eq(1)'
    });
    $('#footer .wp-caption a img').unwrap();
    $('#footer .wp-caption a img').unwrap();
    $("#single-page-container .wp-caption a").before("<div id='instructions'>Click image below for gallery view.</div><div class='zoomable'><p>Gallery View</p></div>");
    $("#single-page-container .wp-caption").hover(
                function () {
                    $(this).children('.zoomable').fadeIn();
                },
                function () {
                    $(this).children('.zoomable').fadeOut();
                }
    );
    $("#single-page-container .wp-caption .zoomable").bind('click', function(){
        $(this).next().click();
    });
    $("#index-page-container .wp-caption a").before("<div id='instructions'>Click image below for gallery view.</div><div class='zoomable'><p>Gallery View</p></div>");
    $("#index-page-container .wp-caption").hover(
                function () {
                    $(this).children('.zoomable').fadeIn();
                },
                function () {
                    $(this).children('.zoomable').fadeOut();
                }
    );
    $("#index-page-container .wp-caption .zoomable").bind('click', function(){
        $(this).next().click();
    });
});