//jQuery.noConflict();

jQuery(document).ready(function(){	
	jQuery('div.patientprev').click(function(){	
		// reset layer
		jQuery('div.galwrapper').remove();		
		
		// get id 
		var id = jQuery(this).attr('id').replace('patientprev','');
		
		var description = jQuery(this).children('div.galhidden').children('div.desc').html();
		var quote =  jQuery(this).children('div.galhidden').children('div.quote').html();
		var patientName = jQuery(this).children('div.patientname').html();
		var gallerySection = jQuery('#galtitle i').html();

		// make new layer
		var wrapper;
		var leftLayer = '';
		var rightLayer = '';
		var nrPic = 0;
	
		jQuery(this).children('div.picturecontainer').children('img').each(
			function(){
				leftLayer+='<img src="'+jQuery(this).attr('src')+'"  />';
				nrPic ++;
				if (nrPic %2 ==0) leftLayer+='<br>';
			}
		);
		jQuery(this).children('div.galhidden').children('img').each(
			function(){
				leftLayer+='<img src="'+jQuery(this).attr('src')+'"/>';
				nrPic ++;
				if (nrPic %2 ==0) leftLayer+='<br>';
			}
		);
	
		// if is not a single patient
		if(jQuery('div.patientprev').size()!=1)
		{
			if (id == 1)
			{
				rightLayer += '<div id="galnavigation"><img id="next" style="cursor:pointer;float:right" src="/img/gallerynext.jpg"/></div>';
			}
			else if(id == jQuery('div.patientprev').size()){
					rightLayer += '<div id="galnavigation"><img id="back" style="cursor:pointer;float:left" src="/img/galleryback.jpg"/></div>';
			}
			else
			{
				rightLayer += '<div id="galnavigation"><img id="back" style="cursor:pointer;float:left" src="/img/galleryback.jpg"/><img id="next" style="cursor:pointer;float:right" src="/img/gallerynext.jpg"/></div>';
			}
		}
//											<h2>' + patientName + ': <em> ' + gallerySection + '</em></h2> \

		var positionTop = 	jQuery(window).height() / 2 - 330 - (-jQuery(window).scrollTop());	
		
		wrapper = ' \
			<div class="galwrapper outerpair1" style="top:'+positionTop+'px"> \
				<div class="outerpair2"> \
					<div class="shadowbox"> \
						<div class="innerbox" style="width:700px;	height:600px;background-color:#ffffff;"> \
							<div class="galmenu"> \
								<div class="galpictureHeader"> \
                            <h2 style="color:white">The Waldorf Center For Plastic Surgery</h2> \
                </div> \
								<div style="position: absolute; right: 3px; top: 3px;"> \
									<img id="close" style="cursor:pointer" src="/img/galleryclose.jpg"/> \
								</div> \
								<div style="clear:both;"></div> \
							</div> \
							<div style="margin: 10px;"> \
								<div style="width:470px;float:left;text-align:center;"> \
									<div id="galcontainer"> \
										<div id="galpicturecontainer"> \
											<h2>' + patientName + '</h2> \
											'
											+ leftLayer +
											' \
											<div> \
												<span> Before </span> \
												<span> After </span> \
											</div> \
											<br style="clear: both;"> \
										</div> \
										<br style="clear: both;"> \
									</div> \
								</div> \
								<div class="galRight"> \
                        <p> ' + description + '</p><br /><br /> \
                        <div class="galTestimonial"> ';
					wrapper += quote.length?'<p>"'+quote+'"</p>':'';
          wrapper += '   <p class="rightText">-- ' + patientName +'</p> \
                        </div> \
                        ' + rightLayer + ' \
                    </div> \
                </div> \
            </div> \
        </div> \
    </div> \
		';
		
		
		jQuery('body').append(wrapper);
		jQuery('#close').click(function(){	
			jQuery('div.galwrapper').remove();
		});
		
		// navigation		
		jQuery('#back').click(function(){	
			Back(id);
		});
		
		jQuery('#next').click(function(){	
			Next(id);
		});
		
		
		jQuery('div.galwrapper').draggable();
		supersleight.init();
	});
});

var Back = function(id){
	if (id > 1){
		var simulatedClick = '#patientprev'+(id-1);
		jQuery(simulatedClick).click();
	}
}

var Next = function(id){
	var maxDivs = jQuery('div.patientprev').size();
	if (id < maxDivs){
		var simulatedClick = '#patientprev'+(id-(-1));
		jQuery(simulatedClick).click();
	}
}