/**
 * Custom Rumproast Stuff
 */
 
 function showRightL(event) {

 $('hp-left-1').removeClassName('active');
 $('hp-left-1').addClassName('hidden');
 
 $('hp-left-2').removeClassName('hidden');
 $('hp-left-2').addClassName('active');
 
} 

 function showLeftL(event) {

 $('hp-left-2').removeClassName('active');
 $('hp-left-2').addClassName('hidden');
 
 $('hp-left-1').removeClassName('hidden');
 $('hp-left-1').addClassName('active');
 
} 

 function showRightR(event) {

 $('hp-right-1').removeClassName('active');
 $('hp-right-1').addClassName('hidden');
 
 $('hp-right-2').removeClassName('hidden');
 $('hp-right-2').addClassName('active');
 
} 

 function showLeftR(event) {

 $('hp-right-2').removeClassName('active');
 $('hp-right-2').addClassName('hidden');
 
 $('hp-right-1').removeClassName('hidden');
 $('hp-right-1').addClassName('active');
 
} 

function showCustomizer(event) {

 $('rr-customizer').removeClassName('hidden');
 $('rr-customizer').addClassName('active');
 
}

function closeCustomizer(event) {

 $('rr-customizer').removeClassName('active');
 $('rr-customizer').addClassName('hidden');
 
}

function closeProductOptions(event) {

 $('product-options').removeClassName('active');
 $('product-options').addClassName('hidden');
 
}

function viewProductOptions(event) {

 $('product-options').removeClassName('hidden');
 $('product-options').addClassName('active');
 
}

function closeGiftPackageOptions(event) {

 $('giftpackage-options').removeClassName('active');
 $('giftpackage-options').addClassName('hidden');
 
}

function viewGiftPackageOptions(event) {

 $('giftpackage-options').removeClassName('hidden');
 $('giftpackage-options').addClassName('active');
 
}

function closePhotoDetails(event) {

 $('photo-details').removeClassName('active');
 $('photo-details').addClassName('hidden');
 
}

function viewPhotoDetails(event) {

 $('photo-details').removeClassName('hidden');
 $('photo-details').addClassName('active');
 
}

function scaleIt(v,what,iWidth) {
  

 var floorSize = .2;
 var ceilingSize = 1.5;
  //v = floorSize + (v * (ceilingSize - floorSize));
  $(what).style.width = (v*iWidth)+'px';
  
} 

function zoomImage() {
    var zoom_slider = $('rr-zoom-slider'),
        box = $('image-edit-userimage-drag').firstDescendant(),
		iWidth = box.getWidth();
		
	

    new Control.Slider(zoom_slider.down('.rr-handle'), zoom_slider, {
      range: $R(0.1, 1.8),
      sliderValue: 1,
	  increment: 0.0066,
      onSlide: function(value){
	  	
  		scaleIt(value,box,iWidth);
	},
      onChange: function(value){
  		scaleIt(value,box,iWidth);
	}
    });
}

function allowZoom() {
	$('rr-zoom-controls').removeClassName('hidden');
	
	zoomImage();
	//new Draggable('rr-user-image-1');
}

function sendData() {
	imgnum = $('rr-edit-senddata').readAttribute('rel');
	pos = $('image-edit-userimage-drag');
	wid = $('image-edit-userimage-drag').firstDescendant();
	src = wid.src;
	positionW = wid.getStyle('width');
	positionX = pos.getStyle('left');
	positionY = pos.getStyle('top');
	
	target = "rr-userimage-drag-"+imgnum;
	tpos = $(target);
	twid = $(target).firstDescendant();
	
	tpos.setStyle({
	  left: pos.getStyle('left'),
	  top: pos.getStyle('top'),
	  position: 'absolute'
	});
	
	twid.setStyle({
		width: wid.getStyle('width')
	});
	
	
	cancelImageEdit();
	
}

