var blAnimating = false; // Boolean To Indicate Whether Animation Is Taking Place
var divSlider; // Cache DIV Slider Object
var intClickedIndex = -1; // Currently Clicked Item
var intLastItemClicked = -1; // Last Item To Be Clicked
var intNumSlides; // Variable To Cache Number Of Slides
var intOriginalShown = 0; // Origional Item To Show

(function($) {

  $.fn.KMSlider = function(options) {

    // Default Configuration Properties
    var defaults = {
      activeColour: '',
      controlTag: 'span',
      cssSliderControl: 'sliderControl',
      hoverOverColour: '',
      orientation: 'vertical', // Orientation Of Slider Movement {vertical | horizontal | random}
      parentTag: '',
      parentTagClass: 'sliderControl',
      targetControlPanel: '',
      speed: 800
    };

    var options = $.extend(defaults, options);

    return this.each(function() {

      divSlider = $(this);

      var blVertical;
      if (options.orientation == 'random') {
        blVertical = (1 == (Math.floor(Math.random() * 2))); // Random Number Between 0 & 1)
      } else {
        blVertical = (options.orientation == 'vertical');
      }

      var ctrlHTML = ''; // String To Be Built For The Control Box HTML
      var iCount = 0; // Integer To Loop LI Elements
      var idSLI = 'sourceLI_'; // Prepend String For ID Of Source LI Elements
      var idSSI = 'sliderControl_'; // Prepend String For ID Of Span Elements
      var intHeight = divSlider.height();  // Cache Height Value      
      var intWidth = divSlider.width(); // Cache Width Value
      var strHoverHTML = '';
      var strParentTagOpen = '';
      var strParentTagClose = '';

      if (!blVertical) {
        $("ul", divSlider).css('width', 2 * intWidth);
      }

      if (options.hoverColour != '') {
        strHoverHTML = 'onmouseover="changeBGColor(this,\'' + options.hoverColour + '\');" onmouseout="changeBGColor(this,\'Transparent\');"';
      }

      // Calculate Number Of Slides
      intNumSlides = divSlider.children("ul").children("li").length

      var strIDAttr;

      $('li', divSlider).each(function(index) {

        $(this).attr('id', idSLI + iCount)

        // Horizontal Elements Need To Be Floated
        if (!blVertical) $(this).css('float', 'left');

        if (iCount != 0) {
          $(this).css('display', 'none')
        }

        //Create ID Attribute
        strIDAttr = ' id="' + idSSI + iCount.toString() + '"';

        if (options.parentTag != '') {

          strParentTagOpen = '<' + options.parentTag + ' class="' + options.parentTagClass + '"' + strIDAttr;
          //Don't Add MouseOver To First Item If ActiveColor Set
          if ((options.activeColour != '') && (iCount != 0)) {
            strParentTagOpen += strHoverHTML;
          }
          strParentTagOpen += '>';
          strParentTagClose = '</' + options.parentTag + '>';

          //Clear ID Attribute So It's Not Used On Span (Below)
          strIDAttr = '';
        }

        if (options.targetControlPanel != '') {
          ctrlHTML = ctrlHTML + strParentTagOpen + '<' + options.controlTag + ' class="' + options.cssSliderControl + '"' + strIDAttr + '>' + $(this).attr("title") + '</' + options.controlTag + '>' + strParentTagClose;
        }

        iCount++;

      });

      if (options.targetControlPanel != '') {
        // Inject HTML
        $('#' + options.targetControlPanel).html(ctrlHTML);
      } else {
        // Add Arrow Images
        $(this).children().first().after('<img id="' + divSlider.attr('id') + 'ArrowLeft" class="sliderArrowLeft" src="Images/Buttons/Arrow_Left_Out.png" alt="Previous" title="Previous" />')
        $(this).children().first().after('<img id="' + divSlider.attr('id') + 'ArrowRight" class="sliderArrowRight" src="Images/Buttons/Arrow_Right_Out.png" alt="Next" title="Next" />')
        // Add Rollovers To Arrow Images
        manualImageRollover('#' + divSlider.attr('id') + 'ArrowLeft')
        manualImageRollover('#' + divSlider.attr('id') + 'ArrowRight')
      }

      // Reset Counter
      iCount = 0;

      if (options.targetControlPanel != '') {

        $('li').each(function(index) {

          $("#" + idSSI + iCount.toString()).click(function() {

            if (blAnimating) { return false; }

            intClickedIndex = $(this).index();       

            if (intClickedIndex == intOriginalShown) { return false; }

            // Highlight Selected Span
            if (options.activeColour != '') {

              var lpCounter = 0;

              $(options.parentTag, '#' + options.targetControlPanel).each(function(index) {

                if (lpCounter == intClickedIndex) {

                  $(this).attr('onmouseout', null)
                  $(this).attr('onmouseover', null)
                  $(this).unbind('mouseout');
                  $(this).unbind('mouseover');
                  $(this).css('background-color', options.activeColour)

                } else if ((intLastItemClicked > -1) && (lpCounter == intLastItemClicked)) {

                  $(this).css('background-color', 'transparent')
                  $(this).mouseover(function() {
                    $(this).css('background-color', options.hoverColour);
                  });
                  $(this).mouseout(function() {
                    $(this).css('background-color', 'Transparent');
                  });

                }

                lpCounter++

              });

            }

            //From Here
            beginSlide(blVertical, idSLI, intHeight, intWidth, options.speed)

          });

          iCount++;

        });

        //Default First Item
        if (options.targetControlPanel != '') {
          if ((intClickedIndex == -1) && (options.activeColour != '')) {
            $(options.parentTag, '#' + options.targetControlPanel).first().css('background-color', options.activeColour);
            intLastItemClicked = 0;
          }
        }

      } else {

        intClickedIndex = 0;
        intLastItemClicked = 0;
        showHideArrows()

        $("#" + divSlider.attr('id') + 'ArrowRight').click(function() {

          if (blAnimating) { return false; }
          intClickedIndex = (intLastItemClicked + 1)
          beginSlide(blVertical, idSLI, intHeight, intWidth, options.speed)

        });

        $("#" + divSlider.attr('id') + 'ArrowLeft').click(function() {

          if (blAnimating) { return false; }
          intClickedIndex = (intLastItemClicked - 1)
          beginSlide(blVertical, idSLI, intHeight, intWidth, options.speed)

        });

      }

    });

  };

})(jQuery);

