// Jumbotron - need to convert to jQuery plugin

var currentPanel = 0;
var jumboDelay = 7000;
var animateTime = 1000;
var overlaySlideUp = 400;
var overlaySlideDown = 500;
var overlayDelay = 1500;
var overlayDuration = 5500;
var jumboTimer, jumboOverlayShowTimer, jumboOverlayHideTimer, panelWidth, panelLeftValue, jumboNavWidth, jumboNavLeftValue;
var $jumboPanels, $jumboNav;
var animating = 0;

function jumbotronInit(){
  $jumboPanels = jQuery('.jumbotron .panels ul');
  $jumboNav = jQuery('.jumboNav ul');
  //grab the panel width and calculate left value
  panelWidth = $jumboPanels.children().outerWidth();
  panelLeftValue = panelWidth * (-1);
  //move the last item before first item, just in case user click prev button
  $jumboPanels.children().first().before($jumboPanels.children().last());
  //set the default item to the correct position
  $jumboPanels.css({'left' : panelLeftValue});

  //grab the nav width and calculate left value
  jumboNavWidth = $jumboNav.children().outerWidth();
  jumboNavLeftValue = jumboNavWidth * (-1);

  //clone last item and put it as  first item, just in case user click prev button
  $jumboNav.children().first().before($jumboNav.children().clone().addClass('clone').last());

  //set the default item to the correct position
  $jumboNav.css({'left' : jumboNavLeftValue});

  showOverlayTimeout();
  setJumboTimer();
}

function showOverlayTimeout(fromTimer){
  if(typeof fromTimer == 'undefined'){ var fromTimer=1; }
  clearTimeout(jumboOverlayShowTimer);
  clearTimeout(jumboOverlayHideTimer);
  jumboOverlayShowTimer=setTimeout(function(){ showOverlay(1); }, overlayDelay);
  if(fromTimer == 1){
    jumboOverlayHideTimer=setTimeout(function(){ showOverlay(0); }, overlayDuration);
  }
}

function showOverlay(show){
  if(show==1){
    /* Don't show overlay for smaller screens */
    if(jQuery(window).width() >= 480){
      jQuery(".jumbotron .textOverlay").slideDown(overlaySlideDown);  
    }
  } else {
    jQuery(".jumbotron .textOverlay").slideUp(overlaySlideUp);  
  }
}

function buildJumbotron(){
	// Reset jumbotron
	jQuery(".jumboNav").html('');
	jQuery(".jumbotron .nextprev, .jumbotron .navtitle, .jumbotron .jumboNavNext, .jumbotron .jumboNavPrev,.jumbotron #navIndicator, .jumbotron .textOverlay").remove();
	currentPanel=0;
	clearInterval(jumboTimer);

	var strPanels="<ul>";
	for(var i=0; i<arJumbotron.length; i++){
		strPanels += '<li id="jpanel_'+i+'">';
		if(i==0){
			strPanels += '<a href="'+arJumbotron[i].link+'"><img src="'+arJumbotron[i].src+'" /></a>'
		} else {
			strPanels += "&nbsp;";
		}
		strPanels += '</li>';
	}
	strPanels += "</ul>";
	jQuery(".jumbotron .panels").html(strPanels);
  strTextOverlay='<div class="textOverlay"><div class="title title_0">'+convertToHTML(arJumbotron[0].title)+'</div><div class="subtitle">'+convertToHTML(arJumbotron[0].subtitle)+'</div></div>';
  strPrev="<div class=\"jumboNavPrev\"><a href=\"#\" onclick=\"jumboClick('-');return false;\"><div class=\"jumboNavPrevImg\"></div></a></div>";
  strNext="<div class=\"jumboNavNext\"><a href=\"#\" onclick=\"jumboClick('+');return false;\"><div class=\"jumboNavNextImg\"></div></a></div>";
  jQuery('.jumbotron .panels').after(strPrev + strTextOverlay + strNext);

	// Build Next/Previous buttons
	var strPrevNext="";
	strPrevNext+='<div class="navtitle" onclick="jumboClick(\'-\');">TOP<br/ ><span>'+arJumbotron.length+'</span></div>';
	strPrevNext+='<div class="nextprev leftNav"><a href="#" onclick="jumboClick(\'-\');return false;"><div class="prevButton"></div></a></div>';
	strPrevNext+='<div class="nextprev rightNav"><a href="#" onclick="jumboClick(\'+\');return false;"><div class="nextButton"></div></a></div>';
	jQuery('.jumbotron').append(strPrevNext);

	// Build Nav
	var strNav="<ul>";
  var numColors=5;
	for(var i=0; i<arJumbotron.length; i++){
		strNav += '<li id="jumboNav_'+i+'" class="jumboNav_'+i%numColors+'">';
		strNav += '<div class="details"><a href="'+arJumbotron[i].link+'"> <img src="'+arJumbotron[i].thumb+'" class="reflect" /><div class="navNum">'+eval(i+1)+'</div><div class="title">'+convertToHTML(arJumbotron[i].title)+'</div></a></div></li>';
	}
	strNav += "</ul>";

	jQuery(".jumboNav").html(strNav);

	jumbotronInit();
}

