(function($){
  $.fn.initBanner = function(options) { 
    options = jQuery.extend({
      contentId:        'bannersummary',
      navBoxId:         'bannercontrols',
      containerId:      'banner',
      paginMax:         5,
      paginMid:         3,
      dataMap:          new Array(),
      bannerBg:         '#333333'
    },options);
    
    var currentBannerId =  0;
    var navPanel =         null;
    var isTransitioning = false;
    
    return this.each (function () {
      this.options = $.extend(this.options, options || {});
      /* INSERT CONTENT PANELS (EXPANDED AND SUMMARY) */
      var summary_html = '';
      summary_html += '<div id="cpBannerSummary">';
      summary_html +=   '<div id="casestudy_group"></div>';
      summary_html +=   '<div id="casestudy_heading"></div>';
      summary_html +=   '<a href="javascript: void(0);" id="casestudy_readmore">Read More &gt;&gt;</a>';
      summary_html += '</div>';
      summary_html += '<div id="cpBannerExpanded" style="position: absolute; display: none; background: #BBB1A5;">';
      summary_html +=   '<div id="casestudy_expandedtitle"></div>';
      summary_html +=   '<div id="casestudy_expandedtext"></div>';
      summary_html +=   '<a href="#" id="casestudy_pagelink">Read Full Article &gt;&gt;</a>';
      summary_html += '</div>';
      $(document.getElementById(this.options.contentId)).css({'padding' : '0px', 'position':'relative'}).html('').append(summary_html);
      $('#cpBannerSummary').css({'padding' : '18px 16px 16px 24px'});
      $('#cpBannerExpanded').css({'padding' : '18px 16px 16px 24px'});
      /* DRAW NAVIGATIONAL BUTTONS AND INSERT INTO CONTROLS */
      var navString = '';
      var imgString = '';
      for (var i = 0; i <= options.dataMap.length -1; i++) {
        navString += '<td targetImage="'+i+'">' + (i + 1) + '</td>';
        imgString += '<div class="cpBannerImg" targetImage="'+i+'" style="position: absolute; left: 0; top: 0; display: none;">';
        imgString +=   '<img src="'+ options.dataMap[i].img +'"/>';
        imgString += '</div>';
      }
      /* INSERT NAVIGATIONAL CONTOLS */
      var nav_html = '';
      nav_html += '<div id="cpBannerImgHolder" style="background: ' + this.options.bannerBg + '">';
      nav_html +=   imgString;
      nav_html += '</div>';
      nav_html +=  '<div id="bannercontrols" style="z-index: 5">';
      nav_html +=    '<div id="bannercontrolsheading">Next Feature</div>';
      nav_html +=    '<div><table><tr>';
      nav_html +=      '<td style="width: 11px; vertical-align: center;"><img id="banner-back" src="/templates/site/images/banner-btn-back.gif" /></td>';
      nav_html +=      '<td>';
      nav_html +=        '<table id="bannernav" cellspacing="6" cellpadding="0"><tbody><tr id="cpBannernav">';
      nav_html +=          navString;
      nav_html +=        '</tr></tbody></table></td>';
      nav_html +=      '<td style="width: 11px; vertical-align: center;"><img id="banner-next" src="/templates/site/images/banner-btn-next.gif" /></td>';
      nav_html +=    '</tr></table></div>';
      nav_html +=  '</div>';
      $(document.getElementById(this.options.containerId)).css({"overflow": "hidden"}).html('').append(nav_html);
      /* BIND FORWARD AND BACK BUTTON */
      $('#banner-back').css({ 'cursor': 'pointer' }).click( function () { shiftBanner(-1); });
      $('#banner-next').css({ 'cursor': 'pointer' }).click( function () { shiftBanner(1); });
      navPanel = $('#cpBannernav');
      currentBannerId = 0;
      /* PRELOAD ALL IMAGES */
      $('.cpBannerImg').children('img').each(function(i) {
//        $(this).attr('src', options.dataMap[i].img);
        if (i == currentBannerId) {
          $(this).load(function(){ 
            $(this).parent().fadeIn();
          });
        }
      });
      drawContentForBanner(currentBannerId);
      /* BIND CLICK EVENTS TO EACH CONTROL SELECTOR */
      navPanel.children('td').each(function(i) {
        if (i == currentBannerId) {
          $(this).addClass('banner-nav-btn-actv');
        }
        $(this).bind( 
          'click', 
          { btn: this},
          function(e) { 
            chooseBanner( $(e.data.btn) );
          });
      }); /* END ITERATION OF CONTOLS LOOP */
      
      drawBannerControls();
      
      /* BIND CLICK READ MORE LINK TO EXPAND DETAILS PANEL */
      $('#casestudy_readmore').bind("click", function() {
        openPanel(); 
      });
      
      adjustExpandedPanel();
    });
    
    function chooseBanner(btn) {
      var newSelected = btn.attr('targetImage');
      if ( newSelected != currentBannerId ) {
        var newImg = $('.cpBannerImg').eq(newSelected);
        var oldImg = $('.cpBannerImg').eq(currentBannerId);
        if ( newImg.is(':animated') || oldImg.is(':animated') ) {
          $('.cpBannerImg').not(oldImg).hide();
          $('.cpBannerImg').stop();
        }
        animateBannerTransition(newImg, oldImg);
        /* UPDATE DETAILS PANNEL WITH SELECTED CASE STUDY CONTENT */
        drawContentForBanner( newSelected );
        /* UPDATE NEW ACTIVE BUTTON WITH APPROPRIATE CLASS */
        navPanel.children('td').removeClass('banner-nav-btn-actv');
        btn.addClass('banner-nav-btn-actv');
        /* DRAW NAV CONTROLS WITH NEW ACTIVE BUTTON */
        drawBannerControls();
        currentBannerId = newSelected;
      }
    } /* END chooseBanner FUNCTION */
    
    function animateBannerTransition(newImg, oldImg) {
      oldImg.css({"z-index":"2"});
      newImg.css({"z-index":"1", "opacity":"1"}).show();
      oldImg.animate({opacity: 0}, 1500, function() {
        oldImg.hide();
        $('.cpBannerImg').not(newImg).css({"z-index":"0", "opacity":"1"});
      });
    }
    
    function adjustExpandedPanel () {
      var pos = $("#cpBannerSummary").offset();  
      var width = $("#bannersummary").width();
      var height = $("#bannersummary").height();
      if (!$.browser.msie) {
        width -= (16 + 24);
      }
      $("#cpBannerExpanded").css( { "width": width + "px", 
                                  "min-height": height + "px", 
                                  "left": ($.browser.msie) ? "-24px" : "0px", 
                                  "top": "0px",
                                  "position": "absolute" ,
                                  "padding": "18px 16px 16px 24px" });
    }
    
    function shiftBanner (a) {
      var oldImg = $('.cpBannerImg').eq(currentBannerId);
      if ( oldImg && oldImg.not(':animated') ) {
        var selectedNav;
        if ( a > 0) {
          chooseBanner(navPanel.children('.banner-nav-btn-actv').next());
        }
        else {
          chooseBanner(navPanel.children('.banner-nav-btn-actv').prev());
        }
      }
    }
    
    function drawBannerControls () {
      var activeNav = navPanel.children('.banner-nav-btn-actv');
      var end = navPanel.children().length;
      if ($('.banner-nav-btn-actv').attr('targetimage') == 0) {
        $('#banner-back').hide();
      }
      else {
        $('#banner-back').show();
      }
      if ($('.banner-nav-btn-actv').attr('targetimage') == end -1) {
        $('#banner-next').hide();
      }
      else {
        $('#banner-next').show();
      }
      var index = $('.banner-nav-btn-actv').attr('targetImage');
      var visibleStart = Math.max(0, index - options.paginMid - 1);
      var visibleEnd = Math.min(end, visibleStart + options.paginMax + 1);
      navPanel.children('td').hide().slice(visibleStart, visibleEnd).show();
    }
    
    function drawContentForBanner (i) {
      /* UPDATE CONTENT WITH VALUES FOR THE SELECTED ITEM */
      $('#casestudy_group').html('').append(options.dataMap[i].group);
      $('#casestudy_heading').html('').append(options.dataMap[i].title);
      $('#casestudy_expandedtitle').html('').append(options.dataMap[i].expandedTitle); 
      $('#casestudy_expandedtext').html('').append(options.dataMap[i].text);
      $('#casestudy_pagelink').attr('href', options.dataMap[i].link);
    }
    
    /* Opens the details drop down and sets delay timeout to hide the panel */
    function openPanel () {
      adjustExpandedPanel();
      $("#cpBannerExpanded").fadeIn("fast");

      var t = setTimeout('$("#cpBannerExpanded").fadeOut("fast");', 2000);
      $("#cpBannerExpanded").mouseout(function() {
        t = setTimeout('$("#cpBannerExpanded").fadeOut("fast");', 2000);
      }).mouseover(function() {
        clearTimeout(t);
      }); 
      $("#bannercontrols").mouseout(function() {
        t = setTimeout('$("#cpBannerExpanded").fadeOut("fast");', 2000);
      }).mouseover(function() {
        clearTimeout(t);
      }); 
    } /* END openPanel FUNCTION */
  }
})(jQuery);