var tseconds = 8;
var ssacounter = tseconds*100 + tseconds;  // start all over again
var ssacurrent = 0;
var ssamodule_width = 960;
var fwidth = 240;
var fheight = 400;

var module_class = '.ssa-module';
var container_class = '.ssa-container';
var row_class = '.ssa-row';
var items_class = '.ssa-item';
var controls_class = '.ssa-controls';
var ssaItems = null;

var current_row = 'ssa-currentrow';
var current_row_class = '.'+current_row;
var current_item = 'ssacurrent';
var current_item_class = '.'+current_item;
var hovered_item = 'ssahovered';

/* #####################
   #      jQuery       #
   ##################### */
$j(document).ready(function(){
  
  // Menu :: doesn't work with IE 6.0, this browser doesn't support CSS element:hover, other than anchor:hover
  $j('#nav>li').each (
    function () {
      var father_elem = $j(this);
      var slide_menu = father_elem.find('ul ul');
      slide_menu.slideUp( 'fast');
      // apply animation
      father_elem
      .hover(
        function () {
          slide_menu.slideDown('fast');
        }
        ,
        function () {
          slide_menu.slideUp('fast');
        }
      );
    }
  );
  
  // advert1 set controls  
  var ssaControls = $j(controls_class);
  var ssaCategoriesCtrl = $j('.ssa-category',controls_class);
  //hideControls();
  ssaControls.css({
    display : 'block'
  })
  /* .hover(
    function() {
      showControls();
    },
    function () {
      hideControls();
    }
  ) */;
  ssaCategoriesCtrl.css({
    opacity : 0.4
  })
  .click(
    function () {
      var index = getObjIndex (ssaCategoriesCtrl,$j(this));
      ssacounter = 0;
      nextRow(index);
    }
  )
  .hover(
    function() {
      $j(this).stop().animate({
        opacity : 0.8
      });
    },
    function() {
      $j(this).stop().animate({
        opacity : 0.4
      });
    }
  );
  
  
function getObjIndex (items, obj) {
  for (var i = 0; i < items.length; i++)
  {
    if ($j(items.get(i)).html() == obj.html())
    {
      return i;
    }
  }
  return -1;
}
  
  // awake slider
  awakeSlider();

  // set animation
  startAnimation ();
  
  // advert1 slider hover behavior
  ssaItems = $j(items_class);
  ssaItems.hover(
    function() {
      hideInfo($j(ssaItems.get(ssacurrent)));
      showInfo($j(this));
      $j(this).removeClass(hovered_item);
      $j(this).addClass(hovered_item);
      ssacurrent = currentIndex(ssaItems, current_item);
    },
    function() {
      //hideInfo($j(this));
      $j(this).removeClass(hovered_item);
    }
  );

  $j(container_class).hover(
    function() {
      var row_items = $j(items_class, current_row_class);
      stopAnimation();
      showAll(row_items);
      //showControls();
      //hideInfo($j(row_items.get(ssacurrent)));
      //showInfo($j(this));
      //ssacurrent = currentIndex(row_items,current_item);
    },function() {
      var row_items = $j(items_class, current_row_class);
      if (currentIndex(row_items,current_item) < 0) {
        showInfo($j(row_items.get(ssacurrent)));
      }
      startAnimation ();
      //hideControls();
      //hideInfo($j(this));
    }
  );
 
/* ###############################
   #      Main Ad - Raphäel      #
   ############################### */
  $j('.ssa-text p').css('paddingLeft','50px');
  $j('.ssa-text h1').css({
    'position':'absolute'
  }).each(function(index,elem) {
    var hldr = $j(elem);
    var text = hldr.text();
    var font = hldr.css('fontWeight') + " "+ hldr.css('fontSize') + " " + hldr.css('fontFamily');
    var color = hldr.css('color');
    //var elem_width = $j(".ssa-text h1").innerHeight();
    //var elem_height = hldr.innerHeight();   // height() doesn't work with Opera... somehow
    hldr.css('width','50px');
    hldr.css('height','400px');
    hldr.html("");
    var r = Raphael(elem, 50, 400);
    var sidetxt = r.text(hldr.parent().hasClass('right-side')?185:20, 200, text).attr({font: font}).attr({fill: color});
    sidetxt.rotate(hldr.parent().hasClass('right-side')?90:-90,false);
    r.safari();
  });
  
/* #####################
   #      Cathalog     #
   ##################### */
   fadeChildren($j('.browseProductItem'),'0.3').hover(
      function() {
         fadeChildren($j(this),'0.9');
      },function() {
         fadeChildren($j(this),'0.3');
      }
   );
});