function openImageEdit(event){
	var imgnum = this.id.charAt(11);
	$('image-edit-section').removeClassName('hidden');
	$('image-edit-section').addClassName('active');
	$('rr-edit-senddata').writeAttribute('rel',imgnum);
	new Draggable('image-edit-userimage-drag');
	
	sendImageToEditor(imgnum);
	allowZoom();
}

function changeColor(event){
	var newColor = this.id.split('-')[1];
	var whichId = "text-"+newColor;
	
	$$('.textOption').each( function(e){e.removeClassName('active')});
	$$('.textOption').each(function(e){e.addClassName('hidden')});
	$(whichId).removeClassName('hidden'); 
	$(whichId).addClassName('active'); 
	
}

function changeBgColor(event){
	var newColor = this.id.split('-')[2];
	var whichId = "bg-"+newColor;
	
	$$('.bgOption').each( function(e){e.removeClassName('active')});
	$$('.bgOption').each(function(e){e.addClassName('hidden')});
	$(whichId).removeClassName('hidden'); 
	$(whichId).addClassName('active'); 
	
}

function sendImageToEditor(num) {
			
	var fromSrc = "rr-userimage-drag-"+num;
	var fromImageSrc = $(fromSrc).firstDescendant();
	var toSrc = $('image-edit-userimage-drag');
	var toImageSrc = $(toSrc).firstDescendant();
		
	toImageSrc.src = fromImageSrc.src;
	
	toSrc.setStyle({
	  left: $(fromSrc).getStyle('left'),
	  top: $(fromSrc).getStyle('top')
	});
	
	toImageSrc.setStyle({
		width: fromImageSrc.getStyle('width')
	});
	
	// set size
	var fromSize = "rr-userimage-"+num;
	var tempW = $(fromSize).getStyle('width');
	var tempH = $(fromSize).getStyle('height');
	
	$('image-edit-userimage').setStyle({
		  width: tempW,
		  height: tempH
	});
	
}



function carryImagesToColorStep(){
	for (i=0; i<rrtotal; i++) {
		var num = i+1;
		var fromSrc = "rr-userimage-drag-"+num;
		var fromImageSrc = $(fromSrc).firstDescendant();
		var toContainer = "rr-colorstep-drag-"+num;
		var toSrc = $(toContainer);
		var toImageSrc = $(toSrc).firstDescendant();
		
		toImageSrc.src = fromImageSrc.src;
		
		toSrc.setStyle({
		  left: $(fromSrc).getStyle('left'),
		  top: $(fromSrc).getStyle('top'),
		  position: 'absolute'
		});
		
		toImageSrc.setStyle({
			width: fromImageSrc.getStyle('width')
		});	
	}
}

function cancelImageEdit(event){
	
	$('rr-edit-senddata').writeAttribute('rel','');
	$('image-edit-section').removeClassName('active');
	$('image-edit-section').addClassName('hidden');
	
	
}

function readyUploadFields(){
	
	for (i=0; i<rrtotal; i++) {
		var imagenum = i+1;
		var form 	= 'rr-upload-form-'+imagenum;
		var status	= 'rr-upload-status-'+imagenum;
		
		
		$(form).setStyle({display: 'block'});
		$(status).update('');
	}
}

function goToStep1(event){
  	 $('rr-customizer-step-1').removeClassName('hidden');
	 $('rr-customizer-step-1').addClassName('active');
	 
	 $('rr-customizer-step-3').removeClassName('active');
	 $('rr-customizer-step-3').addClassName('hidden');
	 
	 $('rr-customizer-step-4').removeClassName('active');
	 $('rr-customizer-step-4').addClassName('hidden');

	 $('rr-customizer-step-2').removeClassName('active');
	 $('rr-customizer-step-2').addClassName('hidden');
	 
	 
	 
	  $$('.rr-breadcrumb').each(function(e){
		 e.removeClassName('rr-on');	
	 });
	 
	  
	  $('rr-customizer-breadcrumb-step-1').addClassName('rr-on');
	
}

