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 to 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;
	}
}