// JavaScript Document
var file='home';
var margin=5;
var last_cont_w=0;
var last_inner_w=0;
var start_inner_w=0;
var start_inner_h=0;
var handle_h=0;
var scrollpos=0;
var global_scrollpercent=0;
var aspect_ratio=0;
var inner_w=0;
var h_w=40;
var window_w=0;
var window_h=0;
var cont_w=0;
var cont_pos=0;
var left_pos=0;
var right_pos=0;
var json;
var dragging=false;
var url_delimiter='/';
var alertcount=0;

function my_alert(t){
	
/*	$('#alert').prepend(alertcount+':'+t+' -- ');
	alertcount++;*/
	
}
function adjustHandles(){
	//my_alert('adjustHandles');
	
	
	 window_w=$(window).width();
	 window_h=$(window).height();
	 handle_h=window_h-200;
	 cont_w=$('#contentholder').width();
	 inner_w=$('#content').width();
	 cont_pos=parseInt((window_w-cont_w)/2);
	 left_pos=cont_pos-margin-h_w;
	 right_pos=cont_pos+cont_w+margin;
	 
	 var dist=cont_w-cont_min_width;
	 var min_left_pos=cont_pos-margin-h_w+dist/2;
	 var min_right_pos=cont_pos+cont_w+margin-dist/2;
	 
	 var dist_max=cont_w-cont_max_width;
	 var max_left_pos=cont_pos-margin-h_w+dist_max/2;
	 var max_right_pos=cont_pos+cont_w+margin-dist_max/2;
	if(max_left_pos<0){
		max_left_pos=0;
	}
	if(max_right_pos>window_w-40){
		max_right_pos=window_w-40;
	}
	
	
	$('#left_handle').draggable( "option", "containment", [max_left_pos,0,min_left_pos,window_h] );
	
	$('#right_handle').draggable( "option", "containment", [min_right_pos,0,max_right_pos,window_h] );
	
	
	$('#contentholder').css('left',cont_pos+'px');
	$('#info').css('left',(right_pos+40)+'px');
	$('#left_handle').css('left',left_pos+'px');
	$('#right_handle').css('left',right_pos+'px');
	$('#left_handle').css('height',handle_h+'px');
	$('#right_handle').css('height',handle_h+'px');
	
	$('#scrollbar').css('left',(right_pos-10)+'px');
	
	
	adjustImgNav();
}
function adjustContent(){
	//my_alert('adjustContent');
	var middle=window_h/2;
	var dist=middle-$('#content').position().top;
	var newtop=parseInt(middle-dist*aspect_ratio);
	$('#content').css('top',newtop+'px');
	var h=(1/aspect_ratio)*inner_w;
	$('#content').height(h);
	if(json.type=='work_detail'){
		$('#project_'+json.project_id).find('img').attr('height',h);
		
	}
	//window.setTimeout(function(){
	adjustOverviewNav();
	adjustScrollbar();
	//},10);
	

}
function adjustOverviewNav(){
	//my_alert('OverviewNavi');
	$('.ov_link').each(function(){
		var img=$(this).find('img');
		var w=img.width();
		var mainwidth=parseFloat(1000);
		var mainheight=parseFloat(img.attr('mainheight'));
		var h=(mainheight/mainwidth)*w;//img.height();//
		my_alert(w+" - "+h);
		var im_ov=$(this).find('.img_ov_nav');
		im_ov.css('width',w+'px');
		im_ov.css('height',h+'px');
		var last_h=0;
		var last_p=0;
		var new_ov_h=0;
		var last_line=-1;
		$(this).find('.link').each(function(){
			//var p_w=$(this).attr('percent_width');
			var line=$(this).attr('line');
			var p_h=$(this).attr('percent_height');
			var my_h=0;
			if(line!=last_line&&h!=0){
			//var my_w=Math.floor((p_w/100)*w);
			
			 my_h=Math.round((p_h/100)*h);
			  new_ov_h+=parseInt(my_h);
			 last_h=my_h;
			 last_p=p_h;
			 last_line=line;
			 
			
			//my_alert(p_h+"/100 * "+h+" = "+my_h);
			}else{
				my_h=last_h;
			}
			$(this).height(my_h);
			
			});
			//im_ov.css('height',new_ov_h+'px');
			img.attr('height',new_ov_h);
		
		});
	
}
function adjustScrollbar(){
	//my_alert('adjustScrollbar');
	var inner_h=$('#content').height()+200;
	var outer_h=$('#contentholder').height();
	var container_h=outer_h-200;
	
	var new_h=(outer_h/inner_h)*container_h;
	if(new_h>container_h){
		$('#scrollbar').hide();
	}else{
		$('#scrollbar').show();	
	}
	$('#scrollbar').height(new_h);
	
	var scroll_top=$('#contentholder').scrollTop();
	var newtop=(container_h/inner_h)*scroll_top;
	$('#scrollbar').css('top',newtop+'px');
	$('#scrollbar').draggable( "option", "containment", [0,0,window_w,window_h-200-new_h] );
}
function adjustImgNav(){
	//my_alert('adjustImgNavi');
	$('.img_nav').each(function(){
		var img_h=$(this).find('img').height();
		$(this).find('.next_img').css('height',img_h+'px');
		$(this).find('.prev_img').css('height',img_h+'px');
		$(this).find('.back_to_overview').css('height',img_h+'px');
		
	});
}
function setImgNavVisibility(){
	//my_alert('setImgVisibility');
	
	if(json.project_id!=undefined){
		if(json.project_id==0){
			$('#top_nav').hide();
		}else{
			$('#top_nav').show();
		}
		if(json.project_id==json.content.length-1){
			$('#bottom_nav').hide();
		}else{
			$('#bottom_nav').show();
		}
	
	
	$('.img_nav').each(function(){
		if(json.img_id==json.content[json.project_id].images.length-1){
			$(this).find('.next_img').hide();
		}else{
			$(this).find('.next_img').show();
		}
		if(json.img_id==0){
			$(this).find('.prev_img').hide();
		}else{
			$(this).find('.prev_img').show();
		}
		
		
	});
	}
}
function setImg(){
	//my_alert('setImg');
	var img=$('#project_'+json.project_id).find('img');
	img.attr('src',json.content[json.project_id].images[json.img_id].url);
}
function setTransition(img,p_id,im_id,type){
	//my_alert('setTransition');
			var src1=img.attr('src');
			var pos1=$('#contentholder').position().left;
			var w1=img.width();
			var h1=img.height();
			img.attr('src',json.content[p_id].images[im_id].url);
			var src2=img.attr('src');
			var w2=calculateNewWidth(json.content[p_id].images[im_id].width,json.content[p_id].images[im_id].height,h1);
			//var h2=img.height();
			$('#transition_overlay').show();
			$('#transition_overlay').css('opacity',1);
			$('#transition_overlay').css('width',(w1+w2+100)+'px');
			
			$('#transition_overlay').css('height',(h1)+100+'px');
			var endpoint=0;
			
			var im1='';//<img id="im1" style="float:left;" width="'+w1+'px" height="'+h1+'px" src="'+src1+'">';
			var im2='';//<img id="im2" style="opacity:0;float:left;" width="'+w2+'px" height="'+h1+'px" src="'+src2+'">';
			switch(json.file){
				case 'tearsheet_detail'	:
					 
					 switch(type){
						case 'next'	:
							im1='<div id="im1_cont" style="position:absolute;width:'+w1+'px;overflow:auto;height:'+h1+'px"><img id="im1" style="position:absolute" width="'+w1+'px" height="'+h1+'px" src="'+src1+'"></div>';
					 		im2='<img id="im2" style="opacity:1;position:absolute" width="'+w2+'px" height="'+h1+'px" src="'+src2+'">';
					 
							$('#transition_overlay').html(im2+im1);
							$('#transition_overlay').css('left',(pos1+40)+'px');//'left',(pos1)+'px');
							$('#im1_cont').stop().animate({width:'0px'},function(){
								$('#transition_overlay').stop().animate({opacity:0},function(){$(this).hide();});
							});
							$('#im2').stop().animate({opacity:1});
							//$('#im1').animate({opacity:0});
						break;
						case 'prev'	:
							im1='<img id="im1" style="position:absolute" width="'+w1+'px" height="'+h1+'px" src="'+src1+'">';
					 		im2='<div id="im2_cont" style="position:absolute;width:100px;overflow:auto;height:'+h1+'px"><img id="im2" style="opacity:1;position:absolute" width="'+w2+'px" height="'+h1+'px" src="'+src2+'"></div>';
					 
							$('#transition_overlay').html(im1+im2);
							$('#transition_overlay').css('left',(pos1+40)+'px');//'left',(pos1)+'px');
							$('#im2').unbind('load').bind('load',function(){
								$('#im2_cont').stop().animate({width:w2+'px'},function(){
									$('#transition_overlay').stop().animate({opacity:0},function(){$(this).hide();});
								});
								$('#im2').stop().animate({opacity:1});
							});
							//$('#im1').animate({opacity:0});
						break;
					}
					
				break;
				default:
					var imgtocheck='#im1';
					im1='<img id="im1" style="float:left;" width="'+w1+'px" height="'+h1+'px" src="'+src1+'">';
					im2='<img id="im2" style="opacity:0;float:left;" width="'+w2+'px" height="'+h1+'px" src="'+src2+'">';
					switch(type){
						case 'next'	:
							$('#transition_overlay').html(im1+im2);
							endpoint=pos1+40-w1;
							$('#transition_overlay').css('left',(pos1+40)+'px');//'left',(pos1)+'px');
						break;
						case 'prev'	:
							$('#transition_overlay').html(im2+im1);
							$('#transition_overlay').css('left',(pos1+40-w1)+'px');
							endpoint=pos1+40;
						break;
						
					}
					$('#im2').unbind('load').bind('load',function(){
						$('#im2').animate({opacity:1});
						$('#im1').animate({opacity:0});
						$('#transition_overlay').stop().animate({left:(endpoint)+'px'},function(){
							
							$(this).animate({opacity:0},function(){$(this).hide();});
							
						});
					});
				break;
			}
			
			
			setImgNavVisibility();
			
	
}