function goToStep2(event) {
 // hide step 1
 $('rr-customizer-step-1').removeClassName('active');
 $('rr-customizer-step-1').addClassName('hidden');
 // make upload fields visible again
 readyUploadFields();
 
 
 $('rr-customizer-step-2').removeClassName('hidden');
 $('rr-customizer-step-2').addClassName('active');
 
  $('rr-customizer-breadcrumb-step-1').removeClassName('rr-on');
  $('rr-customizer-breadcrumb-step-2').addClassName('rr-on');
  
  $('rr-customizer-breadcrumb-step-3').addClassName('ready');
  $('rr-customizer-breadcrumb-step-1').addClassName('ready');
  
  
  /* get the image data*/
  /*
  new Ajax.Updater('rr-userimage-drag', 'http://rump-roast.com/rrcustomizer/admin/ajax.php', { 
  		method: 'get',
		parameters: {mode:'getimages_old', limit: rrtotal, img_sku: rrsku, img_session: rrsession}
 	});
 */
	new Ajax.Request('http://rump-roast.com/rrcustomizer/admin/ajax.php', {
	 	method: 'get',
		parameters: {mode:'getimages', limit: rrtotal, img_sku: rrsku, img_session: rrsession},
		onSuccess: function(response) {
		    putImagesOnPage(response);
		}
	});
	
	
}

function goToStep3(event) {

 $('rr-customizer-step-2').removeClassName('active');
 $('rr-customizer-step-2').addClassName('hidden');
 
 $('rr-customizer-step-3').removeClassName('hidden');
 $('rr-customizer-step-3').addClassName('active');
 
  $('rr-customizer-breadcrumb-step-2').removeClassName('rr-on');
  $('rr-customizer-breadcrumb-step-3').addClassName('rr-on');
 
  $('rr-customizer-breadcrumb-step-4').addClassName('ready');
  
 carryImagesToColorStep();
 
}

function goToStep4(event) {

  $('rr-customizer-step-2').removeClassName('active');
 $('rr-customizer-step-2').addClassName('hidden');
 
 $('rr-customizer-step-3').removeClassName('active');
 $('rr-customizer-step-3').addClassName('hidden');
 
 $('rr-customizer-step-4').removeClassName('hidden');
 $('rr-customizer-step-4').addClassName('active');
 
  $$('.rr-breadcrumb').each(function(e){
	 e.removeClassName('rr-on');	
 });
 
  
  $('rr-customizer-breadcrumb-step-4').addClassName('rr-on');
  
  showReview();
  populateImageInfo();
 
}

function topGoToStep1(event){
	goToStep1();

}

function topGoToStep2(event){
	if ($('rr-customizer-breadcrumb-step-2').hasClassName('ready') == true){
		goToStep2(event);
		reviewEditImages(event);
	}
}

function topGoToStep3(event){
	if ($('rr-customizer-breadcrumb-step-3').hasClassName('ready') == true){
			goToStep3(event);
			reviewEditColors(event);
	}
}

function topGoToStep4(event){
	if ($('rr-customizer-breadcrumb-step-4').hasClassName('ready') == true){
			goToStep4(event);
			
	}
}

function putImagesOnPage(response) {
		var json = response.responseText.evalJSON();
		//json.length;
		for (i=0; i<json.length; i++) {
			var whichimg = i + 1;
			var tempsrc = json[i]['img_name'];
			var srcArray = tempsrc.split('.');
			var src = srcArray[0]+"_tn.jpg";			
			var imageSrc = "rr-userimage-drag-"+whichimg;
			var imagetoupdate = $(imageSrc).firstDescendant();
			imagetoupdate.src = "http://rump-roast.com/rrcustomizer/uploaded/"+src;
		}

}

function showReview(){
	var copied = $('rr-customizer-step-3-content').cloneNode(true);
	$('review').insert(copied);
}