/* ###############################
   #   Secondary Ad - Raphäel    #
   ############################### */
$j(window).load(function(){
  $j('#secondary-ad-frame .vertext h3').css('textAlign','left')
  .each(function(index,elem) {
    var hldr = $j(elem);
    var text = hldr.text();
    var font = hldr.css('fontWeight') + " "+ hldr.css('fontSize') + " " + hldr.css('fontFamily');
    var color = hldr.css('color');
    var elem_width = hldr.innerHeight();   // height() doesn't work with Opera... somehow
    var elem_height = $j("#secondary-ad-frame .articleitem").outerHeight();
    hldr.css('width',elem_width);
    hldr.css('height',elem_height);
    //alert(elem_width+" "+elem_width/2+" "+elem_height+" "+elem_height/2);  // DEBUG
    hldr.html("");
    var R = Raphael(elem, elem_width, elem_height);
    var txt = R.text(elem_width/2, elem_height/2, text).attr({font: font}).attr({fill: color});
    txt.rotate(-90, true);
    R.safari();
  });
});
  
/* #######################
   #      Functions      #
   ####################### */
function fadeChildren (obj,qty) {
   obj.children('.browseProductLink').fadeTo('fast',qty);
   return obj;
}
function startAnimation () {
  $j(container_class).everyTime('10ms', 'slider',
    function () {
      if(ssacounter > tseconds*100)
      {
        ssacounter = 0;
        if( ssacurrent + 1 == $j(items_class, current_row_class).length )
        {
          nextRow();
        }
        nextSlide();
      }
      else
      {
        ssacounter++;
      }
    }
  );
}

function stopAnimation () {
  $j(container_class).stopTime('slider');
  ssacounter = 0;
}

function currentIndex (items, current_class) {
  for (var i = 0; i < items.length; i++)
  {
    if ($j(items.get(i)).hasClass(current_class))
    {
      return i;
    }
  }
  return -1;
}

function getSlideIndex (row_items, obj) {
  for (var i = 0; i < row_items.length; i++)
  {
    if ($j('img' , row_items.get(i)).attr('src') == obj.find('img').attr('src'))
    {
      return i;
    }
  }
  return -1;
}

function nextRow (this_row) {
  var rows = $j(row_class);
  var row_index = currentIndex(rows,current_row);
  var items = $j(items_class, current_row_class);
  hideInfo( $j(items.get(items.length - 1)) );
  $j(current_row_class).removeClass(current_row);
  row_index = this_row === undefined? (row_index + 1 < rows.length && row_index >= 0? row_index+1: 0) : this_row ;
  $j(row_class+':eq('+row_index+')').removeClass(current_row).addClass(current_row);
  $j(container_class).stop().animate({
    top: (fheight * row_index*-1)+'px'
  });
  ssacurrent = -1;
}

function nextSlide () {
  var items = $j(items_class, current_row_class);
  if (ssacurrent >= 0 && ssacurrent < items.length) {
    hideInfo( $j(items.get(ssacurrent)) );
  }
  ssacurrent = ssacurrent + 1 < items.length && ssacurrent >= 0? ssacurrent + 1: 0;
  showInfo( $j(items.get(ssacurrent)) );
}

function showInfo (obj) {
  //$j(this).appendTo('#advert1-wrapper');//.appendTo(ssaItems);
  var actualLeft = parseInt(obj.css('left'));
  var row_items = $j(items_class, current_row_class);
  var obj_index = getSlideIndex(row_items,obj);
  var relativeLeft = ( ssamodule_width / row_items.length ) * obj_index;
  var widthDiff = ( ssamodule_width / row_items.length ) - parseInt(obj.find('img').innerWidth());
  var moveLeft = row_items.length > 1 && widthDiff < 0? '-='+(-1*widthDiff) : 0;
  // remove first any class to avoid double class, those when hideInfo() is applied can remove the class completely
  obj.removeClass(current_item)
  .addClass(current_item)
  .css('z-index','10')
  .stop()
  .animate({
    left: (actualLeft == 0? 0 : (actualLeft == relativeLeft? moveLeft :relativeLeft ))
  });
  // set the cover
  obj.children('.ssa-cover').css({
    'background-color' : '#000',
    opacity : 0.0
  });//css('background','none');
  // set the text
  obj.children('.ssa-text').stop().animate({
    // opacity: 0.7,
    width: '200px'
  });
}