function convertToHTML(str){
  return jQuery('<span />', { html: str }).text();
}

function jumboClick(dir,fromTimer){
	if(!animating){
		var numPanels=arJumbotron.length;
		if(typeof fromTimer=='undefined') { fromTimer=0; }
		if(fromTimer==0){
			clearInterval(jumboTimer);
		}

		if(dir=="+"){
			var nextPanel=currentPanel+1;
		} else if (dir=='-') {
			var nextPanel=currentPanel-1;
		} else if (!isNaN(dir)){
			var nextPanel=dir;
		}

		if(nextPanel >= numPanels){ nextPanel = 0; }
		if(nextPanel < 0){ nextPanel=numPanels-1; }

		var $nextPanel=jQuery("#jpanel_"+nextPanel);

		currentPanel=nextPanel;

		switch (arJumbotron[nextPanel].panelType){
			case 'image':
				if($nextPanel.html().length < 10){
					$nextPanel.html('<a href="'+arJumbotron[nextPanel].link+'"><img src="'+arJumbotron[nextPanel].src+'" /></a>');
				}
				jumboAnimate(dir, currentPanel, fromTimer);
			break;
			case 'ajax':
				if($nextPanel.html().length < 10){
					$nextPanel.load(arJumbotron[nextPanel].src, function() {
						jumboAnimate(dir, currentPanel, fromTimer);
					});
				} else {
					jumboAnimate(dir, currentPanel, fromTimer);
				}
			break;
		}
    currentPanel=nextPanel;
	}
}