function populateImageInfo(){
	
	var infoString = {};
	// image name
	// image scale
	// image pos x,y
	// template bg
	// template txt
	// template scale (aka tScale)
	
	infoString["images"] = {};
	
	for (i=0; i<rrtotal; i++){
		infoString["images"][i] = {};	
		var num = i+1;
		
		// image name
		var imageId = "rr-colorstep-drag-"+num;
		var imageEl = $(imageId).firstDescendant();
		var imageSrc = imageEl.src;
		var imageArr = imageSrc.split("/");
		var imageName = imageArr[imageArr.length-1];
		infoString["images"][i]["img"] = imageName;
		
		// image scale calculated by width
		var origWidth = imageEl.width;
		var newWidth = imageEl.getStyle('width');
		var scale = "1";
		if (newWidth == null) {
			scale = 1;
		} else {
			newWidth = newWidth.split('px');
			
			scale = (newWidth[0]/origWidth);//*100;
		}
		//alert(scale);
		infoString["images"][i]["scale"] = scale;
		
		// image position: left, top (x,y)
		var xPos = 0;
		if ($(imageId).getStyle('left') != null){
			xPos = $(imageId).getStyle('left');
			xPos = xPos.split('px');
			xPos = xPos[0];
		}
		var yPos = 0;
		if ($(imageId).getStyle('top') != null){
			yPos = $(imageId).getStyle('top');
			yPos = yPos.split('px');
			yPos = yPos[0];
		}
		infoString["images"][i]["pos"] = xPos+","+yPos;
		
		
	} 
	
	// template bg image
	$$('.bgOption').each(function(e){
		if(e.hasClassName('active')){
			
			var bgArr = e.src.split("/");
			var bgName = bgArr[bgArr.length-1];
			infoString["bg"] = bgName;
			
		}
	});
	
	// template bg image
	$$('.textOption').each(function(e){
		if(e.hasClassName('active')){
			
			var textArr = e.src.split("/");
			var textName = textArr[textArr.length-1];
			infoString["text"] = textName;
			
		}
	});
	
	infoString["tScale"] = tscale;
	infoString["tImages"] = timages;
	var thisisit = Object.toJSON(infoString);
	$('Image').down(2).down(0).value = thisisit;
	
}




function relayError(imagenum,error){
	var form 	= 'rr-upload-form-'+imagenum;
	var status	= 'rr-upload-status-'+imagenum;
	
	$(form).setStyle({display: 'block'});
	$(status).update('<span class="error">'+error+'</span>');

}


function closeKeepAlive() {
 
	if (/AppleWebKit|MSIE/.test(navigator.userAgent)) {
 
		new Ajax.Request("/ping/close", { asynchronous:false });
 
	}
 
}

function uploadImage(imagenum) {
	closeKeepAlive();
	
	var form 	= 'rr-upload-form-'+imagenum;
	var status	= 'rr-upload-status-'+imagenum;
	//var valchx	= form['img_name'];
	//var value = $(valchx).getValue;
	
	$(form).setStyle({display: 'none'});
	$(status).update("Please be patient. This part can take a bit.<br><img src='http://rump-roast.com/rrcustomizer/admin/images/rr-ajax-loader.gif'/>");

}

function stopUpload(imagenum) {
	var status 	= 'rr-upload-status-'+imagenum;
	$(status).update('Image '+imagenum+' has been successfully uploaded');
	
	rruploaded++;
		
	if (rruploaded == rrtotal){
		// make button visible
		$('rr-step-1-next').removeClassName('hidden');
		// make top nav ready
		$('rr-customizer-breadcrumb-step-2').addClassName('ready');

	}
}

function reviewEditImages(event) {
	
 $('rr-customizer-step-3').removeClassName('active');
 $('rr-customizer-step-3').addClassName('hidden');

 $('rr-customizer-step-4').removeClassName('active');
 $('rr-customizer-step-4').addClassName('hidden');
 
 $('rr-customizer-step-2').removeClassName('hidden');
 $('rr-customizer-step-2').addClassName('active');
 
 $$('.rr-breadcrumb').each(function(e){
	 e.removeClassName('rr-on');	
 });
 $('rr-customizer-breadcrumb-step-2').addClassName('rr-on');
 
 
 
}

