Event.observe(window, 'load', watchCanvasFields, false);
Event.observe(window, 'unload', Event.unloadCache, false);

function watchCanvasFields() {
	var bigdiv = document.createElement('div');
	document.body.insertBefore(bigdiv, $('wphead'));
	bigdiv.appendChild($('wphead'));
	bigdiv.appendChild($('adminmenu'));
	bigdiv.appendChild($('submenu'));

	var hide_instructions = $('hide_instructions');
	if(hide_instructions) {
		hide_instructions.onclick = function(){ 
			canvasOption('canvas_show_instructions','false');
			new Effect.Fade('instructions', { duration: 0.4 });
			};
	}
	$$('ul.page_dropdown ul li a').each(function(item){
		$(item).onclick = function(){ switchCanvas(item.id) };
	});
	$('show_content').onclick = function(){ toggleMenu('show_content', 'hide_content', bigdiv); };
	$('hide_content').onclick = function(){ toggleMenu('show_content', 'hide_content', bigdiv); };
	$$('div.titlebar a img').each(function(item){
		$(item).onclick = function(){ sortGroups(item.id) };
	});
		    $("show_content").style.display  = "none";	$("hide_content").style.display = "inline";	mainpage = $F('canvas_page');
	$(mainpage).style.display = "block";
	var mainmenu = $(mainpage+'__menu');
	if(mainmenu) { mainmenu.parentNode.className = 'selected'; }
	var publish = $('publish');
	if(publish) { publish.onclick = canvas_master_save_layout; }
	createDroppables(mainpage);
}


function createDroppables(id) {
	var elements = $$('#'+id+' div.canvas_droppable_zone');
	var shelf = $('shelf');
	Sortable.create('shelf',{tag:'div', only: ['container','container-plugin'], overlap:'horizontal', handle:'handle', constraint:false, containment:elements.concat(shelf), dropOnEmpty:true, onUpdate: changePublish});
	elements.each(function(item){
		Sortable.create(item.id,{tag:'div', only: ['container','container-plugin'], overlap:'horizontal', handle:'handle', constraint:false, containment:elements.concat(shelf), dropOnEmpty:true, onUpdate: changePublish});
	});
}

function destroyDroppables(id) {
	Sortable.destroy('shelf');
	$$('#'+id+' div.canvas_droppable_zone').each(function(item){
		Sortable.destroy(item.id);
	});
}

function canvas_master_save_layout() {
	if($('publish')) { $('publish').style.backgroundImage = "url('../wp-content/plugins/Canvas/images/spinner.gif')"; }
    var layout_params;
	$$('#'+$F('canvas_page')+' div.canvas_droppable_zone').concat($('shelf')).each(function(item){
		layout_params = canvas_serialize_helper(layout_params, item.id);
	});
    canvas_save_layout(layout_params);
};

function canvas_serialize_helper(layout_params, block) {
    layout_params = Try.these (
        function() {
              content_exists = Sortable.serialize(block);
              if (content_exists == '') {
                  return layout_params;
              } else if (typeof(layout_params) == 'undefined')  {
                  return content_exists;
              } else {
                  return layout_params + '&' + content_exists;
              }
        }
    );
    return layout_params;
};

function canvas_save_layout(pars) {
    var url = '../wp-content/plugins/Canvas/ajax/canvas-save-layout.php';
    var myAjax = new Ajax.Request(url, 
        {method: 'get', 
        parameters: pars,
        onComplete: function(){ if($('publish')){ $('publish').style.backgroundImage = "url('')"; restorePublish(); } }
        });
};

function save_block(element, pars) {
    var url = '../wp-content/plugins/Canvas/ajax/canvas-save-plugin.php';
    var myAjax = new Ajax.Request(url, 
        {method: 'get', 
        parameters: pars }
        );
};

function toggleMenu(show,hide,block) {
	if($(block).style.display == "none") {
		$(show).style.display  = "none";
		$(hide).style.display = "inline";
	    new Effect.BlindDown(block, {duration: 0.3 })
	} else {
		$(show).style.display  = "inline";
		$(hide).style.display = "none";
	    new Effect.BlindUp(block, {duration: 0.3 })
	}
}

function switchCanvas(element) {
	var currentPage = $F('canvas_page');
	$$('ul.page_dropdown ul li').each(function(item){ if($(item).className == 'selected') $(item).className = ''; });
	$(element).parentNode.className = 'selected';
	var string = element.split('__');
	$(currentPage).style.display = 'none';
	destroyDroppables(currentPage);
	$(string[0]).style.display = 'block';
	$('canvas_page').value = string[0];
	createDroppables(string[0]);
}

function sortGroups(group) {
	if(group == 'all') {
		$$('div.shelf_column div').each(function(item){
			$(item).style.display = 'block';
		});
	} else {
		$$('div.shelf_column div.container').each(function(item){
			$(item).style.display = 'none';
		});
		$$('div.shelf_column div.container-plugin').each(function(item){
			$(item).style.display = 'none';
		});
		$$('div.shelf_column div.'+group).each(function(item){
			$(item).style.display = 'block';
		});
	}
}

function gallerySwitch(id) {
	if($F('selected_image') != '') $($F('selected_image')).className = '';
	$(id).className = 'selected_image';
	$('selected_image').value = id;
	$('path').value = $F('directory')+id;
}

function canvasOption(name, value) {
    var url = '../wp-content/plugins/Canvas/ajax/canvas-save-option.php';
    var pars = name+'='+value;
    var myAjax = new Ajax.Request(url, 
        {method: 'post', 
        parameters: pars }
        );
}

function changePublish() {
	image = $('publish_image');
	if(image) image.src = '../wp-content/plugins/Canvas/images/publish-changed.gif';
}

function restorePublish() {
	image = $('publish_image');
	if(image) image.src = '../wp-content/plugins/Canvas/images/publish.gif';
}

function canvas_export_xml(pars) {
	$('export_message').className = "exporting";
	var target = 'export_message';
    var url = '../wp-content/plugins/Canvas/ajax/canvas-export.php';
    var myAjax = new Ajax.Updater({success: target}, url, 
        {method: 'post', 
        parameters: pars,
        onComplete: function() { $('export_message').className = ''; $('export_message').style.paddingLeft = '0px'; }
        });
}

function canvas_import_xml(pars) {
	$('export_message').className = "importing";
	var target = 'export_message';
    var url = '../wp-content/plugins/Canvas/ajax/canvas-import.php';
    var myAjax = new Ajax.Updater({success: target}, url, 
        {method: 'post', 
        parameters: pars,
        onComplete: function() { $('export_message').className = ''; $('export_message').style.paddingLeft = '0px'; }
        });
}

// This code was found here: http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

function f_clientWidth() {
	return f_filterResults (
		window.innerWidth ? window.innerWidth : 0,
		document.documentElement ? document.documentElement.clientWidth : 0,
		document.body ? document.body.clientWidth : 0
	);
}
function f_clientHeight() {
	return f_filterResults (
		window.innerHeight ? window.innerHeight : 0,
		document.documentElement ? document.documentElement.clientHeight : 0,
		document.body ? document.body.clientHeight : 0
	);
}
function f_scrollLeft() {
	return f_filterResults (
		window.pageXOffset ? window.pageXOffset : 0,
		document.documentElement ? document.documentElement.scrollLeft : 0,
		document.body ? document.body.scrollLeft : 0
	);
}
function f_scrollTop() {
	return f_filterResults (
		window.pageYOffset ? window.pageYOffset : 0,
		document.documentElement ? document.documentElement.scrollTop : 0,
		document.body ? document.body.scrollTop : 0
	);
}
function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}