var Visual = new Map();

///settings
Visual.fadeTime = 2000;
Visual.fadeQuickTime = 500; //manually activated fade must move a lot quicker.
Visual.pauseTime = 6000;

Visual.items = new Array();
Visual.fadeTarget = null;
Visual.timer = null;
Visual.counter = 0;
Visual.enablenav = false;

///functionality
Visual.index = 1;
Visual.selectorindex = 0;

Visual.setup = function () {
   var jVisuals = $('.vf_item');
   Visual.selectors = $('.vf_itemselector a');

   // set up jObjects
   Visual.fadeTarget = jVisuals.eq(1);
   Visual.srcTarget1 = jVisuals.eq(0);
   Visual.srcTarget2 = jVisuals.eq(1);

   if (Visual.enablenav) {
      Visual.selectors.each(function (i) {
         $(this).click(function () {
            Visual.activate(i);
            this.blur();
            return false;
         });
      })
   }
   else {
      $('.vf_itemselector').hide();
   }

   //don't start if there's only one image.
   if (Visual.items.length < 2) {
      return;
   }
   //enter fade loop.
   setTimeout(Visual.fadeOut, Visual.pauseTime);
   Visual.selectors.eq(Visual.selectorindex).parent().toggleClass('active');
}

Visual.getNextIndex = function () {
   //console.log('getNextIndex()');
   //console.log('old', visual.index);
   Visual.index = ++Visual.index % this.items.length;
   //console.log('new', Visual.index);
   Visual.selectorindex = ++Visual.selectorindex % this.items.length;
   Visual.counter++;

   return Visual.index;
}

Visual.fadeIn = function () {
   //console.log('fadeIn()');
   Visual.selectors.eq(Visual.selectorindex).parent().removeClass('active');
   var _index = Visual.getNextIndex();
   Visual.selectors.eq(Visual.selectorindex).parent().addClass('active');

   Visual.fadeTarget.fadeIn(Visual.fadeTime, function () {
      Visual.setContent(Visual.srcTarget1);
      Visual.timer = setTimeout(Visual.fadeOut, Visual.pauseTime);
   });
}
Visual.fadeOut = function () {
   //console.log('fadeOut()');
   Visual.selectors.eq(Visual.selectorindex).parent().removeClass('active');
   var _index = Visual.getNextIndex();
   Visual.selectors.eq(Visual.selectorindex).parent().addClass('active');

   Visual.fadeTarget.fadeOut(Visual.fadeTime, function () {
      Visual.setContent(Visual.srcTarget2);

      Visual.timer = setTimeout(Visual.fadeIn, Visual.pauseTime);
   });
}
Visual.activate = function (intIndex) {
   //console.log('activate()');
   clearTimeout(Visual.timer);

   //console.log('activate to', intindex);
   //console.log('current index', visual.index);
   //console.log('current index sel', Visual.selectorindex);


   //console.log('kill active on sel ', Visual.selectorindex);
   Visual.selectors.eq(Visual.selectorindex).parent().removeClass('active');
   Visual.index = intIndex;
   Visual.selectorindex = intIndex;

   //select whether the top or bottom image is currently show and which to fade.
   if (Visual.counter % 2 == 1) {
      //bottom is visble. set top src; fade in the top one
      Visual.setContent(Visual.srcTarget2);
      Visual.srcTarget2.fadeIn(Visual.fadeQuickTime);
   }
   else {
      //top is visble. set bottom src and fadeout top.
      Visual.setContent(Visual.srcTarget1);
      Visual.srcTarget2.fadeOut(Visual.fadeQuickTime);
   }

   //activate matching selector button
   //console.log('add active on sel ', Visual.selectorindex);
   Visual.selectors.eq(intIndex).parent().addClass('active');

   Visual.counter++;
}

Visual.setContent = function (jItem) {
   //console.log('setContent()');
   var dataItem = Visual.items[Visual.index];
   //console.log('dataItem:', dataItem);

   jItem.html(dataItem);
}

/////////////////////////////////////

$(document).ready(Visual.setup);