(function() {
tinymce.create('tinymce.plugins.CallistoColumns', {
	init : function(ed, url) {
		ed.addButton('callistocolumns', {
			title : 'Callisto Columns',
			image : '../wp-content/themes/350media/images/columns.png',
			onclick : function() {
				// triggers the thickbox
				var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
				W = W - 80;
				H = H - 84;
				tb_show( 'Callisto Columns', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=callistocolumns-form' );
			}
		});
	},
	createControl : function(n, cm) {
		return null;
	},
	getInfo : function() {
		return {
			longname : "Callisto Shortcode",
			author : 'theme-demo.net',
			version : "1.0"
		};
	}
});
	tinymce.PluginManager.add('callistocolumns', tinymce.plugins.CallistoColumns);
	// executes this when the DOM is ready
	jQuery(function(){
		// 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="callistocolumns-form"><table id="callistocolumns-table" class="form-table">\
			<tr>\
				<td colspan="6">Click on the the column shortocde you want to add</td>\
			<tr>\
			<tr>\
				<td><input type="button" class="button" id="one-column" value="one column" /></td>\
				<td><input type="button" class="button" id="one-half" value="one half" /></td>\
				<td><input type="button" class="button" id="one-third" value="one third" /></td>\
				<td><input type="button" class="button" id="one-fourth" value="one fourth" /></td>\
				<td><input type="button" class="button" id="two-thrid" value="two thrid" /></td>\
			</tr>\
			<tr>\
				<td id="one-column-box" style="display:none;" colspan="6"><div id="one-column-result"></div><p class="submit">\<input type="button" id="callistocolumns-onecolumn-submit" class="button-primary" value="Insert Column" name="submit" />\</p>\</td>\
			</tr>\
			<tr>\
				<td id="onehalf-column-box" style="display:none;" colspan="6"><div id="onehalf-result"></div></div><p class="submit">\<input type="button" id="callistocolumns-onehalf-submit" class="button-primary" value="Insert Column" name="submit" />\</p>\</td>\
			</tr>\
			<tr>\
				<td id="onethird-column-box" style="display:none;" colspan="6"><div id="onethird-result"></div><p class="submit">\<input type="button" id="callistocolumns-onethird-submit" class="button-primary" value="Insert Column" name="submit" />\</p>\</td>\
			</tr>\
			<tr>\
				<td id="onefourth-column-box" style="display:none;" colspan="6"><div id="onefourth-result"></div><p class="submit">\<input type="button" id="callistocolumns-onefourth-submit" class="button-primary" value="Insert Column" name="submit" />\</p>\</td>\
			</tr>\
			<tr>\
				<td id="twothird-column-box" style="display:none;" colspan="6"><div id="twothird-result"></div><p class="submit">\<input type="button" id="callistocolumns-twothrid-submit" class="button-primary" value="Insert Column" name="submit" />\</p>\</td>\
			</tr>\
		</table>\
		</div>');
		
		var table = form.find('table');
		form.appendTo('body').hide();
		
		// handles the click event of the one column form submit button
		form.find('#callistocolumns-onecolumn-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
		
			if(document.getElementById('onecolumn-result').value!='')
			{																						  
				var shortcode = '[column_one]'+jQuery("#onecolumn-result").val()+'[/column_one]';
					// inserts the shortcode into the active editor
				var res;
				res=tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
				if(res){ alert('Shrotcode added. Click on the close button to close the window.');}
				jQuery("#onecolumn-result").val('');
				jQuery("#one-column-box").hide();
				jQuery("#one-column").prop('disabled', false);
			}
			else
			{
				return false;	
			}
			// closes Thickbox
			//tb_remove();
		});
		
		// handles the click event of the two column form submit button
		form.find('#callistocolumns-onehalf-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
			
			if(document.getElementById('onehalfcol1-result').value!='' && document.getElementById('onehalfcol2-result').value!='')
			{	
				var shortcodeonehalf;
				var shortcode1 = '[one_half]'+jQuery("#onehalfcol1-result").val()+'[/one_half]';
				var shortcode2 = '[one_half]'+jQuery("#onehalfcol2-result").val()+'[/one_half]';
				
				shortcodeonehalf=shortcode1+shortcode2;
				// inserts the shortcode into the active editor
				var res;
				res=tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcodeonehalf);
				if(res){ alert('Shrotcode added. Click on the close button to close the window.');}
				jQuery("#one-column-result").val('');
				jQuery("#onehalf-column-box").hide();
				jQuery("#onehalf-column-box").prop('disabled', false);
			}
			else if(document.getElementById('onehalfcol1-result').value!='')
			{
				var shortcodeonehalf;
				var shortcodeonehalf = '[one_half]'+jQuery("#onehalfcol1-result").val()+'[/one_half]';

				// inserts the shortcode into the active editor
				var res;
				res=tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcodeonehalf);
				if(res){ alert('Shrotcode added. Click on the close button to close the window.');}
				jQuery("#one-column-result").val('');
				jQuery("#onehalf-column-box").hide();
				jQuery("#onehalf-column-box").prop('disabled', false);
			}
			else
			{
				return false;	
			}
			// closes Thickbox
			//tb_remove();
		});
		
		// handles the click event of the three column form submit button
		form.find('#callistocolumns-onethird-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
			
			if(document.getElementById('onethirdcol1-result').value!='' && document.getElementById('onethirdcol2-result').value!='' && document.getElementById('onethirdcol3-result').value!='')
			{																						  
				var shortcode11 = '[column_one_third]'+jQuery("#onethirdcol1-result").val()+'[/column_one_third]';
				var shortcode22 = '[column_one_third]'+jQuery("#onethirdcol2-result").val()+'[/column_one_third]';
				var shortcode33 = '[column_one_third]'+jQuery("#onethirdcol3-result").val()+'[/column_one_third]';
				
				var shortcodeonethird;
				shortcodeonethird=shortcode11+shortcode22+shortcode33;
				
				// inserts the shortcode into the active editor
				var res;
				res=tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcodeonethird);
				if(res){ alert('Shrotcode added. Click on the close button to close the window.');}
				jQuery("#onethird-result").val('');
				jQuery("#onethird-column-box").hide();
				jQuery("#one-third").prop('disabled', false);
			}
			
			else if(document.getElementById('onethirdcol1-result').value!='')
			{
				var shortcodeonethird;
				shortcodeonethird = '[column_one_third]'+jQuery("#onethirdcol1-result").val()+'[/column_one_third]';
				
				// inserts the shortcode into the active editor
				var res;
				res=tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcodeonethird);
				if(res){ alert('Shrotcode added. Click on the close button to close the window.');}
				jQuery("#onethird-result").val('');
				jQuery("#onethird-column-box").hide();
				jQuery("#one-third").prop('disabled', false);
			}
			else
			{
				return false;	
			}
			// closes Thickbox
			//tb_remove();
		});
		
		// handles the click event of the four column form submit button
		form.find('#callistocolumns-onefourth-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
			
			if(document.getElementById('onefourthcol1-result').value!='' && document.getElementById('onefourthcol2-result').value!='' && document.getElementById('onefourthcol3-result').value!='' && document.getElementById('onefourthcol4-result').value!='')
			{																						  
				var shortcode101 = '[column_one_fourth]'+jQuery("#onefourthcol1-result").val()+'[/column_one_fourth]';
				var shortcode201 = '[column_one_fourth]'+jQuery("#onefourthcol2-result").val()+'[/column_one_fourth]';
				var shortcode301 = '[column_one_fourth]'+jQuery("#onefourthcol3-result").val()+'[/column_one_fourth]';
				var shortcode401 = '[column_one_fourth]'+jQuery("#onefourthcol4-result").val()+'[/column_one_fourth]';
				
				var shortcodeonefourth;
				shortcodeonefourth=shortcode101+shortcode201+shortcode301+shortcode401;
				
				// inserts the shortcode into the active editor
				var res;
				res=tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcodeonefourth);
				if(res){ alert('Shrotcode added. Click on the close button to close the window.');}
				jQuery("#onefourth-result").val('');
				jQuery("#onefourth-column-box").hide();
				jQuery("#one-fourth").prop('disabled', false);
			}
			else if(document.getElementById('onefourthcol1-result').value!='')
			{
				var shortcodeonefourth;
				shortcodeonefourth = '[column_one_fourth]'+jQuery("#onefourthcol1-result").val()+'[/column_one_fourth]';
				
				// inserts the shortcode into the active editor
				var res;
				res=tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcodeonefourth);
				if(res){ alert('Shrotcode added. Click on the close button to close the window.');}
				jQuery("#onefourth-result").val('');
				jQuery("#onefourth-column-box").hide();
				jQuery("#one-fourth").prop('disabled', false);	
			}
			else
			{
				return false;	
			}
			// closes Thickbox
			//tb_remove();
		});
		
		// handles the click event of the five column form submit button
		form.find('#callistocolumns-twothrid-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

			if(document.getElementById('twothirdcol1-result').value!='')
			{																						  
				var shortcodetwothird = '[column_two_third]'+jQuery("#twothirdcol1-result").val()+'[/column_two_third]';
				
				// inserts the shortcode into the active editor
				var res;
				res=tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcodetwothird);
				if(res){ alert('Shrotcode added. Click on the close button to close the window.');}
				jQuery("#twothird-result").val('');
				jQuery("#twothird-column-box").hide();
				jQuery("#two-thrid").prop('disabled', false);
			}
			else
			{
				return false;	
			}
			// closes Thickbox
			//tb_remove();
		});
		
		
	});
})();		
jQuery(document).ready(function(){
	jQuery("#one-column").click(function(){
			jQuery("#one-column-result").empty();
			jQuery("#one-column-box").show();
			jQuery("#onehalf-column-box").hide();
			jQuery("#onethird-column-box").hide();
			jQuery("#onefourth-column-box").hide();
			jQuery("#twothird-column-box").hide();
			jQuery("#one-column").prop('disabled', true);
			jQuery("#one-half").prop('disabled', false);
			jQuery("#one-third").prop('disabled', false);
			jQuery("#one-fourth").prop('disabled', false);
			jQuery("#two-thrid").prop('disabled', false);
			jQuery("#one-column-result").html('<table><tr><td>Content</td><td><textarea name="onecolumn-content" id="onecolumn-result" style="width:510px;height:60px;">					</textarea></td></tr></table>');							 
	});		
	jQuery("#one-half").click(function(){
			jQuery("#onehalf-result").empty();
			jQuery("#one-column-box").hide();
			jQuery("#onehalf-column-box").show();
			jQuery("#onethird-column-box").hide();
			jQuery("#onefourth-column-box").hide();
			jQuery("#twothird-column-box").hide();
			jQuery("#one-column").prop('disabled', false);
			jQuery("#one-half").prop('disabled', true);
			jQuery("#one-third").prop('disabled', false);
			jQuery("#one-fourth").prop('disabled', false);
			jQuery("#two-thrid").prop('disabled', false);
			jQuery("#onehalf-result").html('<table><tr><td>Column 1 Content</td><td><textarea name="onehalfcol1-content" id="onehalfcol1-result" style="width:510px;height:60px;"></textarea></td></tr><tr><td>Column 2 Content</td><td><textarea name="onehalfcol1-content" id="onehalfcol2-result" style="width:510px;height:60px;"></textarea></td></tr></table>');
	});	
	jQuery("#one-third").click(function(){
			jQuery("#onethird-result").empty();
			jQuery("#one-column-box").hide();
			jQuery("#onehalf-column-box").hide();
			jQuery("#onethird-column-box").show();
			jQuery("#onefourth-column-box").hide();
			jQuery("#twothird-column-box").hide();
			jQuery("#one-column").prop('disabled', false);
			jQuery("#one-half").prop('disabled', false);
			jQuery("#one-third").prop('disabled', true);
			jQuery("#one-fourth").prop('disabled', false);
			jQuery("#two-thrid").prop('disabled', false);
			jQuery("#onethird-result").html('<table><tr><td>Column 1 Content</td><td><textarea name="twocolumn-content" id="onethirdcol1-result" style="width:510px;height:60px;"></textarea></td></tr><tr><td>Column 2 Content</td><td><textarea name="twocolumn-content" id="onethirdcol2-result" style="width:510px;height:60px;"></textarea></td></tr><tr><td>Column 3 Content</td><td><textarea name="twocolumn-content" id="onethirdcol3-result" style="width:510px;height:60px;"></textarea></td></tr></table>');							 
	});
	jQuery("#one-fourth").click(function(){
			jQuery("#onefourth-result").empty();
			jQuery("#one-column-box").hide();
			jQuery("#onehalf-column-box").hide();
			jQuery("#onethird-column-box").hide();
			jQuery("#onefourth-column-box").show();
			jQuery("#twothird-column-box").hide();
			jQuery("#one-column").prop('disabled', false);
			jQuery("#one-half").prop('disabled', false);
			jQuery("#one-third").prop('disabled', false);
			jQuery("#one-fourth").prop('disabled', true);
			jQuery("#two-thrid").prop('disabled', false);
			jQuery("#onefourth-result").html('<table><tr><td>Column 1 Content</td><td><textarea id="onefourthcol1-result" style="width:510px;height:60px;"></textarea></td></tr><tr><td>Column 2 Content</td><td><textarea id="onefourthcol2-result" style="width:510px;height:60px;"></textarea></td></tr><tr><td>Column 3 Content</td><td><textarea id="onefourthcol3-result" style="width:510px;height:60px;"></textarea></td></tr><tr><td>Column 4 Content</td><td><textarea id="onefourthcol4-result" style="width:510px;height:60px;"></textarea></td></tr></table>');							 
	});
	jQuery("#two-thrid").click(function(){
			jQuery("#twothird-result").empty();
			jQuery("#one-column-box").hide();
			jQuery("#onehalf-column-box").hide();
			jQuery("#onethird-column-box").hide();
			jQuery("#onefourth-column-box").hide();
			jQuery("#twothird-column-box").show();
			jQuery("#one-column").prop('disabled', false);
			jQuery("#one-half").prop('disabled', false);
			jQuery("#one-third").prop('disabled', false);
			jQuery("#one-fourth").prop('disabled', false);
			jQuery("#two-thrid").prop('disabled', true);
			jQuery("#twothird-result").html('<table><tr><td>Content</td><td><textarea id="twothirdcol1-result" style="width:510px;height:60px;"></textarea></td></tr></table>');							 
	});
	
});