// JScript File


function rollNext(index){
	
	var panelDiv=document.getElementById('rollPanel');
	var wrapperDiv=getElementsByClassName(panelDiv, 'div', 'rollContentWrapper')[0];
    var selectedDiv=getElementsByClassName(panelDiv, 'div', 'selected')[0];
	allDivs=wrapperDiv.getElementsByTagName('div');

	if(index!='noaction'){
		index=Number(index);
		nextDiv=allDivs[index];
		document.getElementById('rollPanelNext').className='noaction';
		document.getElementById('rollPanelPrev').className='noaction';
		nextDiv.className='next';
		clipSelectedN(selectedDiv,0,index);
		nextDiv.style.clip='rect(0, 0, 148px, 0)';
		nextDiv.style.display='block';
		clipNext(nextDiv,0,index);
	}
}
function rollPrevious(index){
	
	panelDiv=document.getElementById('rollPanel');
	wrapperDiv=getElementsByClassName(panelDiv, 'div', 'rollContentWrapper')[0];
    selectedDiv=getElementsByClassName(panelDiv, 'div', 'selected')[0];
	allDivs=wrapperDiv.getElementsByTagName('div');
	
	if(index!='noaction'){
		index=Number(index);
	    previousDiv=allDivs[index];
		document.getElementById('rollPanelPrev').className='noaction';
		document.getElementById('rollPanelNext').className='noaction';
	    clipSelectedP(selectedDiv,230);
	    previousDiv.style.clip='rect(229px, 0, 148px, 229px)';
	    previousDiv.style.display='block';
	    clipPrevious(previousDiv,230,index);
	}
}
function clipSelectedP(selectedDiv,value){
    if((value)>1){
        difV=(value)/3;
        value=value-difV;
        selectedDiv.style.clip='rect(0, '+value+'px, 148px, 0)';
        selectedDiv.style.left=230-value+'px';
        setTimeout(function(){clipSelectedP(selectedDiv, value)}, 50);
    }else{
        selectedDiv.className='';
		selectedDiv.style.crop='';
		
    }
}
function clipSelectedN(selectedDiv,value){
    if((value)<228){
        difV=(229-value)/3;
        value=value+difV;
        selectedDiv.style.clip='rect(0, 229px, 148px, '+value+'px)';
        selectedDiv.style.left=-value+'px';
        setTimeout(function(){clipSelectedN(selectedDiv, value)}, 50);
    }else{
        selectedDiv.className='';
        selectedDiv.style.crop='';
		
    }
}
function clipNext(nextDiv, value,index){
    if((value)<228){
        difV=(229-value)/3;
        value=value+difV;
        nextDiv.style.clip='rect(0, '+value+'px, 148px, 0)';
        nextDiv.style.left=229-value+'px';
        setTimeout(function(){clipNext(nextDiv, value,index)}, 50);
    }else{
        nextDiv.className='selected';
        nextDiv.style.crop='';
		if(index==(allDivs.length-1)){
			document.getElementById('rollPanelNext').className='noaction';
			document.getElementById('rollPanelPrev').className=index-1;
		}else{
			document.getElementById('rollPanelNext').className=index+1;
			document.getElementById('rollPanelPrev').className=index-1;
		}
    }
}
function clipPrevious(previousDiv, value, index){
    if((value)>1){
        difV=(0+value)/3;
        value=value-difV;
        previousDiv.style.clip='rect(0, 229px, 148px, '+value+'px)';
        previousDiv.style.left=-value+'px';
        setTimeout(function(){clipPrevious(previousDiv, value, index)}, 50);
    }else{
        previousDiv.className='selected'
        previousDiv.style.crop='';
		if(index==0){
			document.getElementById('rollPanelPrev').className='noaction';
			document.getElementById('rollPanelNext').className=index+1;
		}else{
			document.getElementById('rollPanelNext').className=index+1;
			document.getElementById('rollPanelPrev').className=index-1;
		}
    }
}
function rollNextL(index){
	
	var panelDiv=document.getElementById('rollPanelLow');
	var wrapperDiv=getElementsByClassName(panelDiv, 'div', 'rollContentWrapper')[0];
    var selectedDiv=getElementsByClassName(panelDiv, 'div', 'selected')[0];
	allDivs=wrapperDiv.getElementsByTagName('div');

	if(index!='noaction'){
		index=Number(index);
		nextDiv=allDivs[index];
		document.getElementById('rollPanelNextL').className='noaction';
		document.getElementById('rollPanelPrevL').className='noaction';
		nextDiv.className='next';
		clipSelectedN(selectedDiv,0,index);
		nextDiv.style.clip='rect(0, 0, 148px, 0)';
		nextDiv.style.display='block';
		clipNextL(nextDiv,0,index);
	}
}
function rollPreviousL(index){
	
	var panelDiv=document.getElementById('rollPanelLow');
	var wrapperDiv=getElementsByClassName(panelDiv, 'div', 'rollContentWrapper')[0];
    var selectedDiv=getElementsByClassName(panelDiv, 'div', 'selected')[0];
	allDivs=wrapperDiv.getElementsByTagName('div');
	
	if(index!='noaction'){
		index=Number(index);
	    previousDiv=allDivs[index];
		document.getElementById('rollPanelPrevL').className='noaction';
		document.getElementById('rollPanelNextL').className='noaction';
	    clipSelectedP(selectedDiv,230);
	    previousDiv.style.clip='rect(229px, 0, 148px, 229px)';
	    previousDiv.style.display='block';
	    clipPreviousL(previousDiv,230,index);
	}
}
function clipNextL(nextDiv, value,index){
    if((value)<228){
        difV=(229-value)/3;
        value=value+difV;
        nextDiv.style.clip='rect(0, '+value+'px, 148px, 0)';
        nextDiv.style.left=229-value+'px';
        setTimeout(function(){clipNextL(nextDiv, value,index)}, 50);
    }else{
        nextDiv.className='selected';
        nextDiv.style.crop='';
		if(index==(allDivs.length-1)){
			document.getElementById('rollPanelNextL').className='noaction';
			document.getElementById('rollPanelPrevL').className=index-1;
		}else{
			document.getElementById('rollPanelNextL').className=index+1;
			document.getElementById('rollPanelPrevL').className=index-1;
		}
    }
}
function clipPreviousL(previousDiv, value, index){
    if((value)>1){
        difV=(0+value)/3;
        value=value-difV;
        previousDiv.style.clip='rect(0, 229px, 148px, '+value+'px)';
        previousDiv.style.left=-value+'px';
        setTimeout(function(){clipPreviousL(previousDiv, value, index)}, 50);
    }else{
        previousDiv.className='selected'
        previousDiv.style.crop='';
		if(index==0){
			document.getElementById('rollPanelPrevL').className='noaction';
			document.getElementById('rollPanelNextL').className=index+1;
		}else{
			document.getElementById('rollPanelNextL').className=index+1;
			document.getElementById('rollPanelPrevL').className=index-1;
		}
    }
}