// Princess Draw Program
// SEF 12/15/2007
// SEF 12/18/2007 put images in array and created divs with document.write
//                also did setuptag by this array
// next
//     create the position functions based on setup info at top
//     create navigation icons.

var cl=0;
var imgwidth=100;
var divwidth=500;
var numimages=35;
var xto=((imgwidth * numimages) - divwidth)*-1;

var ptimage = new Array();
ptimage[0]='';
ptimage[1]='url(images/small_princess_face_001.png)';
ptimage[2]='url(images/small_princess_face_002.png)';
ptimage[3]='url(images/small_princess_face_003.png)';
ptimage[4]='url(images/small_princess_face_004.png)';
ptimage[5]='url(images/small_princess_face_005.png)';

ptimage[6]='url(images/small_princess_hair_001.png)';
ptimage[7]='url(images/small_princess_hair_002.png)';
ptimage[8]='url(images/small_princess_hair_003.png)';
ptimage[9]='url(images/small_princess_hair_004.png)';
ptimage[10]='url(images/small_princess_hair_005.png)';

ptimage[11]='url(images/small_princess_eyes_001.png)';
ptimage[12]='url(images/small_princess_eyes_002.png)';
ptimage[13]='url(images/small_princess_eyes_003.png)';
ptimage[14]='url(images/small_princess_eyes_004.png)';
ptimage[15]='url(images/small_princess_eyes_005.png)';

ptimage[16]='url(images/small_princess_nose_001.png)';
ptimage[17]='url(images/small_princess_nose_002.png)';
ptimage[18]='url(images/small_princess_nose_003.png)';
ptimage[19]='url(images/small_princess_nose_004.png)';
ptimage[20]='url(images/small_princess_nose_005.png)';

ptimage[21]='url(images/small_princess_mouth_001.png)';
ptimage[22]='url(images/small_princess_mouth_002.png)';
ptimage[23]='url(images/small_princess_mouth_003.png)';
ptimage[24]='url(images/small_princess_mouth_004.png)';
ptimage[25]='url(images/small_princess_mouth_005.png)';

ptimage[26]='url(images/small_princess_dress_001.png)';
ptimage[27]='url(images/small_princess_dress_002.png)';
ptimage[28]='url(images/small_princess_dress_003.png)';
ptimage[29]='url(images/small_princess_dress_004.png)';
ptimage[30]='url(images/small_princess_dress_005.png)';

ptimage[31]='url(images/small_princess_shoe_001.png)';
ptimage[32]='url(images/small_princess_shoe_002.png)';
ptimage[33]='url(images/small_princess_shoe_003.png)';
ptimage[34]='url(images/small_princess_shoe_004.png)';
ptimage[35]='url(images/small_princess_shoe_005.png)';



// extra images that go with face
//var xptimage = new Array();
//xptimage[26]='url(images/small_princess_hands_001.png)';
//xptimage[27]='url(images/small_princess_hands_002.png)';
//xptimage[28]='url(images/small_princess_hands_003.png)';
//xptimage[29]='url(images/small_princess_hands_004.png)';
//xptimage[30]='url(images/small_princess_hands_005.png)';

//xptimage[26]='url(images/small_princess_feet_001.png)';
//xptimage[27]='url(images/small_princess_feet_002.png)';
//xptimage[28]='url(images/small_princess_feet_003.png)';
//xptimage[29]='url(images/small_princess_feet_004.png)';
//xptimage[30]='url(images/small_princess_feet_005.png)';
// this writes the divs for each image into the body
function additems() {
	var i;
	var thestuff;
	for (i=1;i<=numimages;i++) {
	  thestuff='<div class=\"item\" id=\"item' +
	                i + 
	                '\" style=\"background-image:' +
	                ptimage[i] +
	                ';\"></div>';
	  document.write(thestuff);
	  }
} 

var xfrom=0;
function setleft(inl) {
	var lf;
	lf=inl + 'px ';
    return lf;
} 

