﻿/*
SlideShow.

Description
~~~~~~~~~~~

How to use
~~~~~~~~~~
Example:
--------
Place this code in ASPX/HTML file.
In case of HTML :
    - Remove the line : var oHdnTotalImages = document.getElementById('<%=hdnTotalImages.ClientID %>');
    - Use the static value instead of oHdnTotalImages.value
-------------------------------
<script type="text/javascript" language="javascript">
    var oHdnTotalImages = document.getElementById('<%=hdnTotalImages.ClientID %>');
    startSlideShow('divBigImageSlideShow','divBigImageSlideShowABS','divBigImageSlideShow_',parseInt(oHdnTotalImages.value));
</script>
-------------------------------

Author
~~~~~~
RaviK S

Created Date
~~~~~~~~~~~~~
14/11/2010

Last Updated
~~~~~~~~~~~~~
xx/01/2011

** PLEASE DO NOT EDIT BELOW THIS LINE **/

function getE(elem){
    return document.getElementById(elem);
}
function startSlideShow(elemId, elemIdABS, elemIdPrefix, count,elemIdTitle, elemIdTitlePrefix, startIndex, delay, fromOpacity, toOpacity, time, fps){  
    var oSlideShow = new Object();
    oSlideShow.elemId = elemId;
    oSlideShow.elemIdABS = elemIdABS;
    oSlideShow.elemIdPrefix = elemIdPrefix;
    oSlideShow.count = count;
    oSlideShow.reset = false;
    oSlideShow.elemIdTitle = typeof(elemIdTitle) != 'undefined' ? elemIdTitle : '';
    oSlideShow.elemIdTitlePrefix = typeof(elemIdTitlePrefix) != 'undefined' ? elemIdTitlePrefix : '';
    oSlideShow.startIndex = typeof(startIndex) != 'undefined' ? startIndex : 0;
    oSlideShow.delay = typeof(delay) != 'undefined' ? delay : 6500;//6.5 seconds
    oSlideShow.fromOpacity = typeof(fromOpacity) != 'undefined' ? fromOpacity : 100;
    oSlideShow.toOpacity = typeof(toOpacity) != 'undefined' ? toOpacity : 0;
    oSlideShow.time = typeof(time) != 'undefined' ? time : 500;
    oSlideShow.fps = typeof(fps) != 'undefined' ? fps : 20;

    if(count >= 1){
   
        if(oSlideShow.startIndex >= oSlideShow.count)
            oSlideShow.startIndex = oSlideShow.count -1;
            
        if((getE(oSlideShow.elemId) != null) && (getE(oSlideShow.elemIdPrefix + oSlideShow.startIndex) != null)) 
            getE(oSlideShow.elemId).innerHTML = getE(oSlideShow.elemIdPrefix + oSlideShow.startIndex).innerHTML;
            
        if((getE(oSlideShow.elemIdTitle) != null) && (getE(oSlideShow.elemIdTitlePrefix + oSlideShow.startIndex) != null))  
            getE(oSlideShow.elemIdTitle).innerHTML = getE(oSlideShow.elemIdTitlePrefix + oSlideShow.startIndex).innerHTML;        
        
            var currentIndex = 0;//count ==1
            if(oSlideShow.count > 1){
            alert(oSlideShow.startIndex);
            currentIndex = oSlideShow.startIndex + 1;
           
            getE(elemIdABS).innerHTML = getE(oSlideShow.elemIdPrefix + currentIndex).innerHTML;
            getE(elemId).style.opacity = 1.0;
            
            //slideImages(elemId, elemIdABS, elemIdPrefix, count, delay, fromOpacity, toOpacity, time, fps, step);
            /////////delayed sometime (make the 1st image still for some time) b4 calling slideImages 
          
          setTimeout(function(){slideImages(oSlideShow,currentIndex)},oSlideShow.delay); 
        }  
          
    }
    return oSlideShow;
}
///////////

function slideImages(oSlideShow, currentIndex){
    if(oSlideShow.count > 0){
        FadeOpacity_DownThenUp(oSlideShow,currentIndex);
        //alert(step + ':' + count);
        if(currentIndex < (oSlideShow.count-1))
            currentIndex++;
        else
            currentIndex = 0;
            
        if(!oSlideShow.reset){
            setTimeout(function(){slideImages(oSlideShow,currentIndex)},oSlideShow.delay); 
            }
            else{
            
                oSlideShow.reset = false;
                oSlideShow = new Object();
            }
    }
}   
    
//////////////
function FadeOpacity_DownThenUp(oSlideShow, currentIndex){
    var steps = Math.ceil(oSlideShow.fps * (oSlideShow.time / 1000));
    var delta = (oSlideShow.toOpacity - oSlideShow.fromOpacity) / steps;
	
    FadeOpacityStep_DownThenUp(oSlideShow, 0, steps, delta, (oSlideShow.time / steps), currentIndex);
}