function jumboAnimate(dir, oldPanel, fromTimer){
	animating=1;

	switch (dir) {
		case '-':
			//get the right position
			var panelLeftIndent = parseInt($jumboPanels.css('left')) + panelWidth;

			//slide the item
			$jumboPanels.stop(true,true).animate({'left' : panelLeftIndent}, animateTime, function () {
				//move the last item and put it as first item
				$jumboPanels.children().first().before($jumboPanels.children().last());
				//set the default item to correct position
				$jumboPanels.css({'left' : panelLeftValue});
				animating=0;
			});

			//get the right position of nav
			var navLeftIndent = parseInt($jumboNav.css('left')) + jumboNavWidth;

			//slide the nav item
      jQuery(".jumbotron .textOverlay").hide();

			$jumboNav.stop(true,true).animate({'left' : navLeftIndent}, animateTime, function () {
        jQuery(".jumbotron .textOverlay").hide();
				//remove clone class from 1st el
				jQuery("li", $jumboNav).first().removeClass('clone');
				//clone 2nd to last item and put it as last item
				$jumboNav.children().first().before(jQuery("li", $jumboNav).eq(arJumbotron.length-1).clone().addClass('clone'));
				//remove last element
				jQuery("li", $jumboNav).last().remove();
				//set the default item to correct position
				$jumboNav.css({'left' : jumboNavLeftValue});

        //text overlay
        jQuery(".textOverlay .title").attr('class','').addClass('title title_'+currentPanel%5);
        jQuery(".textOverlay .title").html(convertToHTML(arJumbotron[currentPanel]['title']));
        jQuery(".textOverlay .subtitle").html(convertToHTML(arJumbotron[currentPanel]['subtitle']));
        showOverlayTimeout(fromTimer);
			});
		break;
    default:
		  //get the right position
		  var panelLeftIndent = parseInt($jumboPanels.css('left')) - panelWidth;
		  //slide the item
		  $jumboPanels.animate({'left' : panelLeftIndent}, animateTime, function () {
			  //move the first item and put it as last item
			  $jumboPanels.children().last().after($jumboPanels.children().first());
			  //set the default item to correct position
			  $jumboPanels.css({'left' : panelLeftValue});
			  animating=0;
		  });

		  //get the right position of nav
		  var navLeftIndent = parseInt($jumboNav.css('left')) - jumboNavWidth;

		  //clone non-cloned first item and put it as last item
		  $jumboNav.children().last().after(jQuery("li:not(.clone)", $jumboNav).eq(0).clone());
		  jQuery("li:not(.clone)", $jumboNav).eq(0).addClass('clone');
      
      jQuery(".jumbotron .textOverlay").hide();
		  //slide the item
		  $jumboNav.stop(true,true).animate({'left' : navLeftIndent}, animateTime, function () {
			  //remove first cloned nav
			  $jumboNav.children('.clone').first().remove();
			  //set the default item to correct position
			  $jumboNav.css({'left' : jumboNavLeftValue});
        //text overlay
        jQuery(".textOverlay .title").attr('class','').addClass('title title_'+currentPanel%5);
        jQuery(".textOverlay .title").html(convertToHTML(arJumbotron[currentPanel]['title']));
        jQuery(".textOverlay .subtitle").html(convertToHTML(arJumbotron[currentPanel]['subtitle']));
        showOverlayTimeout(fromTimer);
		  });
    break;
	}
}

function setJumboTimer(){
	jumboTimer=setInterval(function(){
		jumboClick('+',1);
	}, jumboDelay);
}

(function ($) {
  // For resize
  var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
    };
  })();
  $(window).resize(function () {
    waitForFinalEvent(function(){
      buildJumbotron();
    }, 500, "jumbotronResize");
  });
}(jQuery));

;
/*
 * main navigation
 */
var navOverlay = {
	currentID: null,
	mainNavElement: '#region-menu .block-system-main-menu',
	mainNavTimer: null,
  subNavWrapper: this.mainNavElement + ' ul.menu li .subNav',
  currentChannelName: null,
	disableSubnavHide:0,
	subChannelTimer: null,
	currentSubChannelID: null,
  magazineImg: '/sites/all/modules/custom/circmag_float/images/circ_magazine_cover.png',
  magazineLink: 'https://secure.palmcoastd.com/pcd/eSv?iMagId=0815B&i4Ky=I652',
  sponsorImg: '',
  sponsorLink: ''
};

/*
 * init function
 */
navOverlay.init = function(id){
	if(typeof id != 'undefined'){
		this.mainNavElement = id;
	}
  this.formatMenu();

	jQuery(this.mainNavElement+" ul.menu li").not(this.mainNavElement+" ul.menu li ul li").mouseenter(
		function(){
      this.currentID = navOverlay.getMenuIdFromClasses(jQuery(this).attr('class'));
      navOverlay.currentChannelName = jQuery('a', this).html();
      navOverlay.showSubnav(this.currentID);
		}
	).mouseleave( function(){
		navOverlay.delayHideSubnav();
  });

	jQuery(this.subNavWrapper).mouseenter(
		function(){ clearTimeout(navOverlay.mainNavTimer); }
	).mouseleave(
		function(){	navOverlay.delayHideSubnav(); }
	);
};

/*
 * Format menu
 *
 */