window.addEvent('domready', function(){

	var drop = $('cart');
	var dropFx = drop.effect('background-color', {wait: false}); // wait is needed so that to toggle the 

	//this is the functions assigned to the divs below
	function setuptag (intag) {
		$(intag).addEvent('mousedown', function(e) {
			e = new Event(e).stop();
			var clone = this.clone()
			.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
			.setStyles({'opacity': 0.7, 'position': 'absolute'})
			.addEvent('emptydrop', function() {
				this.remove();
				drop.removeEvents();
			}).inject(document.body);
	 
			drop.addEvents({
				'drop': function() {
			
			    var theimage=$(intag).getStyle('background-image');
			    var newimage='url(images/' + theimage.substring(17);
			    var whatimage=theimage.substring(26,30);
			    var handsimage='url(images/princess_hand' + theimage.substring(30,39);
			    var legsimage='url(images/princess_legs' + theimage.substring(30,39);
			    var slevimage='url(images/princess_sleev' + theimage.substring(31,40);
			    //alert('slevimage: ' + slevimage);
			    //alert('legsimage: ' + legsimage);
				if (whatimage == 'face') {
				  //place hands and feet too
				  $('facedraw').setStyle('background-image',newimage);
				  $('handsdraw').setStyle('background-image',handsimage);
				  $('legsdraw').setStyle('background-image',legsimage);
				} 
				if (whatimage == 'nose') {
				  $('nosedraw').setStyle('background-image',newimage); 
				} 
				if (whatimage == 'hair') {
				  $('hairdraw').setStyle('background-image',newimage); 
				} 
				if (whatimage == 'eyes') {
				  $('eyesdraw').setStyle('background-image',newimage); 
				} 
				if (whatimage == 'mout') {
				  $('mouthdraw').setStyle('background-image',newimage); 
				} 
				if (whatimage == 'dres') {
				  $('dressdraw').setStyle('background-image',newimage);
				  $('sleevesdraw').setStyle('background-image',slevimage); 
				} 
				if (whatimage == 'shoe') {
				  $('shoesdraw').setStyle('background-image',newimage); 
				} 	
				drop.removeEvents();
				clone.remove();
				dropFx.start('F2B0B0').chain(dropFx.start.pass('ffffff', dropFx));
			
				
				},
				'over': function() {
					dropFx.start('F2B0B0');
				},
				'leave': function() {
					dropFx.start('ffffff');
				}
			});
	 
			var drag = clone.makeDraggable({
				droppables: [drop]
			}); // this returns the dragged element
	
			drag.start(e); // start the event manual
		});
	}
	//end setuptag
	

	// assign the functions to the item divs
	for (i=1;i<=numimages;i++) {
		var thething;
		thething='item' + i;
		setuptag(thething); 
	} 
	

	// this is the scroll right click function
	$('right').addEvent('click', function(e){ 
	 	e = new Event(e); 
	 	cl=cl-imgwidth;
	 	if (cl < xto) {
	 	 cl=cl+imgwidth;
	 	} 
	 	var newlf=setleft(cl);
		$('inner').setStyle('left',newlf);
		e.stop(); 
	});

	// this is the scroll left click function
	$('left').addEvent('click', function(e){ 
	 	e = new Event(e); 
	 	cl=cl+imgwidth;
	 	if (cl > xfrom) {
	 	 cl=cl-imgwidth;
	 	} 
	 	var newlf=setleft(cl);
		$('inner').setStyle('left',newlf);
		e.stop(); 
	});

	// this is the postion to faces click function
	$('face').addEvent('click', function(e){ 
	 	e = new Event(e); 
	 	var newlf=setleft(0);
		$('inner').setStyle('left',newlf);
		e.stop(); 
	});

	// this is the postion to hair click function
	$('hair').addEvent('click', function(e){ 
	 	e = new Event(e); 
	 	var newlf=setleft(-500);
		$('inner').setStyle('left',newlf);
		e.stop(); 
	});

	// this is the postion to eyes click function
	$('eyes').addEvent('click', function(e){ 
	 	e = new Event(e); 
	 	var newlf=setleft(-1000);
		$('inner').setStyle('left',newlf);
		e.stop(); 
	});
	
	// this is the postion to noses click function
	$('nose').addEvent('click', function(e){ 
	 	e = new Event(e); 
	 	var newlf=setleft(-1500);
		$('inner').setStyle('left',newlf);
		e.stop(); 
	});
	
	// this is the postion to mouths click function
	$('mouth').addEvent('click', function(e){ 
	 	e = new Event(e); 
	 	var newlf=setleft(-2000);
		$('inner').setStyle('left',newlf);
		e.stop(); 
	});

	// this is the postion to mouths click function
	$('dress').addEvent('click', function(e){ 
	 	e = new Event(e); 
	 	var newlf=setleft(-2500);
		$('inner').setStyle('left',newlf);
		e.stop(); 
	});
		// this is the postion to mouths click function
	$('shoes').addEvent('click', function(e){ 
	 	e = new Event(e); 
	 	var newlf=setleft(-3000);
		$('inner').setStyle('left',newlf);
		e.stop(); 
	});
// end dom ready		
});