(function() {
tinymce.create('tinymce.plugins.CallistoGallery', {
	init : function(ed, url) {
		ed.addButton('callistogallery', {
			title : 'Callisto Gallery',
			image : '../wp-content/themes/callisto/images/video-icon.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 Gallery', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=callistogallery-form' );
			}
		});
	},
	createControl : function(n, cm) {
		return null;
	},
	getInfo : function() {
		return {
			longname : "Callisto Gallery Shortcode",
			author : 'theme-demo.net',
			version : "1.0"
		};
	}
});
	tinymce.PluginManager.add('callistogallery', tinymce.plugins.CallistoGallery);
	// 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="callistogallery-form"><table id="callistogallery-table" class="form-table">\
			<tr>\
				<td><input type="button" class="button" id="add-video" value="add video" /><br /><p>Click here to add video to gallery.</p></td>\
				<td><input type="button" class="button" id="add-image" value="add image" /><br /><p>Click here to add image to gallery.</p></td>\
			</tr>\
			<tr>\
				<td id="videoForm" style="display:none;" colspan="2"><div id="result"></div><p class="submit">\<input type="button" id="callistogallery-video-submit" class="button-primary" value="Insert Gallery" name="submit" />\</p>\</td>\
			</tr>\
			<tr>\
				<td id="imageForm" style="display:none;" colspan="2"><div id="result2"></div><p class="submit">\<input type="button" id="callistogallery-image-submit" class="button-primary" value="Insert Gallery" name="submit" />\</p>\</td>\
			</tr>\
		</table>\
		</div>');
		
		var selectedGallery;
		var table = form.find('table');
		form.appendTo('body').hide();
		
		// handles the click event of the video form submit button
		form.find('#callistogallery-video-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 options = { 
				'image': '',
				'videolink': ''
				};
			
			if(document.getElementById('callistogallery-image').value!='' && document.getElementById('callistogallery-videolink').value!='')
			{																						  
				var shortcode = '[callisto_gallery][callisto_video';
	
				for( var index in options) {
					var value = table.find('#callistogallery-' + index).val();
					if ( value !== options[index] )
						shortcode += ' ' + index + '="' + value + '"';
				}
				
				shortcode += '][/callisto_gallery]';
				
				// 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("#callistogallery-image").val('');
				jQuery("#callistogallery-videolink").val('');
				jQuery("#videoForm").hide();
				jQuery("#add-video").prop('disabled', false);
			}
			else
			{
				return false;	
			}
			// closes Thickbox
			//tb_remove();
		});
		
		// handles the click event of the video form image button
		form.find('#callistogallery-image-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 options = { 
				'title': '',
				'desc': '',
				'imagelink': ''
				};
				
			if(document.getElementById('callistogallery-title').value!='' && document.getElementById('callistogallery-imagelink').value!='')
			{
				var shortcode = '[callisto_gallery][img';
	
				for( var index in options) {
					var value = table.find('#callistogallery-' + index).val();
	
					if ( value !== options[index] )
						shortcode += ' ' + index + '="' + value + '"';
				}
				
				shortcode += '][/callisto_gallery]';
				
				// 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("#callistogallery-title").val('');
				jQuery("#callistogallery-desc").val('');
				jQuery("#callistogallery-imagelink").val('');
				jQuery("#imageForm").hide();
				jQuery("#add-image").prop('disabled', false);
			}
			else
			{
				return false;	
			}
			// closes Thickbox
			//tb_remove();
		});
	});
})();		
jQuery(document).ready(function(){
	jQuery("#add-video").click(function(){
			jQuery("#result").empty();
			jQuery("#videoForm").show();
			jQuery("#imageForm").hide();
			jQuery("#add-video").prop('disabled', true);
			jQuery("#add-image").prop('disabled', false);
			jQuery("#result").html('<table><tr><td>Image</td><td><input type ="text" name="image" id="callistogallery-image" style="width:260px;" /></td></tr><tr><td>Link</td><td><input type ="text" name="videolink" id="callistogallery-videolink" style="width:260px;" /></td></tr></table>');							 
	});		
	jQuery("#add-image").click(function(){
		jQuery("#result2").empty();
		jQuery("#imageForm").show();
		jQuery("#videoForm").hide();
		jQuery("#add-image").prop('disabled', true);
		jQuery("#add-video").prop('disabled', false);
		jQuery("#result2").html('<table><tr><td>Title</td><td><input type ="text" name="title" id="callistogallery-title" style="width:260px;" /></td></tr><tr><td>Description</td><td><textarea name="desc" id="callistogallery-desc" style="width:260px;"></textarea></td></tr><tr><td>Link</td><td><input type ="text" name="imagelink" id="callistogallery-imagelink" style="width:260px;" /></td></tr></table>');										 
	});	
	jQuery('#callistogallery-video-submit').click(function(){
		if(jQuery("#callistogallery-image").val().length<1)
		{
				jQuery("#callistogallery-image").css('background','rgb(255, 229, 242)');
		}
		if(jQuery("#callistogallery-videolink").val().length<1)
		{
				jQuery("#callistogallery-videolink").css('background','rgb(255, 229, 242)');
		}
	});
	jQuery('#callistogallery-image-submit').click(function(){
		if(jQuery("#callistogallery-title").val().length<1)
		{
				jQuery("#callistogallery-title").css('background','rgb(255, 229, 242)');
		}
		if(jQuery("#callistogallery-imagelink").val().length<1)
		{
				jQuery("#callistogallery-imagelink").css('background','rgb(255, 229, 242)');
		}
	});

	
	
});