navOverlay.formatMenu = function(){
  var $this=this;
  jQuery(this.mainNavElement + " ul.menu li ul").wrap('<div class="subNav" />');
  jQuery(this.mainNavElement + " ul.menu li ul").prepend("<h6>Subchannels:</h6>");
  jQuery(this.mainNavElement + " ul.menu li ul").show();
  jQuery(this.mainNavElement + " ul.menu li ul li").prepend("<span></span>");
  jQuery(this.mainNavElement + " ul.menu li.expanded").each(
    function(){
      var circAd = '<div class="circ-ad"><a href="'+$this.magazineLink+'" target="_blank"><div class="cover-img"><img src="'+$this.magazineImg+'" /></div><p>&raquo; Subscribe to Maxim Magazine</p></a></div>';
      var sponsorAd = '';
      if($this.sponsorImg.length){
        sponsorAd = '<div class="sponsor-ad"><a href="'+$this.sponsorLink+'" target="_blank"><img src="'+$this.sponsorImg+'" /></a></div>';
      }
      var channel = jQuery('a:first', this).html();
      jQuery('ul', this).after(circAd + sponsorAd + '<div class="subnav_subchannel_feature"></div><ul class="nav_articles"><h3>Featured ' + channel + ':</h3></ul><ul class="nav_tv"><h3>Maxim TV:</h3></ul>');
    }
  );
}

/*
 * Get menu name and link from ID
 */
function getMenuLink(id){
  return [jQuery(".mtid-"+id + ' a:first').html(), jQuery(".mtid-"+id + ' a:first').attr('href')];
}

/*
 * Show menu dropdown
 */
navOverlay.showSubnav = function(id){
  clearTimeout(this.mainNavTimer);
 	this.hideSubnav();
	this.currentID = id;
  jQuery(".mtid-"+id).addClass('over');
  jQuery(".region-header-second").css('visibility','hidden'); // Hide top nav to prevent bleed thru
  jQuery(this.mainNavElement+" ul.menu li.over .subNav").show();
	jQuery(this.mainNavElement+" ul.menu li.over .subNav li").removeClass("selected");
  jQuery(this.mainNavElement+" ul.menu li.over .subNav li:eq(0)").addClass("selected");
  this.getChannelData(id);

  // Get first subchannel featured article
  if(jQuery(this.mainNavElement+" ul.menu li.over .subNav").length != 0){
    subChannelID = this.getMenuIdFromClasses(jQuery(this.mainNavElement+" ul.menu li.over .subNav li.selected").attr('class'));
    this.getSubchannelData(subChannelID, 0);
  }

	jQuery(this.mainNavElement+" ul.menu li.over .subNav ul li").mouseenter(
		function(){
			jQuery(this).parent().children('li').removeClass('selected');
			jQuery(this).addClass('selected');
      subChannelID = navOverlay.getMenuIdFromClasses(jQuery(this).attr('class'));
      navOverlay.getSubchannelData(subChannelID, 1);
		}
	);

	// fix for mouse over maxim logo (IE)
	jQuery(".logo-img img").mouseenter(
		function(){	navOverlay.disableSubnavHide=1;	}
	).mouseleave(
		function(){ navOverlay.disableSubnavHide=0;	}
	);
}

navOverlay.delayHideSubnav = function(){
	this.mainNavTimer = setTimeout(function(){
		navOverlay.hideSubnav();
	}, 250);
};

navOverlay.hideSubnav = function(){
	if(!this.disableSubnavHide){
		jQuery(this.mainNavElement + " li.over").removeClass('over');
		jQuery(this.mainNavElement + " ul.menu li .subNav").hide();
    jQuery(".region-header-second").css('visibility','visible');
	}
};

/*
 * Get menu id from class
 */
navOverlay.getMenuIdFromClasses = function($classes){
  var menuID='';
  var classList = $classes.split(/\s+/);
  for (i = 0; i < classList.length; i++) {
    if(classList[i].indexOf('mtid-') > -1){
      var menuID=classList[i].replace('mtid-','');
      break;
    }
  }
  return menuID;
}

/*
 * Get channel data using ajax
 */
navOverlay.getChannelData = function(id, navName){
  if(jQuery(".mtid-"+id).data("nav_featured_list")){
    jQuery(".mtid-"+id+" .nav_articles").html(jQuery(".mtid-"+id).data("nav_featured_list"));
  } else {
    //console.log('ajax: /menu-channel/'+id);
	  jQuery.ajax({
		  url: '/menu-channel/'+id,
		  dataType: 'JSON',
		  success: function(resp){
        str = navOverlay.buildChannelFeatured(resp, id);
        jQuery(".mtid-"+id).data("nav_featured_list", str);
        jQuery(".mtid-"+id+" .nav_articles").html(str);
      }
	  });
  }
  if(jQuery(".mtid-"+id).data("nav_tv_list")){
    jQuery(".mtid-"+id+" .nav_tv").html(jQuery(".mtid-"+id).data("nav_tv_list"));
  } else {
/*     console.log('ajax: /menu-video/'+id); */
	  jQuery.ajax({
		  url: '/menu-video/'+id,
		  dataType: 'JSON',
		  success: function(resp, textstatus){
        str = navOverlay.buildChannelTV(resp);
        jQuery(".mtid-"+id).data("nav_tv_list", str);
        jQuery(".mtid-"+id+" .nav_tv").html(str);
		  }
	  });
  }
}

