$('#q').typeahead({
    minLength: 1,
    group: true,
    dynamic: true,
    groupMaxItem: 6,
    hint: true,
    searchOnFocus: true,
    mustSelectItem: true,
    filter: false,

    source: {
        'Facebook Post': {
            ajax: function (query) {
                return {
                    type: 'GET',
                    url: '/api/WebsiteHeaderSearch?type=facebookPost',
                    path: 'data',

                    data: {
                        q: '{{query}}'
                    }
                }
            },

            href: '{{Url}}',
            display: ['Title', 'Date', 'Image'],

            template: function (query, item) {
                var template = '<img class="pull-left typeahead-img" src="{{Image}}" /><strong>{{Title}}</strong> <div class="typeahead__metadata">{{Date}}</div>';

                return template;
            }
        },

        'Student': {
            ajax: function (query) {
                return {
                    type: 'GET',
                    url: '/api/WebsiteHeaderSearch?type=student',
                    path: 'data',

                    data: {
                        q: '{{query}}'
                    }
                }
            },

            href: '{{Url}}',
            display: ['FName', 'LName', 'Image', 'School', 'SchoolYear'],

            template: function (query, item) {
		if(Image == "null"){
			var template = '<img class="pull-left typeahead-img" src="{{Image}}" /><strong>{{FName}} {{LName}} </strong><div class="typeahead__metadata">{{School}} <br/>{{SchoolYear}}</div>';
                	return template;
		}else{
			var template = '<strong>{{FName}} {{LName}} </strong><div class="typeahead__metadata">{{School}} <br/>{{SchoolYear}}</div>';
               	 	return template;
		}		
                
            }
        }
    },

    callback: {
        onClickAfter: function (node, a, item, event) {
            window.open(item.href, '_self');

            $('#result-container').text('');
        },

        onResult: function (node, query, obj, objCount) {
            var text = '';
            if (query !== '') {
                text = objCount + ' elements matching "' + query + '"';
            }

            $('#result-container').text(text);
        }
    },

    debug: true
});