/* globals define */
define(['knockout', 'jquery', 'css!./styles/design.css', 'text!./template.html'], 
function (ko, $, css, template) {
	'use strict';

	// ----------------------------------------------
	// Define a Knockout ViewModel for your template
	// ----------------------------------------------
	var SCF_AboutBrand = function (args) {
		var self = this,
			SitesSDK = args.SitesSDK;

		// store the args
		self.mode = args.viewMode;
		self.id = args.id;

		// create the observables
		self.layout = ko.observable();
		self.linkURL = ko.observable();
		self.linkText = ko.observable();


		// handle initialization 
		self.componentLayoutInitialized = ko.observable(false);
		self.customSettingsDataInitialized = ko.observable(false);
		self.initialized = ko.computed(function () {
			return self.componentLayoutInitialized() && self.customSettingsDataInitialized();
		}, self);

		//
		// Raise the given trigger.
		//
		self.raiseTrigger = function (triggerName) {
			SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
				'triggerName': triggerName,
				'triggerPayload': {
					'payloadData': 'some data here'
				}
			});
		};

		// click binding
		self.imageClicked = function (data, event) {
			self.raiseTrigger("imageClicked"); // matches appinfo.json
		};


		// execute action handler
		self.executeActionsListener = function (args) {
			// get action and payload
			var payload = args.payload,
				action = args.action;

		};

		//
		// Seed nested component data
		//
		self.titleData = {
		};
		self.paragraphData = {
		};
		self.linkData = {
		};
			self.buttonData = {	
		};
		

		// 
		// Handle property changes
		//
		self.updateComponentLayout = $.proxy(function (componentLayout) {
			self.componentLayoutInitialized(true);
		}, self);
		
		self.updateCustomSettingsData = $.proxy(function (customData) {
			if (customData) {
				self.linkURL(customData.linkURL);
				self.linkText(customData.nls && customData.nls.linkText);
			}			
			self.customSettingsDataInitialized(true);
		}, self);
		
		self.updateSettings = function (settings) {
			if (settings.property === 'componentLayout') {
				self.updateComponentLayout(settings.value);
			} else if (settings.property === 'customSettingsData') {
				self.updateCustomSettingsData(settings.value);
			}
		};

		// listen for the EXECUTE ACTION request to handle custom actions
		SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, $.proxy(self.executeActionsListener, self));
		// listen for settings update
		SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(self.updateSettings, self));

		
		// Handle Copy Style (save customSettingsData to the clipboard)
		self.copyComponentCustomData = function() {
		};
		
		// Handle Paste Style (apply customSettingsData from the clipboard)
		self.pasteComponentCustomData = function(data) {
		};
		
		// listen for COPY_CUSTOM_DATA request
		SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.COPY_CUSTOM_DATA, $.proxy(self.copyComponentCustomData, self));

		// listen for PASTE_CUSTOM_DATA request
		SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.PASTE_CUSTOM_DATA, $.proxy(self.pasteComponentCustomData, self));
		
		//
		// Initialize the componentLayout & customSettingsData values
		//
		SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
		SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);		
	};


	// ----------------------------------------------
	// Create a knockout based component implemention
	// ----------------------------------------------
	var SCF_AboutBrandImpl = function (args) {
		// Initialze the custom component
		this.init(args);
	};
	// initialize all the values within the component from the given argument values
	SCF_AboutBrandImpl.prototype.init = function (args) {
		this.createViewModel(args);
		this.createTemplate(args);
		this.setupCallbacks();
	};
	// create the viewModel from the initial values
	SCF_AboutBrandImpl.prototype.createViewModel = function (args) {
		// create the viewModel
		this.viewModel = new SCF_AboutBrand(args);
	};
	// create the template based on the initial values
	SCF_AboutBrandImpl.prototype.createTemplate = function (args) {
		// create a unique ID for the div to add, this will be passed to the callback
		this.contentId = args.id + '_content_' + args.viewMode;
		// create a hidden custom component template that can be added to the DOM
		this.template = '<div id="' + this.contentId + '">' + template + '</div>';
	};
	//
	// SDK Callbacks
	// setup the callbacks expected by the SDK API
	//
	SCF_AboutBrandImpl.prototype.setupCallbacks = function () {
		//
		// callback - render: add the component into the page
		//
		this.render = $.proxy(function (container) {
			var $container = $(container);
			// add the custom component template to the DOM
			$container.append(this.template);
			// apply the bindings
			ko.applyBindings(this.viewModel, $('#' + this.contentId)[0]);
		}, this);
		//
		// callback - update: handle property change event
		//
		this.update = $.proxy(function (args) {
			var self = this;
			// deal with each property changed
			$.each(args.properties, function (index, property) {
				if (property) {
					if (property.name === 'customSettingsData') {
						self.viewModel.updateComponentData(property.value);
					} else if (property.name === 'componentLayout') {
						self.viewModel.updateLayout(property.value);
					}
				}
			});
		}, this);
		//
		// callback - dispose: cleanup after component when it is removed from the page
		//
		this.dispose = $.proxy(function () {
			// nothing required for this sample since knockout disposal will automatically clean up the node
		}, this);
	};
	// ----------------------------------------------
	// Create the factory object for your component
	// ----------------------------------------------
	var sampleSCF_AboutBrand = {
		createComponent: function (args, callback) {
			// return a new instance of the component
			return callback(new SCF_AboutBrandImpl(args));
		}
	};
	return sampleSCF_AboutBrand;
});