var iconhead={
    title:"Icon Heading Shortcode",
    id :'oscitas-form-iconhead',
    pluginName: 'iconhead',
    setRowColors:false
};

(function() {
    _create_tinyMCE_options(iconhead,800);
})();


function create_oscitas_iconhead(pluginObj){
    if(jQuery(pluginObj.hashId).length){
        jQuery(pluginObj.hashId).remove();
    }
    // creates a form to be displayed everytime the button is clicked
    // you should achieve this using AJAX instead of direct html code like this

    var iconhead_fa='';
    /*if(ebs.ebs_fa_inclusion==1){
        iconhead_fa='<h4>Font Awesome</h4><ul name="oscitas-heading-icon_servicebox" class="oscitas-heading-icon">'+ebsfaicons+'</ul>';
    }*/
    iconhead_fa='<h4>Font Awesome</h4><ul name="oscitas-heading-icon_servicebox" class="oscitas-heading-icon">'+ebsfaicons+'</ul>';
    // creates a form to be displayed everytime the button is clicked
    // you should achieve this using AJAX instead of direct html code like this
    var form = jQuery('<div id="'+pluginObj.id+'" class="oscitas-container" title="'+pluginObj.title+'"><table id="gallery-table" class="form-table">\
			<tr>\
				<th><label for="oscitas-heading-icon">Select Icon:</label></th>\
				<td><div id="click_icon_list" class="oscitas-icon-div"><span id="osc_show_icon"></span><span class="show-drop"></span></div><input type="hidden" id="oscitas-iconhead-icon" value=""><input type="hidden" id="oscitas-iconhead-icontype" value="">\
                    <div id="osc_show_iconlist" class="oscitas-icon" style="display:none;width:100%"><h4>Glyphicons</h4><ul name="oscitas-heading-icon_servicebox" class="oscitas-heading-icon">'+ebsicons+'</ul>'+iconhead_fa+'</div>\
				</td>\
			</tr>\
			<tr>\
				<th><label for="oscitas-iconhead-iconcolor">Icon Color:</label></th>\
				<td><input type="text" name="label" id="oscitas-iconhead-iconcolor" class="color" value="" /><br />\
				</td>\
			</tr>\
                        <tr>\
				<th><label for="oscitas-iconhead-headingtype">Heading Type:</label></th>\
				<td><select name="oscitas-iconhead-headingtype" id="oscitas-iconhead-headingtype">\
                                <option value="h1">H1</option>\
                                <option value="h2">H2</option>\
                                <option value="h3">H3</option>\
                                <option value="h4">H4</option>\
                                <option value="h5">H5</option>\
                                <option value="h6">H6</option>\
                                </select><br />\
				</td>\
			</tr>\
	        <tr>\
				<th><label for="oscitas-iconhead-heading">Heading:</label></th>\
				<td><input type="text" name="oscitas-iconhead-heading" id="oscitas-iconhead-heading" value="Heading"/><br />\
				</td>\
			</tr>\
                        <tr>\
				<th><label for="oscitas-iconhead-class">Custom Class:</label></th>\
				<td><input type="text" name="line" id="oscitas-iconhead-class" value=""/><br />\
				</td>\
			</tr>\
		</table>\
		<p class="submit">\
			<input type="button" id="oscitas-iconhead-submit" class="button-primary" value="Insert Icon Heading" name="submit" />\
		</p>\
		</div>');

    var table = form.find('table');
    jQuery('.glyphicon').css('display','inline');
    form.appendTo('body').hide();
    form.find('.color').wpColorPicker();
    table.find('#click_icon_list').click(function(){
        if(!jQuery(this).hasClass('osc_icon_showing')){
            jQuery(this).addClass('osc_icon_showing')
            table.find('#osc_show_iconlist').show();
        } else{
            jQuery(this).removeClass('osc_icon_showing')
            table.find('#osc_show_iconlist').hide();
        }
    });
    table.find('.oscitas-heading-icon li').click(function(){
        var val=jQuery(this).attr('data-value');
        var type=jQuery(this).attr('type');
        table.find('.oscitas-heading-icon li').removeClass('osc_icon_selected');
        jQuery(this).addClass('osc_icon_selected');
        table.find('#click_icon_list').removeClass('osc_icon_showing');
        table.find('#osc_show_iconlist').hide();
        table.find('#osc_show_icon').removeClass().addClass(type).addClass(val);
        table.find('#oscitas-iconhead-icon').val(val);
        table.find('#oscitas-iconhead-icontype').val(type);

    });

    //    // handles the click event of the submit button
    form.find('#oscitas-iconhead-submit').click(function() {
        // defines the options and their default values
        // again, this is not the most elegant way to do this
        // but well, this gets the job done nonetheless
        var type=jQuery('#oscitas-iconhead-headingtype').val();
        var cusclass='',style='';
        if(table.find('#oscitas-iconhead-icon').val()!=''){
            style=' style="' + table.find('#oscitas-iconhead-icon').val()+'"' ;
        }
        if(table.find('#oscitas-iconhead-icontype').val()!=''){
            style+=' icontype="' + table.find('#oscitas-iconhead-icontype').val()+'"' ;
        }
        if(table.find('#oscitas-iconhead-iconcolor').val()!=''){
            cusclass+= ' color="'+table.find('#oscitas-iconhead-iconcolor').val()+'"';
        }
        if(table.find('#oscitas-iconhead-class').val()!=''){
            cusclass+= ' class="'+table.find('#oscitas-iconhead-class').val()+'"';
        }

        var shortcode = '[iconheading type="'+type+'"';
        
        shortcode += style+cusclass ;
        
        shortcode += ']'+table.find('#oscitas-iconhead-heading').val()+'[/iconheading]' ;

        // inserts the shortcode into the active editor
        tinyMCE.activeEditor.execCommand('mceInsertContent',0 , shortcode);

        // closes Dialoguebox
        close_dialogue(pluginObj.hashId);
    });
}

