Call to Action module

# Call to Action module

This module include two generic plugins that are used for marketing purposes.

1. [Call to Action Buttons](http://kgit.html5video.org/pulls/668/modules/CallToAction/tests/ActionButtons.qunit.html) - Can show buttons as "End Screen" or part of "Related Screen"
2. [Call to Action Data Collect Form](http://kgit.html5video.org/pulls/668/modules/CallToAction/tests/ActionForm.qunit.html) - Can show data collection form at "Start Screen", "End Screen", <Time>, <Percent>%

### Action Buttons Config

 - ```displayOn``` - On which screen to show the buttons, can be either ```end``` or ```related``` screens.
 - ```customDataKey``` - Which key to use in custom metedata, default: ```ActionButtons```
 - ```openInNewWindow``` - When clicking on button should the link be open in new window. default: ```true```
 - ```actions``` - Array of JSON objects that used to render the data.
 - ```templatePath``` - Which template file to load and used to draw the buttons.
   - ```../CallToAction/templates/action-buttons.tmpl.html``` - Standalone button screen
   - ```../CallToAction/templates/action-buttons-related.tmpl.html``` - Button part of related screen
 - ```template``` - Override the ```templatePath``` with a string that represents the template.

#### Using Actions defined in custom data

In order to use actions that define in entry custom data, you need:
1. Use the flashVar ```metadataProfileId``` to select which metadata profile the player will use.
2. Add a field to the selected profile that will store the buttons JSON. By default the plugin will use ```ActionButtons``` key but you can override using ```customDataKey```.
3. Edit an Entry and in the field you created paste a JSON that represent the action buttons structure.

```json
{"openInNewWindow":false,"actions":[{"id":"product","label":"Download Now","url":"http://www.myproduct.com"}]}
```

### Data Collect Form Config

 - ```displayOn``` - When to show the form
   - ```start``` - Show on start screen
   - ```end``` - Show on end screen
   - ```<time>``` - Show in specific second. ie: ```5``` will show the form when reaching to 5 seconds
   - ```<percentage>``` - Show in specific time based on percentage. ie: ```10%```
 - ```submitRequired``` - Does the user must submit the form in order to continue watching the video? default: ```false```
 - ```templatePath``` - Which template file to load and used to draw the form.
 - ```template``` - Override the ```templatePath``` with a string that represents the template.
 - ```fields``` - Define the form fields

#### How to change which fields are display and how the form looks?
You can use the ```fields``` attribute to change the form fields. 
Example:
```javascript
'flashvars': {
	'actionForm': {
		plugin: true,
		displayOn: 'start',
		fields: [
			{
				name: 'name',
				placeholder: 'Name',
				type: 'text',
				required: true
			},
			{
				name: 'email',
				placeholder: 'Email',
				type: 'email',
				required: true
			},
			{
				name: 'phone',
				placeholder: 'Phone Number',
				type: 'text'
			}
		]
	}
}
```

#### How to change the CSS of the form?
In order to apply custom CSS rules, you need to edit the uiConf JSON config and edit the ```cssFiles``` property. for example:
```json
"layout":{
      "skin": "kdark",
	   "cssFiles":[
	   	   "http://www.foo.com/css/myform.css"
	   ]
   }
```
The same apply for CTA buttons.

Please review & merge