function FadeOpacityStep_DownThenUp(oSlideShow, stepNum, steps, delta, timePerStep, currentIndex){
    //alert(Math.round(parseInt(fromOpacity) + (delta * stepNum))/100 + "::" + getE(elemId).style.opacity);
    var oGap = Math.round(parseInt(oSlideShow.fromOpacity) + (delta * stepNum)/100) - getE(oSlideShow.elemId).style.opacity;
    
    ////////////////////////////////////////
    //alert(oGap);
    var opacityAsInt = Math.round(parseInt(oSlideShow.fromOpacity) + (delta * stepNum));
    if (opacityAsInt > 100)
	    opacityAsInt = 100;
    
    var elemABS = getE(oSlideShow.elemIdABS);
    var opacityAsIntABS = 0;
    if(opacityAsInt == 100){
        elemABS.innerHTML= getE(oSlideShow.elemIdPrefix + currentIndex).innerHTML;
    }
    else{
        var opacityAsDoubleABS = parseFloat(getE(oSlideShow.elemIdABS).style.opacity);
        opacityAsDoubleABS += oGap;
        opacityAsIntABS = parseFloat(opacityAsDoubleABS) * 100;
    }
    SetOpacity(getE(oSlideShow.elemIdABS), opacityAsIntABS, 1);//up
    ////////////////////////////////////////
    
    SetOpacity(getE(oSlideShow.elemId), opacityAsInt, 0);//down
    
    if (stepNum < steps){
        ////call it (self) again and again and sets opacity from 100 to 0
        setTimeout(function(){FadeOpacityStep_DownThenUp(oSlideShow,stepNum+1,steps,delta,timePerStep,currentIndex)},timePerStep); 
    }
    else{
        //alert(getE(elemId).style.opacity + "::/n" + getE(elemId).style.filter)
        //alert(getE(elemIdABS).style.opacity + "::/n" + getE(elemIdABS).style.filter)
        getE(oSlideShow.elemId).innerHTML = getE(oSlideShow.elemIdPrefix + currentIndex).innerHTML;
        //FadeOpacity(elemId,30,100,1000,20);////sets opacity from 0 to 100
        
        if(getE(oSlideShow.elemIdTitle) != null){
            if(getE(oSlideShow.elemIdTitlePrefix + currentIndex) != null)        
                getE(oSlideShow.elemIdTitle).innerHTML= getE(oSlideShow.elemIdTitlePrefix + currentIndex).innerHTML;
        }
    }
}
/////////////
function FadeOpacity(elemId, fromOpacity, toOpacity, time, fps){
    var steps = Math.ceil(fps * (time / 1000));
    var delta = (toOpacity - fromOpacity) / steps;
    //alert(steps + '::' + delta);
    FadeOpacityStep(elemId, 0, steps, fromOpacity, delta, (time / steps));
}

function FadeOpacityStep(elemId, stepNum, steps, fromOpacity, delta, timePerStep){
    SetOpacity(getE(elemId), Math.round(parseInt(fromOpacity) + (delta * stepNum)), 1);//up

    if (stepNum < steps){
        setTimeout(function(){FadeOpacityStep(elemId,(stepNum+1),steps,fromOpacity,delta,timePerStep)},timePerStep); 
    }
}
///////////////
function SetOpacity(elem, opacityAsInt, downOrUp){//0->down//1->up
    var opacityAsDecimal = opacityAsInt;
	
//    if (opacityAsInt > 100)
//	    opacityAsInt = opacityAsDecimal = 100;
//	//else if (opacityAsInt < 30)
//	//    opacityAsInt = opacityAsDecimal = 30; 
//	    
//    opacityAsDecimal /= 100;
//    	        
//    //if (opacityAsInt < 1)
//	//    opacityAsInt = 1; // IE7 bug, text smoothing cuts out if 0
//	    
//	//alert(opacityAsDecimal + '::' + opacityAsInt);
//    elem.style.opacity = opacityAsDecimal;
//    elem.style.filter  = "alpha(opacity=" + opacityAsInt + ")";
//    //alert(elem.style.opacity);

 if (opacityAsInt > 100)
		    opacityAsInt = opacityAsDecimal = 100; 
	    else if (opacityAsInt < 0)
		    opacityAsInt = opacityAsDecimal = 0; 
    	
	    opacityAsDecimal /= 100;
	    if (opacityAsInt < 1)
		    opacityAsInt = 1; // IE7 bug, text smoothing cuts out if 0
    	
	    elem.style.opacity = opacityAsDecimal;
	    elem.style.filter  = "alpha(opacity=" + opacityAsInt + ")";
}
////////////

/** End of File **/
