//default configuration
var config = { 'slides': [ { 'title': 'Lorem Ipsum', 'content': 'dolor sit amet, consectetur adipiscing elit. Nunc velit velit, porta vel dictum condimentum, faucibus vitae ligula. Ut tempus auctor aliquam.', 'image': 'images/loremipsum.jpg' } ] };

//varible to handle the currently selected slide
var currentSlide = 0;

//marks the slidenav finder function as complete so multiple instances don't get activated
var slidenavMarker = false;

//variable the tells the _nextSlide function to delay changing slides
//(becuase the user clicked a slide link and we want to give them a chance to read it
var skipAutoSlideChange = false;

function _nextSlide() {

  if(skipAutoSlideChange == false) {

    //get the slidenav that matches the current slide number
    var slidenav = "";
    slidenavMarker = false;
    $(".slidenav").each(function() {
      if((parseInt($(this).text()) == currentSlide+2 || (parseInt($(this).text()) == 1 && currentSlide == config.slides.length-1)) && slidenavMarker == false) {
        _changeSlide($(this), currentSlide+1);
        slidenavMarker = true;
      }
    });

  } else
    skipAutoSlideChange = false;

  setTimeout("_nextSlide()",7500);

}

function _changeSlide(slidenav, slideIndex) {

  //wrap slideIndex around to the beginning if it's too high
  if(slideIndex >= config.slides.length)
    slideIndex = 0;

  //update slide number
  currentSlide = slideIndex;

  //change slide navigation buttons
  $(".slidenav").children(".slidenavbg").animate({ opacity: 0.3 }, 330);
  slidenav.children(".slidenavbg").delay(30).animate({ opacity: 0.9 }, 330);

  //change text in the text pane
  slidenav.siblings(".textpane").children(".supertitle:visible").fadeOut(330);
  slidenav.siblings(".textpane").children(".slidetitle").fadeOut(330, function() {
    $(this).siblings(".slidecontent").fadeOut(330, function() {

      //fade in the super title, if it exists
      var topShift = 0;
      if(config.slides[slideIndex].supertitle.length > 0) {
        $(this).siblings(".supertitle").text(config.slides[slideIndex].supertitle);
        $(this).siblings(".supertitle").fadeIn(330);
        topShift = $(this).siblings(".supertitle").height()+5;
      }

      $(this).siblings(".slidetitle").css({ top: (10+topShift)+"px" }).text(config.slides[slideIndex].title).fadeIn(330, function() {

        //adjust position of slide content if text is taller than expected
        var topPosChange = $(this).height()-21;

        $(this).siblings(".slidecontent").css({ top: (34+topPosChange+topShift)+"px" }).html(config.slides[slideIndex].content+'<br /><br /><a href="'+config.slides[slideIndex].link+'" class="concentrisSlideshowLink">Read More &rarr;</a>').fadeIn(330);

      });
    });
  });

  //cross fade one image to the next
  var activeImage = $(".activeimage");
  var inactiveImage = $(".inactiveimage");
  activeImage.addClass("inactiveImage").removeClass("activeImage").fadeOut(1000);
  inactiveImage.addClass("activeImage").removeClass("inactiveImage").attr({ src: config.slides[slideIndex].image }).css({ display: "none" }).fadeIn(1000);

}

(function($) {

  $.fn.concentrisSlideshow = function(settings) {

    if(settings) $.extend(config, settings);

    this.each(function() {

      //add an image
      $(this).append('<img src="'+config.slides[0].image+'" alt="slideshow image" width="778" height="213" class="activeimage" />');
      $(this).children("img").fadeIn(1000);
      $(this).append('<img src="" alt="slideshow image 2" width="778" height="213" class="inactiveimage" />');

      //add the box that will slide up
      $(this).append('<div class="textpane"><div class="textpanebg"></div></div>');

      //slide the text pane up
      $(this).children(".textpane").animate({ width: '220px', top: '60px;' }, 1000, function() {

        var originalThis = $(this).parent();

        //get the number of slide objects from config
        var numSlides = config.slides.length;

        //add numbered buttons
        if(numSlides > 1) {

          var leftStart = 215;
          var animationDelay = 100;
          var bgOpacity = 0.9;

          for(var i=1; i<=config.slides.length; i++) {

            //add a nav button of the corresponding number
            originalThis.append('<div class="slidenav"><div class="slidenavcontent">'+i+'</div><div class="slidenavbg"></div></div>');

            //change opacity of the background for inactive buttons
            if(i == 2) bgOpacity = 0.3;

            //apply new left value
            //and start a fade in animation for this buttons
            originalThis.children(".slidenav:last-child").children(".slidenavbg").delay(animationDelay).animate({ opacity: bgOpacity }, 250);
            originalThis.children(".slidenav:last-child").children(".slidenavcontent").delay(animationDelay).animate({ opacity: 1 }, 250);
            originalThis.children(".slidenav:last-child").css({ left: leftStart+'px' }).delay(animationDelay).animate({ color: "red" }, 250).animate({ color: "white" }, 800, function() {
              $(this).css({ color: "white" });
});

            //increment leftStart and animationDelay for next button
            leftStart = leftStart+30;
            animationDelay = animationDelay+420;

          }

        }

        //add the supertitle if it exists
        $(this).append('<div class="supertitle"></div>');
        var topShift = 0;
        if(config.slides[0].supertitle.length > 0) {
          $(this).children(".supertitle").text(config.slides[0].supertitle);
          topShift = $(this).children(".supertitle").height()+5;
        }

        //add title and text for first slide
        $(this).append('<div class="slidetitle">'+config.slides[0].title+'</div>');
        $(this).children(".slidetitle").css({ top: (10+topShift)+"px" });

        //adjust position of slide content if text is taller than expected
        var topPosChange = $(this).children(".slidetitle").height()-21;

        //add title and text for first slide
        $(this).append('<div class="slidecontent">'+config.slides[0].content+'<br /><br /><a href="'+config.slides[0].link+'" class="concentrisSlideshowLink">Read More &rarr;</a></div>');
        $(this).children(".slidecontent").css({ top: (34+topPosChange+topShift)+"px" });

        //fade in title and text
        $(this).children(".slidetitle").fadeIn(660).delay(500).siblings(".slidecontent").fadeIn(660).delay(500).siblings(".supertitle").fadeIn(660);

        //start implementing automatic slide shifting
        setTimeout("_nextSlide()",7500);

        //apply rounded corners
        $(".slidenav, .slidenavbg").css({ WebkitBorderRadius: 5, MozBorderRadius: 5, BorderRadius: 5 });

        //performing a slide change
        $(".slidenav").live("click", function() {

          //get index for data for the clicked slide
          var slideIndex = parseInt($(this).text())-1;

          //turn off the next auto slide change
          skipAutoSlideChange = true;

          _changeSlide($(this), slideIndex);

        });

      });

    });

    return this;

  };

})(jQuery);