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

if(!$('comment'))
return;
/* initialize comment list*/

var comzStyles = [];
var comz = [];
var comzFx = [];
var comHeight = [];

var showReplyBtn = [];
var isReplyBtn = [];
var replyBtn = [];
var i1=0;
var i2=0;

$$(".commentlist li").each(function(el,i){
	
	
	comz[i]=el;
	comHeight[i]=el.getStyle("height").toInt();
	comzFx[i]=new Fx.Styles(el, {duration:700, wait:false,transition: Fx.Transitions.Quad.easeOut});
	
	comz[i].addClass('childof-'+replyz_PARENT[i]);
	
	if(replyz_NUMCHILD[i]>0)
	{
	 showReplyBtn[i1] = new Element('a',{'class':'showreply'}).inject(comz[i],'top').setHTML('<span>show reply </span>'+replyz_NUMCHILD[i]+'').setProperty('rel',replyz_ID[i]).setProperty('title','show children');
	i1++;
	}
	if(replyz_PARENT[i]>0)
	{
	 isReplyBtn[i2] = new Element('a',{'class':'isareply'}).inject(comz[i],'top').setHTML('<span>this is reply </span>').setProperty('rel',replyz_PARENT[i]).setProperty('title','show / hide parent');
	i2++;
	 }
	 replyBtn[i] = new Element('a',{'class':'reply'}).inject(comz[i],'top').setHTML('<span>reply</span>').setProperty('rel',replyz_ID[i]);
});


var windowScroll = new Fx.Scroll(window,{wait:false,duration: 1500,transition: Fx.Transitions.Quad.easeOut});
var comBox = new Element('div',{'id':'comBox1','styles':{'background-color':'#eeeeee','color':'#000','padding':'0px','overflow':'hidden'}}).injectAfter("respond");
var ComFx = new Fx.Styles(comBox, {duration:700, wait:false,transition: Fx.Transitions.Quad.easeOut}).set({'opacity':0,'height':0 });
replyBtn.each(function(el,i){
	
	
		el.addEvent("click",function(e){
			
			 ComFx.start({'height':0}).chain(function(){comBox.setHTML("")});
			
			
			e = new Event(e);
			e.stop();
			var current = this;
			windowScroll.scrollTo(0,($('respond').getTop().toInt()-(comHeight[i]+20))).chain( 
			function(){
				
				
	
				comBox.setStyles({'display':'block'});
				 comBox.setHTML('<div id="subcom" class="content">'+$('comment-'+current.getProperty("rel")).innerHTML+'</div>');
				 
				 $$('#subcom a.reply').each(function(el,i){el.remove();});
				 $$('#subcom a.isareply').each(function(el,i){el.remove();});

				 var subComFx = new Fx.Styles('subcom', {duration:700, wait:false,transition: Fx.Transitions.Back.easeOut});

				   
				   
				ComFx.start( {'opacity':[1,1],'height':comHeight[i]+50,'padding':10 }).chain(function(){
					
					var linkCancel = new Element('a',
					{'id':'cancel','href':'#'+'comment-'+current.getProperty("rel")}
							
					).setHTML("<span>cancel</span>").injectTop(comBox).addEvent('click',function(e){
						
						new Event(e).stop();
						linkCancel.remove();
						windowScroll.toElement('comment-'+current.getProperty("rel"));
						$("comment_parent").setProperty("value","");
						subComFx.start({'opacity':0 }).chain(function(){
						ComFx.start({'height':0,'padding':0}).chain(function(){comBox.setHTML("");comBox.setStyles({'display':'none'});});
											
											});

						
						});
					
					
					});
				 
				  		});
			
			$("comment_parent").setProperty("value",current.getProperty("rel"));
			
			});
	
});

isReplyBtn.each(function(el,i){
	
		el.addEvent('click',function(e){
		new Event(e).stop();
			
		clrz_show_parent(this.getProperty('rel'),this.getParent(),el);
		
	});
			
	
});


showReplyBtn.each(function(el,i){
	
	var current =el;
	
	el.addEvent('click',function(e){
		new Event(e).stop();
		

		clrz_show_reply(current.getProperty('rel'));
			
	});
		
	
});
var show_all = new Element('a',{'id':'show_all'}).injectBefore("respond").setStyle('display','none').setHTML('show all');


show_all.addEvent('click',function(e){
	new Event(e).stop();	
	clrz_show_all();
});


var ComParentFx;
var parentH;
var oldCurrent;
function clrz_show_parent(parentID,current,el){
	

		
	go = (function(){
		
		if($('comParent'))
			$('comParent').remove();
					 
			oldCurrent=current;
			
			parentH = ($('comment-'+parentID).getStyle('height').toInt()*-1)-15;
			var ComParent = new Element('li',{'id':'comParent','styles':{'display':'block','position':'absolute','width':$('comment-'+parentID).getStyle('width').toInt(),'opacity':0}}).setHTML($('comment-'+parentID).innerHTML).injectBefore(current);
		 	
			currentFx = new Fx.Styles(current, {duration:500, wait:false,transition: Fx.Transitions.Cubic.easeInOut});
			ComParentFx = new Fx.Styles(ComParent, {duration:500, wait:false,transition: Fx.Transitions.Quad.easeOut});
		currentFx.start({'margin-top':parentH*-1 });
			ComParentFx.start({'margin-top':0 }).chain(function(){ComParentFx.start({'opacity':1 })});
		
	});
	
	

	if($('comParent'))
	{
		el.removeClass('clrzComHide');
		ComParentFx.start({'opacity':0}).chain(function(){ 
		
		currentFx.start({'margin-top':15}).chain(function(){
			
			if(oldCurrent==current)
				{ $('comParent').remove();  return;	}
			go();
		
		});
	
	});
		
		
	}
	else
	{
	go.delay(0);
	el.addClass('clrzComHide');
	}
	
	
}

function clrz_show_all(){
	
	windowScroll.toElement('comments').chain(function(){
	
																$$('.commentlist li').each(
																function(el,i){
																	comz[i].setStyles({'display':'block'});
																	comzFx[i].start({ 'margin-top':15,'margin-bottom':0,'opacity':1,'padding-top':0,'padding-bottom':0  });

																	}
																	);
																	$('show_all').setStyle('display','none');
	});
	
	
}

function clrz_show_reply(parentID){
	$('show_all').setStyle('display','block');
	windowScroll.toElement('comments').chain(function(){
			$$('.commentlist li').each(function(el,i){
				
				 
				
					if((el.hasClass('childof-'+parentID)) || ( el.getProperty('id')==('comment-'+parentID) )  )
					{
						
					comz[i].setStyles({'display':'block'});
					comzFx[i].start({ 'margin-top':15,'margin-bottom':0,'opacity':1,'padding-top':0,'padding-bottom':0  });
					
					}
					else
					{
												

					comzFx[i].start({ 'margin-top':((comHeight[i])*-1)+15,'opacity':0 ,'padding-top':0,'padding-bottom':0,'margin-bottom':0}).chain(function(){ comz[i].setStyles({'display':'none'}); });
					
					}
				
			});
	
	});	
}
	
});