YAHOO.util.Event.onDOMReady(function () {
	var Button = YAHOO.widget.Button;

	var onSelectedMenuItemChange = function (event) {
		var oMenuItem = event.newValue;
		this.set("label", ("<em class=\"yui-button-label\">" + oMenuItem.cfg.getProperty("text") + "</em>"));
	};

	var onFormSubmit = function (event, button) {
		if (button.get('selectedMenuItem')) {
			if (button.get('id') == 'stockbutton') { // update form element
				document.getElementById('stock').selectedIndex = button.get('selectedMenuItem').index;
			}
		}
	};

	if (document.getElementById('stock-container')) {
		var stock = document.getElementById('stock');
		var stock_options_menu = new Array;
		for (var i = 0; i < stock.options.length; i++) {
			var option = stock.options[i];
			stock_options_menu.push({ text: "<img src=\"/samp/" + option.value + ".png\" class=\"samp\"> " + option.text, value: option.value });
		}

		stock.style.display = 'none';
		var stock_sel = document.editor_form['stock'].options[document.editor_form['stock'].selectedIndex];
		var StockButton = new Button({
			id: "stockbutton",
			name: "stockbutton",
			label: "<em class=\"yui-button-label\"><img src=\"/samp/" + stock_sel.value + ".png\" class=\"samp\"> " + stock_sel.text + "</em>",
			type: "menu",  
			menu: stock_options_menu,
			container: "stock-container"
		});
		StockButton.on("selectedMenuItemChange", onSelectedMenuItemChange);
		StockButton.on("appendTo", function() {
			var oMenu = this.getMenu();
			oMenu.subscribe("render", function(type, args, button) {
				button.set("selectedMenuItem", this.getItem(stock.selectedIndex));
			}, this);
			YAHOO.util.Event.on(this.getForm(), "submit", onFormSubmit, this);
		});
	}

	// replace font menus with styled hierarchical menus
//	var default_label = document.editor_form['font_' + 0].options[document.editor_form['font_' + 0].selectedIndex].text;
//	var oMenuButton1 = new Button({ 
//		id: "menubutton-1", 
//		name: "menubutton-1",
//		label: "<em class=\"yui-button-label\">" + default_label + "</em>",
//		type: "menu",  
//		menu: "font_0",
//		container: "font_0-container"
//	});
//	oMenuButton1.on("selectedMenuItemChange", onSelectedMenuItemChange);

});

var origin = YAHOO.util.Dom.getXY('preview');
var block_images = new Array();
var go_editor = 0;

