jQuery(document).ready(function(){
    
    blackTVSection.initFacts();
    blackTVSection.initCountdown();
    blackTVSection.initScrollbar();

	jQuery('.countdownContainer').mouseover(function(){
		jQuery('.blackTvPopup').show();
	});
	
	jQuery('.zeltaPopupClose').click(function(event){
		event.preventDefault();
		jQuery('.blackTvPopup').hide();
	});
	
});

var blackTVSection = {
    
    initFacts : function()
    {
        var cycleElement = jQuery('div.cycleBlackTvFacts');
        if (cycleElement.length)
        {
            cycleElement.cycle({
                prev : "#left",
                next : '#right',
                timeout : 8000
            })
        }
    },
	
	initCountdown : function()
	{
		var countdownStarted = false;
		
		var countdownBox = jQuery('.countdown');
		
		if(typeof blackTVCounter == 'undefined')
		{
			return false;
		}
		// clone static countdown node in memory (the plugin will be run on this one)
	    var internalCountdown = countdownBox.clone(true);
	
	    // create custom layout for the countdown plugin
	    // by loading the static node and replacing all values with placeholders for the plugin data
	    var customLayout = countdownBox.clone(true);
	    customLayout.find('.days').html('{dn}');
	    customLayout.find('.hours').html('{hnn}');
	    customLayout.find('.minutes').html('{mnn}');
	    customLayout.find('.seconds').html('{snn}');
	
		// load graphic symbol html into a new node
	    var graphicSymbolsHtml = jQuery.ajax({
	        url: blackTVCounter.graphicSymbolsHtmlUrl,
	        async: false,
	        dataType: 'html'
	    }).responseText;
	    
	    var graphicSymbols = jQuery('<div style="position: absolute; top: -1000px; left: -1000px;" />').html(graphicSymbolsHtml);
    	graphicSymbols.appendTo(jQuery('body'));
    	
		// create dynamic countdown template node by cloning the static countdown node and removing all values
	    var graphicCountdown = countdownBox.clone(true);
	    graphicCountdown.find('.field').html('');
	
	    // insert separator images into countdown template
	    var separator = graphicSymbols.find('.countdownSymbol.symbolSeparator');
	    graphicCountdown.find('.separator').append(separator.clone(true));
	
	    // run countdown on the static text node (invisible when javascript is on)
	    // and update graphic countdown on each tick
	    
		internalCountdown.countdown({
	        'until': blackTVCounter.until,
	        'layout': customLayout.html(),
	        onTick: function()
	        {
	            // read all field values from the internal text countdown node
	            // and write them char by char as images to the dynamic graphic countdown node
	            var fields = ['days', 'hours', 'minutes', 'seconds'];
	            for (var i=0; i<fields.length; i++)
	            {
	                var fieldSelector = '.'.concat(fields[i]);
	                blackTVSection.writeImageText( graphicCountdown.find(fieldSelector), jQuery(this).find(fieldSelector), graphicSymbols);
	            }
	
	            // on first tick replace static countdown node with the dynamic one
	            if (!countdownStarted)
	            {
	                countdownBox.replaceWith( graphicCountdown );
	                countdownStarted = true;
	            }
	        }
	    });	
		
	},
	writeImageText : function(target, source, symbols)
    {
        var targetContent = jQuery('<span />');
        var text = source.text();

        for (var i=0; i<text.length; i++)
        {
            var symbol = text.charAt(i);

            var symbolSelector = '.countdownSymbol.symbol'.concat(symbol);
            var symbolNode = symbols.find(symbolSelector);
            if (symbolNode.size() != 1)
            {
                continue; // symbol node not found, skip uncrecognized chars
            }
            var clonedNode = symbolNode.clone(true);
            targetContent.append(clonedNode);

        }
        target.html(targetContent.html());
    },
	initScrollbar : function()
	{
		var scrollArea = jQuery('#scroll-area');
	    if(scrollArea.length > 0)
	    {
		
			var scrollbar = jQuery('.scrollbar');
			var viewportHeight = jQuery('.viewport').outerHeight() + 10;
			var overviewHeight = jQuery('.overview').innerHeight(); 
			if(overviewHeight > viewportHeight)
			{
				jQuery('#scroll-area').tinyscrollbar(); 
				scrollbar.show();
			}
	    }
	}

}