<!-- the full contents of this file are included in the head block of your page -->
<!-- note to work we must start with the js/ directory, then the name of the folder -->



<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./js/ddSlick/jquery.ddslick.min.js"></script>
    


<script type="text/javascript">



// See: http://designwithpc.com/plugins/ddslick#demo

// This script creates a custom dropdown control with images and text.



// How To Use:



// ---------------------------------------------------------------------------------
// 1. Add a Code Block element to your form page, and copy/paste the following code
// into The * Raw Block Code * section:
// ---------------------------------------------------------------------------------

/*

// COPY FROM HERE:

<div id="myCustomDropdownDisplayProxy"></div>


<style type="text/css">
.form-output-div a:link { color:#333; text-decoration:none; }
.form-output-div a:visited { color:#333; text-decoration:none; }
.form-output-div a:hover { color:#333; text-decoration:none; }
.form-output-div a:active { color:#333; text-decoration:none; }

.dd-option-image, .dd-selected-image { max-width:128px; }

.dd-container li {
	margin-bottom: 0;
    padding: 0;
}

</style>



<script type="text/javascript">



// Change this value to match your select title:

var myCustomDropdownDisplayProxyTitle = "Select your preferred social network";

$('#myCustomDropdownDisplayProxy').ddslick({
	data:ddData,
	width:300,
	defaultSelectedIndex: null,
   	selectText: myCustomDropdownDisplayProxyTitle,
   	imagePosition:"right",
   	truncateDescription : false,
   	onSelected: function(d){
       	$('#myCustomDropdownValue').val(d.selectedData.value); // use .text for text description
   	}   
});

</ script>

// TO HERE

// ---------------------------------------------------------------------------------
// 2. Remove the space between / and s after pasting into RackForms
// ---------------------------------------------------------------------------------

*/

// ---------------------------------------------------------------------------------
// 3. Add a second code block element ABOVE the first, and provide plugin data in the format of:


// ---------------------------------------------------------------------------------

var ddData = [
    {
        text: "Facebook",
        value: 1,
        selected: false,
        description: "Description with Facebook",
        imageSrc: "//dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
    },
    {
        text: "Twitter",
        value: 2,
        selected: false,
        description: "Description with Twitter",
        imageSrc: "//dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
    },
    {
        text: "LinkedIn",
        value: 3,
        selected: false,
        description: "Description with LinkedIn",
        imageSrc: "//dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
    },
    {
        text: "Foursquare",
        value: 4,
        selected: false,
        description: "Description with Foursquare",
        imageSrc: "//dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
    }
];

// ---------------------------------------------------------------------------------
// 4. Add a hidden field below our first two fields, this field * MUST * have the name/value:
// myCustomDropdownValue
// ---------------------------------------------------------------------------------
</script>