/*
 * Build Channel tv list
 */
navOverlay.buildChannelTV = function(data){
  str = "<h3>Maxim TV:</h3>";
  if(data.featured && data.featured.length){
    for(var i=0; i < data.featured.length; i++){
      if(i==0){
        str += '<li class="feature">';
        str += '<a href="' + data.featured[i].item.path + '">';
        str += '<figure><img src="' + data.featured[i].item.thumb + '" /></figure>';
        str += '<h2>' + data.featured[i].item.title + '</h2></a>';
      } else {
        str += '<li>';
        str += '<a href="' + data.featured[i].item.path + '">' + data.featured[i].item.title + '</a>';
      }
      str += '</li>';
    }
  }
  return str;
}

/*
 * Build Channel featured list
 */
navOverlay.buildChannelFeatured = function(data, id){
  var channelData = getMenuLink(id);
  str = "<h3>Featured " + channelData[0] + ":</h3>";
  if(data.featured && data.featured.length){
    for(var i=0; i < data.featured.length; i++){
      if(i==0){ str+='<li class="clearfix">'; } else { str+='<li>'; }
      str += '<a href="' + data.featured[i].item.path + '"><figure><img src="' + data.featured[i].item.thumb + '" /></figure><h2>' + data.featured[i].item.title + '</h2></a></li>';
    }
    str += '<div class="morelink">&raquo; <a href="' + channelData[1] + '">more ' + channelData[0].toLowerCase() + ' articles</a></div>';
  }
  return str;
}

/*
 * Get subchannel data using ajax
 */
navOverlay.getSubchannelData = function(id, level){
  if(typeof level == 'undefined') { level = 0; }
  var mainChannelID = this.currentID;

  if(this.currentSubChannelID!=id){
		this.currentSubChannelID=id;
    if(jQuery(".mtid-"+id).data("subchannel_feature")){
      jQuery(".mtid-"+mainChannelID+" .subnav_subchannel_feature").html(jQuery(".mtid-"+id).data("subchannel_feature"));
    } else {
      // if top level, don't delay loading of featured article
		  if(level != 0){
			  clearTimeout(this.subChannelTimer);
			  var timeout=100;
		  } else {
			  var timeout=0;
		  }
      this.subChannelTimer = setTimeout(function(){
        //console.log('ajax: /menu-subchannel/'+id);
			  jQuery.ajax({
				  url: '/menu-subchannel/'+id,
				  dataType: 'JSON',
				  success: function(resp){
            str = '';
            if(resp.featured && resp.featured.length){
    					str = navOverlay.buildSubchannelFeatured(resp);
            }
            jQuery(".mtid-"+mainChannelID+" .subnav_subchannel_feature").html(str);
            jQuery(".mtid-"+id).data("subchannel_feature", str);
				  }
			  });
		  }, timeout);
    }
  }
};

/* Display subchannel featured block */
navOverlay.buildSubchannelFeatured = function(data){
  str = '';
  if(data.featured.length){
    str += '<a href="' + data.featured[0].item.path + '"><figure><img src="' + data.featured[0].item.thumb + '" /></figure><h2>' + data.featured[0].item.title + '</h2></a><p>' + data.featured[0].item.summary + '</p>';
    //str += '<h2>' + data.featured[0].item.title + '</h2><figure><img src="' + data.featured[0].item.thumb + '" /></figure><p>Lorem Ipsum</p>';
  }
  return str;
}

jQuery(document).ready(function(jQuery) {
  navOverlay.init('#region-menu .block-system-main-menu');
})
;