function adjustProjectPage(){
	//my_alert('adjustProjectPage');
	if(json.contentheight!=undefined){
	$('#content').css('height',json.contentheight+'px');	
		}else{
	$('#content').css('height','500px');
		}
	
	setContentAspectRatio();
	adjustHandles();
	adjustContent();
	var st=$('#contentholder').scrollTop();
	
	if(json.project_id!=''){
		var top=$('#project_'+json.project_id).position().top-100+st;
		$('#contentholder').scrollTop(top);	
	}
	$('.loadimage').each(function(){
			var url=$(this).attr('mysrc');
			$(this).attr('src',url);	
			
		});	
		adjustImgNav();
		
		$('.next_img').unbind('click').bind('click',function(){
			adjustHandles();
			adjustContent();
			var p=$(this).parents('.img_nav');
			var im_id=parseInt(p.attr('img_id'));
			var p_id=parseInt(p.attr('project_id'));
			
			im_id+=1;
			
			
			if(im_id>json.content[p_id].images.length-1){
				
				im_id=json.content[p_id].images.length-1;
				
			}
			json.project_id=p_id;
			json.img_id=im_id;
				
			p.attr('img_id',im_id);
			var img=p.find('img');
			setTransition(img,p_id,im_id,'next');
			setInfo();
			
			
			});
		$('.prev_img').unbind('click').bind('click',function(){
			adjustHandles();
			adjustContent();
			var p=$(this).parents('.img_nav');
			var im_id=parseInt(p.attr('img_id'));
			var p_id=parseInt(p.attr('project_id'));
			json.project_id=p_id;
			json.img_id=im_id;
			im_id-=1;
			
			if(im_id<0){
				
				im_id=0;
				
			}
			json.project_id=p_id;
			json.img_id=im_id;
				
			p.attr('img_id',im_id);
			var img=p.find('img');
			setTransition(img,p_id,im_id,'prev');
			setInfo();
			
			});
		$('.back_to_overview').unbind('click').bind('click',function(){
			var p=$(this).parents('.img_nav');
			
			var p_id=parseInt(p.attr('project_id'));
	
			window.location.href='index.php#'+json.rel_file+url_delimiter+p_id;
				
			/*switch(json.file){
				case "work_detail"	:
					window.location.href='index.php#file=work&project_id='+p_id;
				break;
				case "tearsheet_detail":
					window.location.href='index.php#file=tearsheet&project_id='+p_id;
				break;
				
			}*/	
		});
		$('#top_nav').unbind('click').bind('click',function(){
			
			json.project_id=parseInt(json.project_id)-1;
			var pid=json.project_id;
			if(pid<0){
				pid=0;	
				json.project_id=pid;
			}
			json.img_id=0;
			setImg();
			$('.project_detail').hide();
			$('#project_'+pid).show();
			
			setInfo();
			adjustImgNav();
			setImgNavVisibility();
			adjustHandles();
			adjustContent();
		});
		$('#bottom_nav').unbind('click').bind('click',function(){
			
			json.project_id=parseInt(json.project_id)+1;
			var pid=json.project_id;
			if(pid>json.content.length-1){
				pid=json.content.length-1;	
				json.project_id=pid;
			}
			json.img_id=0;
			setImg();
			$('.project_detail').hide();
			$('#project_'+pid).show();
			setInfo();
			adjustImgNav();
			setImgNavVisibility();
			adjustHandles();
			adjustContent();
		});
		adjustImgNav();
		setImgNavVisibility();
	
}
function adjustScrollTop(){
	//my_alert('adjustScrollTop');
	 var st=(global_scrollpercent*$('#content').height());
			
	var lst=$('#contentholder').scrollTop();
	var nst=st;//(lst*3+st)/4;
	$('#contentholder').clearQueue();
	$('#contentholder').scrollTop(nst);
	
}
function setContentAspectRatio(){
	//my_alert('setContentAspectRatio');
	start_inner_w=$('#content').width();
	start_inner_h=$('#content').height();
	aspect_ratio=start_inner_w/start_inner_h;	
}
function calculateNewWidth(width,height,newheight){
	//my_alert('calculateNewWidth');
	return ((width/height)*newheight);
}
function setContent(j){
	//my_alert('setContent');
	json=j;
	//alert(json);
	if(json.content!=undefined){
		$('#content').html('');
		$('#info').html('');
		/*-------------BEFORE LOADING-----------*/ 
		switch(json.file){
			
			default:
				var w='480px';
				
				if(json.width!=undefined){
					var w=json.width;
				}
				if(json.contentheight!=undefined){
					
					$('#content').css('height',json.contentheight);
				}else{
					$('#content').css('height','auto');
					setContentAspectRatio();
				}
				
				$('#contentholder').animate({
				  width: w,
				  opacity: 0
				},
				{
				  step: function(now, fx) {
					adjustHandles();
				  },
				  complete: function(){
					  	
						for(var i in json.content){
							//alert(i)
							$('#content').append(buildContent(json.content[i],i));
						}
						if(json.contentheight!=undefined){
					
							$('#content').css('height',json.contentheight);
						}else{
							$('#content').css('height','auto');
							
						}
						setContentAspectRatio();
						$('#top_nav').hide();
						$('#bottom_nav').hide();
						//$('#contentholder').css('overflow','auto');//SIM
						$('#info').html('');
						
						/*-------------AFTER LOADING-----------*/ 
						rebindStuff();
						switch(json.type){
							case 'work_detail':
	
								//adjustImgNav();	
								adjustProjectPage();//',100);		
								$('#top_nav').show();
								$('#bottom_nav').show();
								$('#contentholder').css('overflow','visible');
								setInfo();
								adjustImgNav();
								setImgNavVisibility();
							break;
							case 'home_detail':
	
								//adjustImgNav();	
								adjustProjectPage();//',100);		
								$('#contentholder').css('overflow','visible');
								setInfo();	
								adjustImgNav();
								//setImgNavVisibility();
							break;
							case 'work':
								
								$('a').unbind('mouseover').bind('mouseover',function(){
									//$(this).find('div').animate({opacity:0.5});	
									if(json.file=='home'){	
										var im_id=$(this).attr('img_id');	
										var i=$(this).attr('content_index');
										if(json.content[i]!=undefined&&json.content[i].images!=null){
											$('#info').html(urldecode(json.content[i].images[im_id].text));	
										}
									}
								});
								$('a').unbind('mouseout').bind('mouseout',function(){
									//$(this).find('div').animate({opacity:0});	
									var im_id=$(this).attr('img_id');
									if(json.file=='home'){	
										$('#info').html('');
									}
																							 
								});
								//adjustImgNav();	
								$('#contentholder').css('overflow','hidden');
								if(json.project_id!=''){
								/*var st=$('#contentholder').scrollTop();*/
								var top=$('#project_'+json.project_id).position().top-100;
								 $('#contentholder').scrollTop(top);
								}
								
							break;
							
							default:
							
								$('#contentholder').css('overflow','hidden !important');
								
							break;
						}
						adjustContent();// TB
						/*------------------------*/ 
						
						$('#contentholder').animate({
						  
						  opacity: 100
						  
						});
					}
				});
				
				
			break;	
			
		}
		
		
		
	}
	
}
function rebindStuff(){
	
	$('#contentholder').scrollTop(0);
	//$(document).ready(function(){
		$('img').unbind('load').bind('load',function(){
											 
				adjustContent();	
				my_alert('adjustContent');									 
														 
		});
		
	//});
	
}
function setInfo(){
	//my_alert('setInfo');
	//alert(json.project_id+' -> '+json.img_id);
	if(json.project_id!=undefined){
		
		var html = '';
		var p=$('#project_'+json.project_id).find('.img_nav');
		var im_id=parseInt(p.attr('img_id'));
		var title = urldecode(json.content[json.project_id].title);
		var text = urldecode(json.content[json.project_id].text);
		
		if(title!=undefined){
			html+= '<h2>'+title+'</h2>';
		}
		if(text!=undefined){
			html+= '<p>'+text+'</p>';
		}
		//$('#info').html(json.content[json.project_id].images[im_id].info);
		$('#info').html(html);
		
		setImgMeta();
		
	}
}
function setImgMeta(){
	//my_alert('setImgMeta');
	var img_num=parseInt(json.img_id)+1;
		var img_html='<h1>'+img_num+'/'+json.content[json.project_id].images.length+'</h1>';
		if(json.content[json.project_id].images[json.img_id]!=undefined){
			if(json.content[json.project_id].images[json.img_id].text!=undefined){
			img_html+='<p>'+urldecode(json.content[json.project_id].images[json.img_id].text)+'</p>';
			}
		}
		
		$('#project_meta_'+json.project_id).html(img_html);
		
	
}
function buildContent(cont,index){
	//my_alert('buildContent');
	var r='';
	//alert(cont.type)
	switch(cont.type){
		case 'contentelm':
			r+='<div class="contentelm">';
			r+='<h1>'+urldecode(cont.title)+'</h1>';
			r+='<p>'+urldecode(cont.text)+'</p>';
			r+='</div>';
			
		break;
		case 'maintitle':
			r+='<div class="maintitle">';
			r+='<h1>'+urldecode(cont.title)+'</h1>';
			r+='</div>';
		break;
		case 'table':
			r+='<table class="table" cellpadding="0" cellspacing="0">';
			r+='<tr><td class="first">'+urldecode(cont.left)+'</td><td>'+urldecode(cont.right)+'</td></tr>';
			r+='</table>';
		break;
		case 'html':
			r+=urldecode(cont.html);
		break;
		case 'project':
			var img_i=0;
			var display='display:none;';
			if(parseInt(json.project_id)==index){
				img_i=json.img_id;
				 display='';
			}
			r+='<div class="project_detail" id="project_'+index+'" style="'+display+'">';
			r+='<div class="img_nav" style="padding:0px 0px 30px 0px;" id="imgholder_'+index+'" img_id="'+img_i+'" project_id="'+index+'" >';
			r+='<a class="prev_img" style="z-index:'+(index+1)+'002"></a>';
			r+='<a class="next_img" style="z-index:'+(index+1)+'001"></a>';
			r+='<a class="back_to_overview" style="z-index:'+(index+1)+'003"></a>';
			if(cont.images[img_i] != undefined){			
				r+='<img class="loadimage" src="img/img_placeholder.png" mysrc="'+(cont.images[img_i].url)+'" height="'+json.contentheight+'"  style="float:left">';
			}
			r+='</div>';
			r+='<div class="meta" style="clear:left" id="project_meta_'+index+'">';
			r+='</div>';
			r+='</div>';
			
		break;
		case 'project_overview':
			
			
			r+='<div id="project_'+index+'">'; // tb
			r+='<div style="padding:0px 0px 45px 0px">';
			var linecount=0;
			var count=0;
			var imgcount=0;
			var inlinecount=0;
			r+= '<div class="ov_link" style="width:100%;padding:0px 2px 2px 0px;">';
			//r+= '<div class="ov_link" style="width:100%;padding:0px 0px 0px 0px;">';
				r+='<div class="img_ov_nav" style="position:absolute;z-index:'+(1200+index)+'">';
				r+='<div style="width:100%;height:100%">';
				
			for(var j in cont.images){
				
				var borderwidth='1px';
				var paddingtop='4px';
				if(json.file=='tearsheet'){
					var file='tearsheet_detail';	
					 borderwidth='10px';
					 paddingtop='0px';
				}else if(json.file=='commissions'){
					var file='commissions_detail';	
				}else if(json.file=='home'){
					var file='home_detail';
				}else{
					var file='work_detail';
				}
				
				var url='index.php#'+file+url_delimiter+index+url_delimiter+j;
				r+= '<div class="link"  percent_height="'+(cont.images[j].h_percent)+'"  line="'+(cont.images[j].line)+'" style="padding:0px;width:'+(cont.images[j].w_percent)+'%">';
				var border='';
				if(cont.images[j].border!=undefined){
					border=cont.images[j].border;
				}
				r+= '<div class="imgholder " style="width:100%;height:100%;">';
				r+= '<a href="'+url+'" content_index="'+index+'" img_id="'+j+'" style="display:block;width:100%;height:100%;'+cont.images[j].border+';background-position:bottom right;"><div style="width:100%;height:100%;opacity:0;background-image:url(img/blank.png)">&nbsp;</div></a>';	
				r+= '</div>';
				r+= '</div>';
				
						
			}
			r+= '</div>';
			
			r+='<h1 style="padding-top:'+paddingtop+'">'+urldecode(cont.title)+'</h1>'; // tb
			r+='</div>';
				r+= '<div class="imgholder " >';
				var file=json.rel_file;
				var url='index.php#'+file+url_delimiter+index+url_delimiter+'0';
				r+= '<a  href="'+url+'"><img width="100%" src="'+cont.overview_image+'" class="ov_img" mainheight="'+cont.mainheight+'" target_src="'+cont.images[0].url+'"></a>';	
				r+= '</div>';
				r+= '</div>';
			
			r+='<div style="clear:left;"></div>';
			r+='</div>';
			r+= '</div>';
			
			
		break;
	}
	return r;
	
	
}
function rebindScrollbar(){
	
	$( "#scrollbar" ).unbind('drag').bind( "drag", function(event, ui) {
		
		var top=$(this).position().top;
		var inner_h=$('#content').height()+200;
		var outer_h=$('#contentholder').height();
		var container_h=outer_h-200;
		
		var scroll_top=(inner_h/container_h)*top;
		$('#contentholder').scrollTop(scroll_top);
	

	});
	
	
	$("#contentholder").unbind('mousewheel').bind('mousewheel', function(event, delta) {
			var dir = delta > 0 ? 'Up' : 'Down',
                vel = (delta);
				var newtop=$('#contentholder').scrollTop();
			//	$('#info').text(newtop);
				newtop-=parseInt(vel*40);
				
				//my_alert(newtop);
				
				$('#contentholder').scrollTop(newtop);
				adjustScrollbar();
                return false;
        });
	
}

