Jx.Button.DesignerTab = new Class({
    Family: 'Jx.Button.DesignerTab',
    Extends: Jx.Button.Tab,
    Implements: [Options,Events,Jx.ContentLoader],
    /**
     * Property: content
     * {HTMLElement} The content area that is displayed when the tab is active.
     */
    content: null,
    /**
     * Constructor: Jx.Button.Tab
     * Create a new instance of Jx.Button.Tab.  Any layout options passed are used
     * to create a <Jx.Layout> for the tab content area.
     *
     * Parameters:
     * options - {Object} an object containing options that are used
     * to control the appearance of the tab.  See <Jx.Button>,
     * <Jx.ContentLoader::loadContent> and <Jx.Layout::Jx.Layout> for
     * valid options.
     */
    selectedArea: null,

    /**
     * Custom Options
     */
	options: {
		name:			null,
		label:			null,
		password:		null,
		isReadOnly:		false,
		isDirty:		false,
		pixels: 		{width: 0, height: 0},
		inches: 		{width: 0, height: 0},
		dimensions:		{width: 0, height: 0},
		position:		{left: 0, top: 0},
		offset:			{left: 0, top: 0},
		background: 	{image: null, xRepeat: true, yRepeat: true, area: 'full', element: null, position: ''},
		rubberband:		null,
		dragGroup:		null,
		DPI: 			45,
		padding:		0
	},
	
	
	doClose: function() {
		var tab = getClickedTab(activeDesign.options.id);
		
		if (tab) {
			tab.fireEvent('close');
		}
	}.bind(this),


	initialize : function( options) {
		this.parent($merge(options, {type:'Tab', toggle:true}));
		this.content = new Element('div', {'class':'tabContent'});
		this.content.addClass('designTabContent');
		new Jx.Layout(this.content, options);
		this.loadContent(this.content);
		var that = this;
		this.addEvent('down', function() { that.content.addClass('tabContentActive'); } );
		this.addEvent('up', function() { that.content.removeClass('tabContentActive'); } );

		var self = this;

		this.content.addEvent('click', function(evt) { 
			if (currentPeg) {
				var area = self.calculateArea();
			
				currentPegId = 0; 
				switch(currentPeg) {
					case 'peg_red':
						pegsRed++;
						currentPegId = pegsRed; 
					break;
					
					case 'peg_blue':
						pegsBlue++;
						currentPegId = pegsBlue; 
					break;
					
					case 'peg_green':
						pegsGreen++;
						currentPegId = pegsGreen; 
					break;
					
					case 'peg_yellow':
						pegsYellow++;
						currentPegId = pegsYellow; 
					break;
				}
				
				if (!evt.target.hasClass('peg_point')) {
					var selPegs = $$('.peg_selected');
					if (selPegs.length) {
						selPegs.each(function(ps){
							ps.removeClass('peg_selected');
						});
					} else {
						for (var cp=0; cp<dupeCount; cp++) {

							pegXPos = parseInt(evt.page.x-5);
							pegYPos = parseInt(evt.page.y-5-50);
							
							boardXPos = (parseInt(evt.page.x)-parseInt(area.left));
							boardYPos = (parseInt(evt.page.y)-parseInt(area.top)-50);
			

							if (dupeDirection) {
								if (dupeDirection == 'Right') {
									pegXPos = (evt.page.x-5)+(cp*11);									
								}

								if (dupeDirection == 'Left') {
									pegXPos = (evt.page.x-5)-(cp*11);									
								}

								if (dupeDirection == 'Down') {
									pegYPos = (evt.page.y-5-50)+(cp*11);									
								}

								if (dupeDirection == 'Up') {
									pegYPos = (evt.page.y-5-50)-(cp*11);									
								}
							}
							
							var peg = new Element('div', {
								'id': currentPeg+'_'+currentPegId,
								'title': 'Peg #'+currentPegId,
								'class': 'peg_point ' + currentPeg,
								'styles': {
									'position': 'absolute',
									'left': pegXPos,
									'top': pegYPos
								}
							}).inject(that.content);
							
							peg.store('boardXPos', boardXPos);
							peg.store('boardYPos', boardYPos);
							//peg.makeDraggable();
						}
					}
				} else {
					if (evt.target.hasClass('peg_point')) {
						evt.target.toggleClass('peg_selected'); 
					}
				}
			} else {
				if (evt.target.hasClass('peg_point')) {
					evt.target.toggleClass('peg_selected'); 
				}
			}
		});
		
		
		if (this.options.close) {
            this.domObj.addClass('jxTabClose');
            var a = new Element('a', {
				'class': 'jxTabClose',
                events: {
                    'click': (function() {
                    	activeDesign=this;
						doConfirm('Close Design', 'Are sure you want to close this design?', {label: 'Yes', func: this.doClose, icon: iconYes}, {label: 'No', func: null, icon: iconNo});
                    }).bind(this)
                }
            });
            
            a.adopt(new Element('img', {
                src: Jx.aPixel.src,
                alt: '',
                title: ''
            }));
            
            this.domObj.adopt(a);
        }
		
		
		this.options.rubberband = new Rubberband({
			'triggers' : [this.content],
			'trigger' : $(document),
			'draggable' : true,
			'drag' : { 'container' : this.content }
		});

		this.getParts(function(part) {
			this.options.rubberband.add(part);
		});
    },


    /**
     * Method: clicked
     * triggered when the user clicks the button, processes the
     * actionPerformed event
     */
    clicked : function(evt) {
        if (this.options.enabled) {
            this.setActive(true);
        }

		displayInfo();
    },


	setTabName: function(name) {
		this.options.name = name;
	},

	getTabName: function() {
		return this.options.name;
	},


	setTabLabel: function(label) {
		this.options.label = label;
		this.setLabel(this.options.label);
	},

	getTabLabel: function() {
		return this.options.label;
	},


	setIsReadOnly: function(isReadOnly) {
		this.options.isReadOnly = isReadOnly;
	},

	getIsReadOnly: function() {
		return this.options.isReadOnly;
	},


	setIsDirty: function(isDirty) {
		this.options.isDirty = isDirty;
	},

	getIsDirty: function() {
		return this.options.isDirty;
	},


	makeDesignPart: function(src, left, top, angle, tipTitle, tipText) {
		var part = new Element('img');

		part.addClass('part');
		part.addClass('tip');
		part.setAttribute('id', this.getNextID());
		part.setAttribute('src', src);

		var namePos = 5;
		if (Browser.Engine.name == 'trident' && Browser.Engine.version != 5) {
			namePos = 6;
		}

		srcName = src.split('/')[namePos].replace('.png', '');
		part.setAttribute('alt', srcName);
		part.setAttribute('title', tipTitle+'::'+tipText);
		part.store('name', srcName);

		part.store('tip:title', tipTitle);
		part.store('tip:text', tipText);
		// this should be an option somehow
		tips.attach(part);		

		part.setStyle('position', 'absolute');
		part.setStyle('left', left+'px');
		part.setStyle('top', top+'px');
		part.setStyle('cursor', 'normal');
		part.setStyle('z-index', '2');


		this.setPartAngle(part, angle);

		/*
		part.addEvent('contextmenu', function(e) {
			if ($defined(e) && e) {
				var part = e.target;
				if (part.hasClass('part') && !part.hasClass('selectedPart')) {
					part.addClass('selectedPart');
					getActiveTab().options.rubberband.select(part);
				}

				menuContextPart.show(e);
			}
		});
		*/

		part.inject(this.content);

		//this.options.dragGroup.add(part);
		this.options.rubberband.add(part);

		return part;
	},


	getNextID: function() {
		var nID = 0;

		this.getParts().each(function(part) {
			if (parseInt(part.getAttribute('id')) > nID) {
				nID = parseInt(part.getAttribute('id'));
			}
		});

		return parseInt(nID)+1;
	},


	getParts: function() {
		return this.content.getElements('.part');
	},


	getSelectedParts: function() {
		return this.content.getElements('.selectedPart');
	},


	getPegs: function() {
		return this.content.getElements('.peg_point');
	},
	

	getMostLeft: function(parts) {
		var ret = null;

		parts.each(function(part) {
			if (part.retrieve('left', '-1') != '-1' && (!ret || part.retrieve('left') < ret.retrieve('left'))) {
				ret = part;
			} else if (!ret || part.getLeft() < ret.getLeft()) {
				ret = part;
			}
		});

		return ret;
	},


	getMostRight: function(parts) {
		var ret = null;

		parts.each(function(part) {
			if (!ret || part.getLeft()+part.getWidth() > ret.getLeft()+ret.getWidth()) {
				ret = part;
			}
		});

		return ret;
	},


	getMostTop: function(parts) {
		var ret = null;

		parts.each(function(part) {
			if (part.retrieve('top', '-1') != '-1' && (!ret || part.retrieve('top') < ret.retrieve('top'))) {
				ret = part;
			} else if (!ret || part.getTop() < ret.getTop()) {
				ret = part;
			}
		});

		return ret;
	},


	getMostBottom: function(parts) {
		var ret = null;

		parts.each(function(part) {
			if (!ret || part.getTop()+part.getHeight() > ret.getTop()+ret.getHeight()) {
				ret = part;
			}
		});

		return ret;
	},


	selectNextPart: function() {
		var sps = this.getSelectedParts();

		if (sps.length == 1) {
			var sp = sps[0];

			var parts = this.getParts();
			for (var p=0; p<parts.length; p++) {
				if (parts[p] == sp) {
					var selp = parts[p+1];
					if (selp) {
						sp.fireEvent('unselect');
						selp.fireEvent('select');
					}
				}
			}
		}
	},


	selectPrevPart: function() {
		var sps = this.getSelectedParts();

		if (sps.length == 1) {
			var sp = sps[0];

			var parts = this.getParts();
			for (var p=0; p<parts.length; p++) {
				if (parts[p] == sp) {
					var selp = parts[p-1];
					if (selp) {
						sp.fireEvent('unselect');
						selp.fireEvent('select');
					}
				}
			}
		}
	},


	selectAllParts: function() {
		this.getParts().each(function(part) {
			part.addClass('selectedPart');
			this.options.rubberband.select(part);
		}, this);
	},


	unselectAllParts: function() {
		this.getParts().each(function(part) {
			part.removeClass('selectedPart');
			this.options.rubberband.deselect(part);
		}, this);
	},


	getPartAngle: function(src) {
		var paths = src.split('/');

		return paths[paths.length-2];
	},


	turnSelectedParts: function() {
		var parts = this.getSelectedParts();

		var left	= this.getMostLeft(parts);
		var right	= this.getMostRight(parts);
		var top		= this.getMostTop(parts);
		var bottom	= this.getMostBottom(parts);
		var origin	= 0;
		var angle	= 90;

		var part	= {x: left.getLeft(), y: left.getTop() };

		if (left && right && top && bottom) {
			var width	= (right.getLeft()+right.getWidth()) - left.getLeft();
			var height	= (bottom.getTop()+bottom.getHeight()) - top.getTop();

			var offsets = left.getParent().getOffsets();

			var xCenter = left.getLeft()-offsets.x+parseInt(width/2);
			var yCenter = top.getTop()-offsets.y+parseInt(height/2);

			parts.each(function(curPart){
				var xPart = curPart.getLeft()-offsets.x;
				var yPart = curPart.getTop()-offsets.y;
				var wPart = parseInt(curPart.getStyle('width'));
				var hPart = parseInt(curPart.getTop('height'));

				var p1 = new Point({x:xPart-xCenter, y:yPart-yCenter});
				var p2 = new Point({x:xPart-xCenter, y:yPart-yCenter});
				var cube = new Polygon([p1]);
				cube.rotate((angle / 180) * 3.1415926535897931, 0, 0);

				var newPoints = cube.getPoints();
				curPart.setStyle('left', newPoints[0].x+xCenter-wPart);
				curPart.setStyle('top', newPoints[0].y+yCenter);
				rotPart = this.rotateGroupPart(curPart, angle);

				var w = parseInt(rotPart.getStyle('width'));
				var h = parseInt(rotPart.getStyle('height'));

				rotPart.setStyle('left', rotPart.getLeft()+(h-w)-offsets.x);
			}, this);
		}
	},


	rotatePart: function(shift) {
		var selParts = this.getSelectedParts();

		if (selParts.length == 1) {
			currentPart = selParts[0];
			var src = currentPart.getAttribute('src');

			srcAngle = this.getPartAngle(src);
			orgAngle = srcAngle;

			if (orgAngle.charAt(0) == '0') {
				orgAngle = orgAngle.replace('0', '');

				if (orgAngle.charAt(0) == '0') {
					orgAngle = orgAngle.replace('0', '');
				}
			}

			angle = parseFloat(orgAngle);

			var newAngle = null;

			var degs = 22.5;
			if (shift) {
				degs = -22.5;
			}

			newAngle = angle + degs;

			if (newAngle > 337.5) {
				newAngle = 0;
			} else if (newAngle < 0) {
				newAngle = 337.5;
			}

			if (newAngle.toString().length == 1) {
				newAngle = '00' + newAngle;
			} else if (newAngle.toString().length == 2) {
				newAngle = '0' + newAngle;
			}

			if (newAngle == '22.5') {
				newAngle = '022.5';
			} else if (newAngle == '67.5') {
				newAngle = '067.5';
			}

			src = src.replace('/' + srcAngle + '/', '/' + newAngle + '/');

			newPart = this.makeDesignPart(src, parseInt(currentPart.getStyle('left')), parseInt(currentPart.getStyle('top')), currentPart.retrieve('angle'), getPartInfo(src, 'title'), getPartInfo(src, 'text'));

			newPart.addClass('selectedPart');
			currentPart.destroy();
		}
	},


	roundNumber: function(rnum, rlength) {
  		return Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
	},


	calculateDimensions: function() {
		var parts	= this.getParts();

		var left	= this.getMostLeft(parts);
		var right	= this.getMostRight(parts);
		var top		= this.getMostTop(parts);
		var bottom	= this.getMostBottom(parts);

		var xoff	= this.content.getCoordinates().left;
		var yoff	= this.content.getCoordinates().top;

		if (left && right && top && bottom) {
			this.options.pixels.width	= (right.getLeft()+right.getWidth()) - left.getLeft();
			this.options.pixels.height	= (bottom.getTop()+bottom.getHeight()) - top.getTop();

			if (this.options.pixels.width && this.options.pixels.height) {
				this.options.dimensions.width = parseInt(this.options.pixels.width/this.options.DPI)+this.options.padding;
				this.options.dimensions.height = parseInt(this.options.pixels.height/this.options.DPI)+this.options.padding;

				this.options.dimensions.width = this.roundNumber(parseFloat(this.options.pixels.width/this.options.DPI)+this.options.padding, 1);
				this.options.dimensions.height = this.roundNumber(parseFloat(this.options.pixels.height/this.options.DPI)+this.options.padding, 1);

				this.options.position = new Object();
				this.options.position.left = left.getLeft();
				this.options.position.top = top.getTop();

				this.options.offset = new Object();
				this.options.offset.x = xoff;
				this.options.offset.y = yoff;
			}
		}
	},


	calculateSelectedArea: function() {
		var parts 				= this.getSelectedParts();
		selectedArea	 		= new Object();
		selectedArea.center 	= new Object();
		selectedArea.offset 	= this.content.getCoordinates();

		if (parts.length) {
			var left	= this.getMostLeft(parts);
			var right	= this.getMostRight(parts);
			var top		= this.getMostTop(parts);
			var bottom	= this.getMostBottom(parts);

			var off		= this.content.getCoordinates();

			selectedArea.left		= left.getCoordinates().left;
			selectedArea.right		= right.getCoordinates().left+right.getCoordinates().width;

			selectedArea.top		= top.getCoordinates().top - off.top;
			selectedArea.bottom		= bottom.getCoordinates().top+bottom.getCoordinates().height - off.top;

			selectedArea.width		= selectedArea.right - selectedArea.left;
			selectedArea.height		= selectedArea.bottom - selectedArea.top;

			selectedArea.center.x 	= selectedArea.width / 2;
			selectedArea.center.y 	= selectedArea.height / 2;

			this.selectedArea = selectedArea;
		} else {
			selectedArea = null;
		}

		return selectedArea;
	},


	calculateArea: function() {
		var parts 				= this.getParts();
		selectedArea	 		= new Object();
		selectedArea.center 	= new Object();
		selectedArea.offset 	= this.content.getCoordinates();

		if (parts.length) {
			var left	= this.getMostLeft(parts);
			var right	= this.getMostRight(parts);
			var top		= this.getMostTop(parts);
			var bottom	= this.getMostBottom(parts);

			var off		= this.content.getCoordinates();

			selectedArea.left		= left.getCoordinates().left;
			selectedArea.right		= right.getCoordinates().left+right.getCoordinates().width;

			selectedArea.top		= top.getCoordinates().top - off.top;
			selectedArea.bottom		= bottom.getCoordinates().top+bottom.getCoordinates().height - off.top;

			selectedArea.width		= selectedArea.right - selectedArea.left;
			selectedArea.height		= selectedArea.bottom - selectedArea.top;

			selectedArea.center.x 	= selectedArea.width / 2;
			selectedArea.center.y 	= selectedArea.height / 2;

			this.selectedArea = selectedArea;
		} else {
			selectedArea = null;
		}

		return selectedArea;
	},


	rotateSelected: function(shift, count) {
		var parts = this.getSelectedParts();

		//if (!this.selectedArea) {
			this.calculateSelectedArea();
		//}

		if (this.selectedArea) {
			parts.each(function(part) {
				var angle = part.retrieve('angle');

				if (!angle) {
					angle=0;
				}

				angle = parseInt(angle);

				if (shift) {
					angle -= count;
					if (angle < 0) {
						angle=360;
					}
				} else {
					angle += count;
					if (angle > 360) {
						angle=0;
					}
				}

				var transX = (this.selectedArea.left - part.getCoordinates().left	+ this.getOffset().left)	+ this.selectedArea.center.x;
				var transY = (this.selectedArea.top  - part.getCoordinates().top	+ this.getOffset().top)		+ this.selectedArea.center.y;

				this.setPartAngle(part, angle);
				this.setPartOrigin(part, transX, transY);
			}, this);
		}
	},


	getOffset: function(part, angle) {
		return this.content.getCoordinates();
	},


	setPartAngle: function(part, angle) {
		part.setStyles({
			'-moz-transform': 'rotate(' + angle + 'deg)',
			'-webkit-transform': 'rotate(' + angle + 'deg)'
		});
		part.store('angle', angle);
	},


	setPartOrigin: function(part, transX, transY) {
		part.setStyles({
			'-moz-transform-origin': transX+'px ' + transY+'px',
			'-webkit-transform-origin': transX+'px ' + transY+'px'
		});
	},


	rotate: function(angle, part) {
		var newPart	= {x: 0, y: 0 };

		newPart.x = parseInt((part.x * Math.cos(angle)) + (part.y * Math.sin(angle)) );
		newPart.y = parseInt((part.y * Math.sin(angle)) - (part.y * Math.cos(angle)) );

		return newPart;
	},


	rotateGroupPart: function(part, degs) {
		currentPart = part;

		var degPos = 4;
		if (Browser.Engine.name == 'trident') {
			degPos = 6;
		}

		var src = currentPart.getAttribute('src');
		srcAngle = src.split('/')[degPos];
		orgAngle = src.split('/')[degPos];

		if (orgAngle.charAt(0) == '0') {
			orgAngle = orgAngle.replace('0', '');

			if (orgAngle.charAt(0) == '0') {
				orgAngle = orgAngle.replace('0', '');
			}
		}

		angle = parseInt(orgAngle);

		var newAngle = null;


		newAngle = angle + degs;
		if (newAngle > 315) {
			newAngle = 0;
		} else if (newAngle < 0) {
			newAngle = 315;
		}


		if (newAngle.toString().length == 1) {
			newAngle = '00' + newAngle;
		} else if (newAngle.toString().length == 2) {
			newAngle = '0' + newAngle;
		}


		src = src.replace('/' + srcAngle + '/', '/' + newAngle + '/');
		newPart = this.makeDesignPart(src, parseInt(currentPart.getStyle('left')), parseInt(currentPart.getStyle('top')), currentPart.retrieve('angle'), currentPart.retrieve('tip:title'), currentPart.retrieve('tip:text'));

		newPart.addClass('selectedPart');
		currentPart.destroy();
		currentPart = newPart;

		return currentPart;
	},


	deleteParts: function() {
		var selParts = this.getSelectedParts();

		if (selParts.length) {
			selParts.each(function(part) {
				//this.options.rubberband.deselect(part);
				part.removeClass('selectedPart');
				//dragGroup.remove(part);
				part.destroy();
			});
		}
	},


	copyCutParts: function(doCut) {
		var tmp = new Array();
		var selParts = this.getSelectedParts();
		var cl = 0;
		var ct = 0;

		var clipboard = new Array();

		if (selParts.length) {
			selParts.each(function(spart) {
				var part = spart.clone();
				part.store('left', parseInt(spart.getStyle('left')));
				part.store('top', parseInt(spart.getStyle('top')));
				tmp.push(part);

				if (!doCut) {
					spart.removeClass('selectedPart');
				}
			});

			var left	= this.getMostLeft(tmp).retrieve('left');
			var top		= this.getMostTop(tmp).retrieve('top');

			tmp.each(function(part) {
				part.removeClass('selectedPart');

				cl = part.retrieve('left');
				ct = part.retrieve('top');

				part.store('left', cl - left);
				part.store('top', ct - top);

				clipboard.push(part);
			});
		}

		if (doCut) {
			this.deleteParts();
		}

		return clipboard;
	},


	duplicateParts: function() {
		this.getSelectedParts().each(function(spart) {
			var part = this.makeDesignPart(spart.getAttribute('src'), (parseInt(spart.getStyle('left'))+10), (parseInt(spart.getStyle('top'))+10), spart.retrieve('angle'), spart.retrieve('tip:title'), spart.retrieve('tip:text'));

			this.options.rubberband.select(part);
			part.addClass('selectedPart');

			spart.removeClass('selectedPart');
			this.options.rubberband.deselect(spart);
		}, this);
	},


	pasteParts: function(clipboard, fromToolbar) {
		var xo = mousePositionX;
		var yo = mousePositionY;

		if($defined(fromToolbar)&& fromToolbar) {
			xo = 10;
			yo = 10;
		}

		if (clipboard.length) {
			this.unselectAllParts();

			clipboard.each(function(part) {
				var part = this.makeDesignPart(part.getAttribute('src'), (parseInt(part.retrieve('left'))+xo), (parseInt(part.retrieve('top'))+yo), part.retrieve('angle'), part.retrieve('tip:title'), part.retrieve('tip:text'));
				this.options.rubberband.select(part);
				part.addClass('selectedPart');
			}, this);
		}
	},


	mirrorPart: function(shift) {
		var parts = this.getSelectedParts();

		var left	= this.getMostLeft(parts);
		var right	= this.getMostRight(parts);
		var top		= this.getMostTop(parts);
		var bottom	= this.getMostBottom(parts);

		var rightPos 	= right.getLeft()+right.getWidth();
		var leftPos		= left.getLeft();
		var topPos		= top.getTop();
		var bottomPos	= bottom.getTop()+bottom.getHeight();

		parts.each(function(currentPart) {
			var offsets = currentPart.getParent().getOffsets();

			var degPos = 4;
			if (Browser.Engine.name == 'trident') {
				degPos = 6;
			}

			var src = currentPart.getAttribute('src');
			var srcAngle = this.getPartAngle(currentPart.getAttribute('src'));
			var orgAngle = srcAngle;

			if (orgAngle.charAt(0) == '0') {
				orgAngle = orgAngle.replace('0', '');

				if (orgAngle.charAt(0) == '0') {
					orgAngle = orgAngle.replace('0', '');
				}
			}

			angle = parseInt(orgAngle);

			if ((angle % 90) == 0) {
				var newAngle = null;

				if (angle == 0) 			{
					newAngle = 270;
				} else if (angle == 270) 	{
					newAngle = 0;
				} else if (angle == 90) 	{
					newAngle = 180;
				} else if (angle == 180) 	{
					newAngle = 90;
				}

				if (shift) {
					currentPart.setStyle('left', parseInt(leftPos-(currentPart.getLeft()-leftPos+currentPart.getWidth())-offsets.x)+'px');
				} else {
					currentPart.setStyle('left', parseInt(rightPos-currentPart.getWidth()+(rightPos-currentPart.getLeft())-offsets.x)+'px');
				}

				if (newAngle.toString().length == 1) {
					newAngle = '00' + newAngle;
				} else if (newAngle.toString().length == 2) {
					newAngle = '0' + newAngle;
				}

				src = src.replace('/' + srcAngle + '/', '/' + newAngle + '/');
				currentPart.setAttribute('src', src);
			}
		}, this);
	},


	flipPart: function(shift) {
		var parts = this.getSelectedParts();

		var left	= this.getMostLeft(parts);
		var right	= this.getMostRight(parts);
		var top		= this.getMostTop(parts);
		var bottom	= this.getMostBottom(parts);

		var rightPos 	= right.getLeft()+right.getWidth();
		var leftPos		= left.getLeft();
		var topPos		= top.getTop();
		var bottomPos	= bottom.getTop()+bottom.getHeight();

		parts.each(function(currentPart) {
			var offsets = currentPart.getParent().getOffsets();

			var src = currentPart.getAttribute('src');
			var srcAngle = this.getPartAngle(currentPart.getAttribute('src'));
			var orgAngle = srcAngle;

			if (orgAngle.charAt(0) == '0') {
				orgAngle = orgAngle.replace('0', '');

				if (orgAngle.charAt(0) == '0') {
					orgAngle = orgAngle.replace('0', '');
				}
			}

			angle = parseInt(orgAngle);

			if ((angle % 90) == 0) {
				var newAngle = null;

				if (angle == 0) 			{
					newAngle = 90;
				} else if (angle == 270) 	{
					newAngle = 180;
				} else if (angle == 90) 	{
					newAngle = 0;
				} else if (angle == 180) 	{
					newAngle = 270;
				}

				if (newAngle.toString().length == 1) {
					newAngle = '00' + newAngle;
				} else if (newAngle.toString().length == 2) {
					newAngle = '0' + newAngle;
				}

				if (shift) {
					currentPart.setStyle('top', parseInt(topPos-(currentPart.getTop()-topPos+currentPart.getHeight())-offsets.y)+'px');
				} else {
					currentPart.setStyle('top', parseInt(bottomPos-currentPart.getHeight()+(bottomPos-currentPart.getTop())-offsets.y)+'px');
				}

				src = src.replace('/' + srcAngle + '/', '/' + newAngle + '/');
				currentPart.setAttribute('src', src);
			}
		}, this);
	},


	moveParts: function(v,h) {
		if (v || h) {
			this.getSelectedParts().each(function(spart) {
				if (v) {
					spart.setStyle('top', (parseInt(spart.getStyle('top'))+v)+'px');
				}

				if (h) {
					spart.setStyle('left', (parseInt(spart.getStyle('left'))+h)+'px');
				}
			});
		}
	},


	movePartsLeft: function() {
		if (this.arePegsSelected()) {
			this.movePegsLeft();
		}
		
		if (this.getSelectedParts().length) {
			if (currentEvent && currentEvent.shift) {
				var h = -10;
			} else {
				var h = -1;
			}

			this.moveParts(null,h);
		}
	},
	
	
	movePartsUp: function() {
		if (this.arePegsSelected()) {
			this.movePegsUp();
		}
		
		if (this.getSelectedParts().length) {
			if (currentEvent && currentEvent.shift) {
				var v = -10;
			} else {
				var v = -1;
			}

			this.moveParts(v,null);
		}
	},


	movePartsDown: function() {
		if (this.arePegsSelected()) {
			this.movePegsDown();
		}
		
		if (this.getSelectedParts().length) {
			if (currentEvent && currentEvent.shift) {
				var v = 10;
			} else {
				var v = 1;
			}

			this.moveParts(v,null);
		}
	},
	
	
	movePartsRight: function(e) {
		if (this.arePegsSelected()) {
			this.movePegsRight();
		}
		
		if (this.getSelectedParts().length) {
			if (currentEvent && currentEvent.shift) {
				var h = 10;
			} else {
				var h = 1;
			}
			
			this.moveParts(null,h);
		}
	},

	
	makeNextCirclePart: function(shift) {
		var sel = this.getSelectedParts();

		if (sel.length == 1) {
			var alt = sel[0].getAttribute('alt');
			var alts = alt.split(' ');
			alt = alts[0];

			var circleType = parseInt(trimLeadingZero(alt));

			if (circleType) {
				var rots = 1;
				if (circleType == 90) {
					rots = 2;
				} else if (circleType == 180) {
					rots = 4;
				} else if (circleType == 270) {
					rots = 6;
				}

				this.duplicateParts();
				for (var r=0; r<rots; r++) {
					this.rotatePart(shift);
				}
			}
		}
	},


	setStyle: function(txt, value) {
		this.content.setStyle(txt, value);
	},


	getStyle: function(txt) {
		this.content.getStyle(txt);
	},


	setBackground: function(key, value) {
		this.options.background[key] = value;

		if (this.options.background.element) {
			this.options.background.element.setStyle('background-image', '');
		}

		if (this.options.background.area == 'full') {
			this.options.background.element = this.content;
		} else {
			this.content.setStyle('background-image', '');

			this.calculateDimensions();

			this.options.background.element = new Element('div').setStyles({
				'position': 'absolute',
				'left': this.options.position.left-this.options.offset.x,
				'top': this.options.position.top-this.options.offset.y,
				'width': this.options.pixels.width,
				'height': this.options.pixels.height,
				'z-index': '1'
			}).inject(this.content);
		}

		var repeat = 'no-repeat';

		if (this.options.background.xRepeat && this.options.background.yRepeat) {
			repeat = '';
		} else if (this.options.background.xRepeat) {
			repeat = 'repeat-x';
		} else if (this.options.background.yRepeat) {
			repeat = 'repeat-y';
		}

		this.options.background.element.setStyle('background-image', this.options.background.image);
		this.options.background.element.setStyle('background-repeat', repeat);
		this.options.background.element.setStyle('background-position', this.options.background.position);
	},
	

	arePegsSelected: function() {
		var ret = false;
		var selPegs = $$('.peg_selected');
		
		if (selPegs.length) {
			ret = true;
		}
		
		return ret;
	},

	
	movePegsLeft: function(e) {
		var selPegs = $$('.peg_selected');
		if (selPegs.length) {
			selPegs.each(function(peg) {
				peg.setStyle('left', parseInt(peg.getStyle('left'))-1+'px');
				peg.store('boardXPos', parseInt(peg.retrieve('boardXPos'))-1);
			});
		}
	},
	
	
	movePegsUp: function(e) {
		var selPegs = $$('.peg_selected');
		if (selPegs.length) {
			selPegs.each(function(peg) {
				peg.setStyle('top', parseInt(peg.getStyle('top'))-1+'px');
				peg.store('boardYPos', parseInt(peg.retrieve('boardYPos'))-1);
			});
		}
	},
	
	
	movePegsDown: function(e) {
		var selPegs = $$('.peg_selected');
		if (selPegs.length) {
			selPegs.each(function(peg) {
				peg.setStyle('top', parseInt(peg.getStyle('top'))+1+'px');
				peg.store('boardYPos', parseInt(peg.retrieve('boardYPos'))+1);
			});
		}
	},


	movePegsRight: function(e) {
		var selPegs = $$('.peg_selected');
		if (selPegs.length) {
			selPegs.each(function(peg) {
				peg.setStyle('left', parseInt(peg.getStyle('left'))+1+'px');
				peg.store('boardXPos', parseInt(peg.retrieve('boardXPos'))+1);
			});
		}
	},

	
	pegsAlignRight: function() {
		var pos = -1;
		var selPegs = $$('.peg_selected');
		var boardXPos = 0;
		
		if (selPegs.length) {
			selPegs.each(function(peg) {
				if (pos == -1 || parseInt(peg.getStyle('left')) > pos) {
					pos = parseInt(peg.getStyle('left'));
					boardXPos = peg.retrieve('boardXPos');
				}
			});
			
			selPegs.each(function(peg) {
				peg.setStyle('left', pos+'px');
				peg.store('boardXPos', boardXPos);
			});
		}
	},

	
	pegsAlignLeft: function() {
		var pos = -1;
		var selPegs = $$('.peg_selected');
		var boardXPos = 0;
		
		if (selPegs.length) {
			selPegs.each(function(peg) {
				if (pos == -1 || parseInt(peg.getStyle('left')) < pos) {
					pos = parseInt(peg.getStyle('left'));
					boardXPos = peg.retrieve('boardXPos');
				}
			});
			
			selPegs.each(function(peg) {
				peg.setStyle('left', pos+'px');
				peg.store('boardXPos', boardXPos);
			});
		}
	},

	
	pegsAlignTop: function() {
		var pos = -1;
		var selPegs = $$('.peg_selected');
		var boardYPos = 0;
		
		if (selPegs.length) {
			selPegs.each(function(peg) {
				if (pos == -1 || parseInt(peg.getStyle('top')) < pos) {
					pos = parseInt(peg.getStyle('top'));
					boardYPos = peg.retrieve('boardYPos');
				}
			});
			
			selPegs.each(function(peg) {
				peg.setStyle('top', pos+'px');
				peg.store('boardYPos', boardYPos);
			});
		}
	},

	
	pegsAlignBottom: function() {
		var pos = -1;
		var selPegs = $$('.peg_selected');
		var boardYPos = 0;
		
		if (selPegs.length) {
			selPegs.each(function(peg) {
				if (pos == -1 || parseInt(peg.getStyle('top')) > pos) {
					pos = parseInt(peg.getStyle('top'));
					boardYPos = peg.retrieve('boardYPos');
				}
			});
			
			selPegs.each(function(peg) {
				peg.setStyle('top', pos+'px');
				peg.store('boardYPos', boardYPos);
			});
		}
	},

	
	pegsDelete: function() {
		var selPegs = $$('.peg_selected');
		
		if (selPegs.length) {
			selPegs.each(function(peg) {
				peg.dispose();
			});
		}
	},

	
	drawPegs: function(pegs) {
		currentPegId = 0;
		var sp = new Array(pegs);
		var that = this;
		
		pegs.each(function(peg) {
			if (peg.class.indexOf('peg_point_red') != -1) {
				pegsRed++;
				currentPegId = pegsRed; 
				currentPeg = 'Red';
			} else if (peg.class.indexOf('peg_point_blue') != -1) {
				pegsBlue++;
				currentPegId = pegsBlue; 
				currentPeg = 'Blue';
			} else if (peg.class.indexOf('peg_point_green') != -1) {
				pegsGreen++;
				currentPegId = pegsGreen; 
				currentPeg = 'Green';
			} else if (peg.class.indexOf('peg_point_yellow') != -1) {
				pegsYellow++;
				currentPegId = pegsYellow; 
				currentPeg = 'Yellow';
			}
			
			var newPeg = new Element('div', {
				'id': currentPeg+'_'+currentPegId,
				'title': 'Peg #'+currentPegId,
				'class': peg.class,
				'styles': {
					'position': 'absolute',
					'left': peg.left+'px',
					'top': peg.top+'px',
					'z-index': '1000'
				}
			}).inject(that.content);

			if ($defined(peg.boardXPos)) {
				newPeg.store('boardXPos', peg.boardXPos);
			}

			if ($defined(peg.boardYPos)) {
				newPeg.store('boardYPos', peg.boardYPos);
			}
			
			//newPeg.makeDraggable();
		});
	},

	
	calcBoardPosFromPagePos: function(pegs) {
		var area = this.calculateArea();
		var pegs = this.getPegs();
		
		pegs.each(function(peg) {
			peg.store('boardXPos', (parseInt(peg.getStyle('left'))-parseInt(area.left)));
			peg.store('boardYPos', (parseInt(peg.getStyle('top'))-parseInt(area.top)));
		});
	}
		

});