// Function To Perform Slide Animation
function beginSlide(blVertical, idSLI, intHeight, intWidth, intSpeed) {

  var moveTo;
  var slideToMove;
  
  if (intClickedIndex > intOriginalShown) {

    $('#' + idSLI + intClickedIndex).css('display', 'block');
    moveTo = (blVertical) ? (intHeight * -1) : (intWidth * -1);
    slideToMove = idSLI + intOriginalShown;

  } else {

    if (blVertical) {
      $('#' + idSLI + intClickedIndex).css('margin-top', (intHeight * -1));
    } else {
      $('#' + idSLI + intClickedIndex).css('margin-left', (intWidth * -1));
    }

    $('#' + idSLI + intClickedIndex).css('display', 'block');
    moveTo = 0;
    slideToMove = idSLI + intClickedIndex;

  }

  if (blVertical) {

    $('#' + slideToMove).animate(
      { marginTop: moveTo }, intSpeed, null,
      function() {
        $('#' + idSLI + intOriginalShown).css('display', 'none');
        $('#' + idSLI + intClickedIndex).css('margin-top', '0')
        $('#' + idSLI + intOriginalShown).css('margin-top', '0');
        intOriginalShown = intClickedIndex;
        showHideArrows()
        blAnimating = false;
      }
    );

  } else {

    $('#' + slideToMove).animate(
      { marginLeft: moveTo }, intSpeed, null,
      function() {
        $('#' + idSLI + intOriginalShown).css('display', 'none');
        $('#' + idSLI + intClickedIndex).css('margin-left', '0')
        $('#' + idSLI + intOriginalShown).css('margin-left', '0');
        intOriginalShown = intClickedIndex;
        showHideArrows()
        blAnimating = false;
      }
    );

  }

  blAnimating = true;
  intLastItemClicked = intClickedIndex;

}

function showHideArrows() {

  if (divSlider.find('#' + divSlider.attr('id') + 'ArrowLeft').length == 1) {

    if (intClickedIndex == 0) {
      $("#" + divSlider.attr('id') + 'ArrowLeft').css('display', 'none');
    } else {
      $("#" + divSlider.attr('id') + 'ArrowLeft').css('display', 'block');
    }

    if (intClickedIndex >= (intNumSlides - 1)) {
      $("#" + divSlider.attr('id') + 'ArrowRight').css('display', 'none');
    } else {
      $("#" + divSlider.attr('id') + 'ArrowRight').css('display', 'block');
    }

  }

}