$(document).ready(function(){
	//$("a[rel^='prettyPhoto']").prettyPhoto();		  
	//checkURL();
	//$('#contentholder').tinyscrollbar();

	h_w=$('#right_handle').width();
	start_inner_w=$('#content').width();
	start_inner_h=$('#content').height();
	aspect_ratio=start_inner_w/start_inner_h;
	$('.draggable').draggable({ axis: 'x'});
	$('#scrollbar').draggable({ axis: 'y'});
	
	$('a').click(function(){
		file=$(this).attr('file');
		$('a').removeClass('selected');
		
		$("a[file='"+file+"']").addClass("selected");
		$(".subMenu").hide();
		$("a[file='"+file+"']").parent("li").children("ul").show();
		$("a[file='"+file+"']").parent("li").parent("ul").show();
		
	});
	$( "#left_handle" ).bind( "drag", function(event, ui) {
		adjustScrollTop();
		var left=$(this).position().left;
		last_cont_w=cont_w;
		last_inner_w=inner_w;
		cont_w=cont_w+(left_pos-left)*2;
		if(cont_w<cont_min_width){
			cont_w=cont_min_width;
			//$(this).draggable('mouseup');
		}
		$('#contentholder').css('width',cont_w+'px');
		adjustHandles();
		adjustContent();
		adjustScrollTop();
	});

	$( "#right_handle" ).bind( "drag", function(event, ui) {
		
		var left=$(this).position().left;
		 last_cont_w=cont_w;
		last_inner_w=inner_w;
		cont_w=cont_w+(left-right_pos)*2;
		if(cont_w<cont_min_width){
			var dist=cont_w-cont_min_width;
			cont_w=cont_min_width;
			//$(this).trigger('mouseup');
			/*-------------  ----*/
			
		}
		$('#contentholder').css('width',cont_w+'px');
		adjustHandles();
		adjustContent();
		adjustScrollTop();
		

	});
	
	
	$( "#left_handle" ).bind( "dragstart", function(event, ui) {
		global_scrollpercent=$('#contentholder').scrollTop()/$('#content').height();
		dragging=true;
		
		//alert(global_scrollpercent);
	});
	$( "#right_handle" ).bind( "dragstart", function(event, ui) {
		global_scrollpercent=$('#contentholder').scrollTop()/$('#content').height();
		dragging=true;
	});
	$( "#left_handle" ).bind( "dragstop", function(event, ui) {
		dragging=false;
		adjustHandles();
	});
	$( "#right_handle" ).bind( "dragstop", function(event, ui) {
		dragging=false;
		adjustHandles();
	});
	
	$(window).resize(function() {
		adjustHandles();
		adjustContent();
	});
	adjustHandles();
	
	rebindScrollbar();
	//$('#contentholder').scrollbarPaper();
	/*$('#contentholder').jScrollPane({
			autoReinitialise: true
		}
);*/
	//adjustContent();
	
	
});


    var lastTouchY=0;
	var touchY=0; 
	var startTouch=0;
	 var endTouch=0; 
	
	$(document).bind('touchstart', function(event) {
		
		
    var targetEvent =  event.originalEvent.changedTouches[0];;//event.changedTouches[0];  
	 lastTouchY=targetEvent.pageY;
		touchY=targetEvent.pageY;
		startTouch=touchY;
		endTouch=touchY;
		 
});


$(document).bind('touchmove', function(event) {
	
   var targetEvent =   event.originalEvent.changedTouches[0];;//event.changedTouches[0];  
   endTouch=touchY;
	 lastTouchY=touchY;
	 touchY=targetEvent.pageY;
	 var diff=touchY-lastTouchY;
	 var newTop= $('#contentholder').scrollTop()-diff;
	 global_scrollpercent=$('#contentholder').scrollTop()/$('#content').height();
	 
	 //my_alert(targetEvent.clientY+" - "+$('#contentholder').scrollTop( ));
	$(document).ready(function(){
	 $('#contentholder').scrollTop( newTop);
	 });
    //    $('#content').style.webkitTransform ='translate(' + 0 + 'px, ' + newTop + 'px)';
     event.preventDefault();  
    
}); 
	 
$(document).bind('touchend', function(event) {
	
	if(Math.abs(startTouch-endTouch)>10){
		event.preventDefault();  
	}
});