/*
 *     Below is the format to use for each news item.
            <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
	        <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
	        <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
	        <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
	    
 */
var controller = (function($) {
	
	var itemTemplate = '<li class="news-item"></li>';
	
	var attributes,
		ticketHistory,		
		wwClient = qmatic.webwidget.client,
		attributeKeys = {
			BACKGROUND_COLOR   			: 'background.color',
			TEXT_COLOR      			: 'text.color',
			TEXT_FONT		            : 'text.font',
			TEXT						: 'text',
			DIRECTION					: 'direction',
			SPEED						: 'speed',
			SHOW_DURATION               : 'show.duration'				
		},
		attributeDefaults = {};
	
	
	
	attributeDefaults[attributeKeys.BACKGROUND_COLOR] = '#ffffff';
	attributeDefaults[attributeKeys.TEXT_COLOR] = '#E5EDFF';
	attributeDefaults[attributeKeys.TEXT_FONT] = 'Helvetica;34px;normal;normal';
	attributeDefaults[attributeKeys.TEXT] = 'This is the first text;This is the second text;This is the third text';
	attributeDefaults[attributeKeys.DIRECTION] = 'ltr';
	attributeDefaults[attributeKeys.SPEED] = '0.1';
	attributeDefaults[attributeKeys.SHOW_DURATION] = '2000';
	

	// Public contents of controller
	return {
		/**
		 * Called when widget client has finished loading. This is where you initialise your widget
		 */
		onLoaded : function(configuration) {
			
			$('#ticker').remove();
			$('#js-news').empty();
			
			var attr = configuration.attributes;
			var widgetWidth = configuration.width;
			
			var attribParser = new qmatic.webwidget.AttributeParser(attr || {}),
				defaultsParser = new qmatic.webwidget.AttributeParser(attributeDefaults),
				ak = attributeKeys,
				
				backgroundColor = 	attribParser.getString(ak.BACKGROUND_COLOR, attributeDefaults[ak.BACKGROUND_COLOR]),
				textColor = 		attribParser.getString(ak.TEXT_COLOR, attributeDefaults[ak.TEXT_COLOR]);
				
				var textFontSize = 		attribParser.getFontSize(ak.TEXT_FONT, defaultsParser.getFontSize(ak.TEXT_FONT));
				var textFontFamily = 	attribParser.getFontFamily(ak.TEXT_FONT, defaultsParser.getFontFamily(ak.TEXT_FONT));
				var textFontStyle = 	attribParser.getFontStyle(ak.TEXT_FONT, defaultsParser.getFontStyle(ak.TEXT_FONT));
				var textFontWeight = 	attribParser.getFontWeight(ak.TEXT_FONT, defaultsParser.getFontWeight(ak.TEXT_FONT));
				
				var showDuration = attribParser.getInteger(ak.SHOW_DURATION, defaultsParser.getInteger(ak.SHOW_DURATION));
				
				text = 				attribParser.getString(ak.TEXT, attributeDefaults[ak.TEXT]),				
				direction = 		attribParser.getString(ak.DIRECTION, attributeDefaults[ak.DIRECTION]),
				speed = 			attribParser.getString(ak.SPEED, attributeDefaults[ak.SPEED]);
				
				var fontHeight = Number(textFontSize.substring(0, textFontSize.length - 2)); // strip px off.
				var totaltHeightInPx = (fontHeight *2);
			
			attributes = attr;
			
			// This is a hack to change the default ticket-swipe color. Since the element is recreated each time, we need to override to global css.
			$("#ticker-swipe-style").html( 
					'#ticker-content { color:' + textColor + ';}; #ticker-content a { color:' + textColor + ';}; #ticker-swipe span {color:' + textColor + ';};'
			);
			
			// Parse and insert the text as li elements
			var texts = text.split(';');
			for(var i = 0; i < texts.length; i++) {
				var item = $(itemTemplate).text(texts[i]);
				$('#js-news').append(item);
			}
	  
			
			$('#js-news').ticker({
        		controls: false,
        		titleText: '',
        		direction: direction,
        		pauseOnItems: showDuration,
        		speed: speed
        	});
			
			$('#ticker-content').css('font-family', textFontFamily);
			$('#ticker-content').css('font-size', textFontSize);
			$('#ticker-content').css('font-style', textFontStyle);
			$('#ticker-content').css('font-weight', textFontWeight);
			
			$('#ticker').css('height', totaltHeightInPx + 'px');
			$('#ticker-swipe').css('height', totaltHeightInPx+'px');
			$('#ticker-swipe').css('width', widgetWidth);
			$('#ticker-swipe span').css('height', fontHeight+'px');
			$('#ticker-wrapper.has-js').css('height', totaltHeightInPx+'px');
			
			$('#ticker').css('width', configuration.width); 
			$('#ticker-wrapper').css('width', configuration.width);

            if(backgroundColor == 'transparent') {
                backgroundColor = '#FFFFFF';
            }

			$('#ticker-wrapper').css('background-color', backgroundColor);
			$('#ticker').css('background-color', backgroundColor);
			$('#ticker-content').css('background-color', backgroundColor);
			$('#ticker-swipe').css('background-color', backgroundColor);
			$('#ticker-swipe span').css('background-color', backgroundColor);
		},
		
		onLoadError : function(message) {
			$('body').append('<p>Widget load error: ' + message + '</p>');
		}
	};
	
	
})(jQuery);