function hideInfo (obj) {
  //$j(this).appendTo('#advert1-wrapper');//.appendTo(ssaItems);
  var actualLeft = obj.css('left');
  var row_items = $j(items_class, current_row_class);
  var relativeLeft = ( ssamodule_width / $j(items_class, current_row_class).length ) * getSlideIndex(row_items,obj);
  obj.removeClass(current_item)
  .css('z-index','1')
  .stop()
  .animate({
    left: relativeLeft
  });
  // set the cover
  obj.children('.ssa-cover').css({
    'background-color' : '#fff',
    opacity : 0.6
  });//css('background','transparent url(/templates/funky_town/images/dotted_bigtest.gif) repeat top left');
  // set the text
  obj.children('.ssa-text').stop().animate({
    // opacity: 0.0,
    width: 0
  });
}

function showAll(obj) {
  obj.each(
    function(index,element) {
      if(!$j(this).hasClass(hovered_item))
        hideInfo($j(this));
    }
  );
  /* obj.stop().each(
    function(index, element) {
      $j(element).removeClass(current_item)
      .css('z-index','1')
      .animate({
        width: '240px',
        left: (960 / 4 * index)+'px'
      });
    }
  );
  obj.children('.ssa-cover').css('background','transparent url(/templates/funky_town/images/dotted_bigtest.gif) repeat top left'); */
}

function awakeSlider () {
  // set containers in javascript mode
  $j(module_class).css ({
    overflow: 'hidden'
  });
  $j(container_class).css({
    width : '100%'
  });
  // set text
  $j('.ssa-text', items_class).css({
    height : fheight,
    // width: '100px',
    // opacity: 0.4,
    top : 0
  });
  // set row
  $j(row_class+':eq(0)').addClass(current_row);
  // set current
  ssacurrent = - 1;
  showAll($j(items_class,current_row_class));
}

function hideControls() {
  $j(controls_class).stop().animate({
    bottom : ($j('.ssa-controls').innerHeight() / 2 * -1)+"px"
  });
}

function showControls() {
  $j(controls_class).stop().animate({
    bottom : 0
  });
}

function displayDebug (string, replace) {
  replace = replace === undefined? true : replace;
  if (replace) {
    $j("#debug").html('<br/>'+string);
  }
  else {
    $j("#debug").append('<br/>'+string);
  }
}

/* #####################
   #       Cufón       #
   ##################### */

Cufon.replace('#nav > li > a',{
  hover:true,
  fontFamily : 'hand-sean'
});
Cufon.replace('#secondary-ad-frame .virtuemart-mod-productname a',{
  hover:true,
  fontFamily : 'hand-sean'
});
Cufon.replace('#bottom-frame h3',{
  hover:true,
  fontFamily : 'hand-sean'
});
Cufon.replace('#left-frame h3',{
  hover:true,
  fontFamily : 'hand-sean'
});
Cufon.replace('.ssa-category',{
  hover:true,
  fontFamily : 'hand-sean'
});
Cufon.replace('#fb-albumimport h2, #lyftenbloggie h2, #contact-form h2',{
  hover:true,
  fontFamily : 'hand-sean'
});
Cufon.replace('#vmMainPage h1, #tourama h1, #page h1',{
  hover:true,
  fontFamily : 'hand-sean'
});
Cufon.replace('#vmMainPage h2',{
  hover:true,
  fontFamily : 'hand-sean'
});
Cufon.replace('.vm-productcollage h1',{
  hover:true,
  fontFamily : 'hand-sean'
});
/*Cufon.replace('.cufon-shadow', {
  textShadow: '#333 -1px -1px, #333 1px 1px'
});*/