function init_photos(){
	reobserve();
	bgcol = $$('.inner')[0].getStyle('background-color').parseColor('#ffffff');
	if ($$('form')[0]) {
		$$('form').invoke('observe','submit',save_cap);
		$$('form .swapbtn').invoke('observe','click',swapclick);
		$$('.delbtn').invoke('observe','click',delete_observe);
	}
}

function delete_observe(e){
	posit = e.element().up('form').readAttribute('id').substr(4);
	filename = $('frm_'+posit).down('img').readAttribute('src').split('/').last();
	var left = (window.innerWidth - 310)/2, top = $('frm_'+posit).down('img').cumulativeOffset()[1]+50;
	new Insertion.Before( $$('.main').last() , '<div id="delete_img" class="main" style="position:absolute;top:'+top+'px;left:'+left+'px;z-index:100"><b>Are you sure you want to delete this image?</b><br><input type="button" value="Confirm" id="real_delete_img"> <input type="button" value="Cancel" id="cancel_img"></div>');
	gray(true);
	$('cancel_img').observe('click',function(){$('delete_img').remove();gray(false);})
	$('real_delete_img').observe('click',function(){
		new Ajax.Request(base_url+'upload/delete_image',{
			postBody: 'eid='+$F('id')+'&position='+posit+'&type=1&filename='+filename,
			onCreate: function() {
				gray(false);
				$('delete_img').remove();
				$('frm_'+posit).update('<span class="loadingi"></span>');
			},
			onSuccess: function(r){
				$('frm_'+posit).remove(); //doesnt work
				//decrement indices on images below
				$$('form').findAll(function(e,i){return i>parseInt(posit);}).each(function(e,i){e.writeAttribute('id','frm_'+(i+parseInt(posit)));}).invoke('observe','submit',save_cap);
				$$('form .swapbtn').findAll(function(e,i){return i>parseInt(posit);}).invoke('observe','click',swapclick);
				reobserve();
			}
		});
	});
}

function reobserve(){
	//var imagecounter = ( $$('textarea')[0] ) ? $$('textarea').size() : 0;
	$('uimg_link').observe('click',function(){
		window.open('/upload/image/'+$F('id')+'/1','upload window','width=350,height=300');
	});
}

function swapclick(e){
	var k = e.findElement('form').readAttribute('id').substr(4), str = '<select name="newpos" id="poz">';
	$$('select').invoke('remove');
	$$('textarea').each(function(e,i){str+=(k==i)?'':'<option value="'+i+'">'+parseInt(i+1)+'</option>';}); //<option value="'+i+'" selected>'+parseInt(i+1)+'</option> (cant select self)
	$('frm_'+k).down('.msg').update(str+'</select> <b>New Position</b>').up('form').down('.subbtn').writeAttribute('value','Update Caption and Change Position');
	e.element().hide();
}

function save_cap(e){
	e.stop();
	var ele = e.element(), pos = ele.readAttribute('id').substr(4), eid = $F('id'), cap = ele.down('textarea').getValue(); //oldpos = id number from form
	if ( $('poz') ) newpos = $F('poz');
	new Ajax.Request(base_url+'upload/save_caption', {
		postBody: ele.serialize()+'&pos='+pos+'&eid='+eid, //serialize will fetch newpos if selector present
		onCreate: function() {ele.down('.msg').update('<span class="loadingi"></span>');},
		onSuccess: function(res) {
			d=res.responseText;
			if (d == 1) d = ''; //ignore successful query notifications (just flash area)
			ele.down('textarea').highlight({duration:0.3}).next('.msg').update(d).next('.subbtn').writeAttribute('value','Update Caption').next('.swapbtn').show();
			if ( $('frm_'+pos).down('select') ) {
				$('frm_'+newpos).writeAttribute('id','frm_'+pos); //swap indices
				ele.writeAttribute('id','frm_'+newpos);
				swapz($('frm_'+pos),$('frm_'+newpos)); //physically swaps two forms
				$('frm_'+newpos).down('textarea').highlight({duration:0.5}).value = cap; //new cap does not carry over
			}
			$$('form').invoke('observe','submit',save_cap); //this doesnt always work when changing pos to same
			$$('form .swapbtn').invoke('observe','click',swapclick);
			$$('.delbtn').invoke('observe','click',delete_observe);
		}
	});
}

function swapz(el1,el2) {
	var rep1 = el1.parentNode.replaceChild(el2.cloneNode(true),el1);
	var rep2 = el2.parentNode.replaceChild(el1.cloneNode(true),el2);
}