function reviewEditColors(event) {

 $('rr-customizer-step-4').removeClassName('active');
 $('rr-customizer-step-4').addClassName('hidden');
 
 $('rr-customizer-step-3').removeClassName('hidden');
 $('rr-customizer-step-3').addClassName('active');
 
 $$('.rr-breadcrumb').each(function(e){
	 e.removeClassName('rr-on');	
 });
 
  $('rr-customizer-breadcrumb-step-3').addClassName('rr-on');
 
 
}

function start_slideshow(holdername, start_frame, end_frame, delay) {
        setTimeout(switch_slides(holdername, start_frame,start_frame,end_frame, delay), delay);
}
                            
function switch_slides(holdername, frame, start_frame, end_frame, delay) {
        return (function() {
            Effect.Fade(holdername + frame);
            if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
            setTimeout("Effect.Appear('"+ holdername + frame + "');", 850);
            setTimeout(switch_slides(holdername, frame, start_frame, end_frame, delay), delay + 850);
        })
}


window.onload = function() {
	if ($('hp-left-btn-1')){
		 //$('hp-left-btn-1').observe('mouseover', showLeftL);
		 //$('hp-left-btn-2').observe('mouseover', showRightL);
	
		 //$('hp-right-btn-1').observe('mouseover', showLeftR);
		 //$('hp-right-btn-2').observe('mouseover', showRightR);
		 
		 start_slideshow("hp-left-", 1, 8, 3000);
		 start_slideshow("hp-right-", 1,8, 5000);
		// start_slideshow("hpslide",1,5,1500);

	 }
	 
	if ($('rr-button')){
		 $('close_customizer').observe('click',closeCustomizer);
		 $('rr-button').observe('click', showCustomizer);
		 $('rr-step-1-next').observe('click', goToStep2);
		 $('rr-step-2-next').observe('click', goToStep3);
		 $('rr-step-3-next').observe('click', goToStep4);
		 
		 $('rr-customizer-breadcrumb-step-1').observe('click',topGoToStep1);
		 $('rr-customizer-breadcrumb-step-2').observe('click',topGoToStep2);
		 $('rr-customizer-breadcrumb-step-3').observe('click',topGoToStep3);
		 $('rr-customizer-breadcrumb-step-4').observe('click',topGoToStep4);
	 		
		 $('rr-edit-senddata').observe('click', sendData);
		 
		 $$('.edit-image').each(function(element) {
	     	element.observe('click',openImageEdit);
	     });
		 
		 $$('.color-swatch').each(function(element){
		 	element.observe('click',changeColor);	 
		 });
		 
		 $$('.bg-color-swatch').each(function(element){
		 	element.observe('click',changeBgColor);	 
		 });
		 
		 $('image-edit-cancel').observe('click',cancelImageEdit);
		 $('review-edit-images').observe('click',reviewEditImages);
         $('review-edit-colors').observe('click',reviewEditColors);		
         
		 $('close-product-options').observe('click',closeProductOptions);
		 $$('.view-product-options').each(function(element){
		 	element.observe('click',viewProductOptions);	 
		 });
		 
		 $('close-giftpackage-options').observe('click',closeGiftPackageOptions);
		 $$('.view-giftpackage-options').each(function(element){
		 	element.observe('click',viewGiftPackageOptions);	 
		 });
         
         $('close-photo-details').observe('click',closePhotoDetails);
		 $('view-photo-details').observe('click',viewPhotoDetails);

         //new Tip('jpeg', 'some stuff');
         //var imagetoopen = "http://rump-roast.com/rrcustomizer/products/tshirt_short_round.jpg";
         //$('view-options').observe('click',myLightbox.start('product_image'));
		 

		 
	}
}