// Lettering effects script - © Marcus Gilroy-Ware 2009 - www.vsclabs.com

String.prototype.fragment = function (vertical){
    
    var v = vertical ? true : false;
    
    if(v){
        var s = this.replace(/(.)/g, "<span style=\"display:none\" class=\"appearing-letter\">$1</span><br />");
    }else{
        var s = this.replace(/(.)/g, "<span style=\"display:none\" class=\"appearing-letter\">$1</span>");
    }
    
    return s;
}

function displayElementsProgressively(descriptor, pid, params){
    
    var finalElements;
    var finalElementsIndex = 0;
    
    finalElements = new Array;
    finalElements = $$(descriptor);
    
    // do we want to display them vertically, like japanese?
    var v = params && params.vertical ? true : false;
    var letters = params && params.individualizeLetters ? true : false;
    
    new PeriodicalExecuter(function(){
        
        if(finalElementsIndex < finalElements.length){
            
            var el_id;
            
            // if the element doesn't have an id, give it one
            if(!finalElements[finalElementsIndex].id){
                finalElements[finalElementsIndex].id = pid+'-element-'+finalElementsIndex;
                el_id = pid+'-element-'+finalElementsIndex;
            }else{
                el_id = finalElements[finalElementsIndex].id;
            }
            
            // alert(finalElements[finalElementsIndex].innerHTML.stripTags().length);
            
            if(finalElements[finalElementsIndex].innerHTML.stripTags().length && letters){
                displayLettersProgressively(finalElements[finalElementsIndex], v);
            }else{
                // alert(el_id);
                new Effect.Appear(el_id, {duration:0.8});
            }
            
            finalElementsIndex++;
        }
        
    },  0.3);
    
}

function displayLettersProgressively(element, vertical){
    
    // capture the original string
    var originalContents = element.innerHTML;
    
    // fill the element with invisible spans
    element.innerHTML = originalContents.stripTags().fragment(vertical);
    
    // make the actual element visible
    element.style.display = 'block';
    
    var selector = '#'+element.id+' span.appearing-letter';
    // alert(selector);
    
    var spans = $$(selector);
    var spanIndex = 0;
    
    new PeriodicalExecuter(function(){
        
        if(spanIndex < spans.length){
            spans[spanIndex].id = element.id+'-letter-'+spanIndex;
            new Effect.Appear(spans[spanIndex].id, {duration:0.5});
            spanIndex++;
        }
        
    },  0.08);
    
}