function init_editor() {
	YAHOO.util.Dom.setStyle('preview', 'width', item_width + 'px');
	YAHOO.util.Dom.setStyle('preview', 'height', item_height + 'px');
	YAHOO.util.Dom.setStyle('preview', 'background', item_bg_color + ' ' + item_bg_image + ' top left');

	document.getElementById('visual_offer').innerHTML = '<p>Loading ...</p>';

	// load blocks
	for (var i = 0; i < block_pos.length; i++) {
		if (!block_pos[i]) continue;
		var the_image = new Image;
		the_image.src = '/preview/' + layout + 'b' + i;
		the_image.id = 'block_' + i;
		the_image.className = 'block';
		the_image.width  = block_size[i][0];
		the_image.height = block_size[i][1];
		block_images[i] = the_image;
	}

	// insert blocks into document
	var blocks_div = document.getElementById('blocks');
	for (var i = 0; i < block_pos.length; i++) {
		if (!block_pos[i]) continue;
		blocks_div.appendChild(block_images[i]);
	}

	go_editor = 1;
	position_blocks();
	
	// make images into DD objects, handle events
	var dd = new Array();
	for (var x = 0; x < block_pos.length; x++) {
		if (!block_pos[x]) continue;
		dd[x] = new YAHOO.util.DD('block_' + x);
		dd[x].on('startDragEvent', function(ev, x) {
			var me = document.getElementById('block_' + x);
			//me.style.clip = 'rect(0px ' + me.width + 'px ' + me.height + 'px 0px)';
			YAHOO.util.Dom.setStyle(me, 'clip', 'rect(0px ' + me.width + 'px ' + me.height + 'px 0px)');
			me.style.opacity = 0.5;
			// YAHOO.util.Dom.setStyle(me, 'opacity', 0.5);
		}, x, true);
		
		dd[x].on('endDragEvent', function(ev, x) {
			document.getElementById('block_' + x).style.opacity = 1;
			// YAHOO.util.Dom.setStyle(document.getElementById('block_' + x), 'opacity', 1);
			var pos = YAHOO.util.Dom.getXY('block_' + x);
			var old_pos = block_pos[x];
			block_pos[x] = [ pos[0] - origin[0], pos[1] - origin[1] ];

			if (clip_block(x, 1)) { // returns true if block is off the layout
				if(confirm('Delete this block?')) {
					document.editor_form['deltax_' + x].value = 'X';			
					YAHOO.util.Dom.setStyle(document.getElementById('blockrow_' + x), 'display', 'none');
				} else {
					block_pos[x] = old_pos;
					YAHOO.util.Dom.setXY('block_' + x, [ origin[0] + old_pos[0], origin[1] + old_pos[1] ]);
					clip_block(x);
				}
			}

			var deltax = block_pos[x][0] - old_pos[0];
			var deltay = block_pos[x][1] - old_pos[1];

			if (document.editor_form['deltax_' + x].value != 'X') {
				// update form elements
				document.editor_form['deltax_' + x].value = parseInt(document.editor_form['deltax_' + x].value) + parseInt(deltax);
				document.editor_form['deltay_' + x].value = parseInt(document.editor_form['deltay_' + x].value) + parseInt(deltay);
			}
		}, x, true);
		
		dd[x].on('dragEvent', function(ev, x) {
			if (ev.e.shiftKey == 1) { // constrain to 90 degrees if shift is down
				var pos = YAHOO.util.Dom.getXY('block_' + x);
				var old_pos = [block_pos[x][0] + origin[0], block_pos[x][1] + origin[1]];
				var deltax = pos[0] - old_pos[0];
				var deltay = pos[1] - old_pos[1];
				
				if (Math.abs(deltax) > Math.abs(deltay)) {
					pos[1] = old_pos[1];
				} else {
					pos[0] = old_pos[0];
				}
				YAHOO.util.Dom.setXY('block_' + x, pos);
			}
		}, x, true);
	}
	//document.getElementById('comp').style.visibility = 'hidden';
	//document.getElementById('preview').style.border = '1px solid #000000';
	YAHOO.util.Dom.setStyle(document.getElementById('comp'), 'visibility', 'hidden');
	YAHOO.util.Dom.setStyle(document.getElementById('preview'), 'border', '1px solid #000000');

	document.getElementById('visual_offer').innerHTML = '<p>Drag blocks to move them. Hold SHIFT to constrain movement to 90&deg;.</p>';
}

function position_blocks () {
	if (!go_editor) return;
	origin = YAHOO.util.Dom.getXY('preview');
	for (var i = 0; i < block_pos.length; i++) {
		if (!block_pos[i]) continue;
		var x = block_pos[i][0];
		var y = block_pos[i][1];
		
		var pos = [ origin[0] + x, origin[1] + y ];
		YAHOO.util.Dom.setXY('block_' + i, pos);
	}
	clip_blocks();
}

function clip_blocks () {
	for (var i = 0; i < block_pos.length; i++) {
		if (!block_pos[i]) continue;
		clip_block(i);
	}
}

function clip_block (i, bleed_offer) {
	var x = block_pos[i][0];
	var y = block_pos[i][1];
	var width = document.getElementById('block_' + i).width;
	var height = document.getElementById('block_' + i).height;

	var clip_top, clip_left, clip_bottom, clip_right;
	if (x < clip[1]) { clip_left = clip[1] - x } else { clip_left = 0 }
	if (x + width > item_width - clip[3]) { clip_right = (item_width - x - clip[3]) }
		else { clip_right = width };
	if (y < clip[0]) { clip_top = clip[0] - y } else { clip_top = 0 };
	if (y + height > item_height - clip[2]) { clip_bottom = (item_height - y - clip[2]) }
		else { clip_bottom = height };
	
	document.getElementById('block_' + i).style.clip = 'rect(' + clip_top + 'px ' + clip_right + 'px ' + clip_bottom + 'px ' + clip_left + 'px)';

	if (document.editor_form['item'].value == 'BC'
	    && bleed_offer
	    && ((clip_top && clip[0]) || (clip_left && clip[1]) || (clip_right < width && clip[3]) || (clip_bottom < height && clip[2]))) { // explain bleed
		document.getElementById('visual_offer').innerHTML = '<p>Use a <i>bleed</i> (under More Options below) to print past the edge of your layout.</p>';
	}

	if (clip_left >= width || clip_right <= 0 || clip_top >= height || clip_bottom <= 0) {
		return true; // completely off the layout
	} else {
		return false;
	}
}