/* collapse.js */


$(document).ready(function(){
    initTextCollapse();
    initSectionCollapse();
    initAnswerCollapse();
    initBorderedCollapse();
});

function initBorderedCollapse (){
    var maxHeight = 78;
    var maxHeightBuffer = 20;
  
    $('.text-collapse-bordered').each(function(){
      // only used on home page
        var region = $(this);
        if(region.height() > maxHeight + maxHeightBuffer){
            var fullHeight = region.height();
            region.html('<div class="collapse-content">' + region.html() + '</div>');
            var content = region.find('.collapse-content');
            var fader = $('<div class="collapse-fade">&nbsp;</div>');
            //content.append(fader);
            var readMore = $('<a class="collapse-button-down"><span class="collapse-arrow">&nbsp;</span></a>');
            var showLess = $('<a class="collapse-button-up"><span class="collapse-arrow">&nbsp;</span></a>');
            region.append(readMore).append(showLess);
            
            showLess.hide();
            region.find('h1').hide();
            region.find('h1').css('width','100%');
            content.css({'height': maxHeight, 'overflow':'hidden', 'position':'relative'});
            fader.hide();
            readMore.click(function(){
            	region.find('h1').animate({height: "toggle", opacity: "toggle", 'margin-top': "toggle", 'margin-bottom': "toggle"}, 500);
                content.animate({'height':fullHeight + 20}, 500);
                showLess.show();
                readMore.hide();
                fader.hide();
            })
            showLess.click(function(){
            	region.find('h1').animate({height: "toggle", opacity: "toggle", 'margin-top': "toggle", 'margin-bottom': "toggle"}, 500);
                content.animate({'height': (maxHeight)}, 500);
                readMore.show();
                showLess.hide();
                //fader.show();
            })
        }
              
    });
}

function initAnswerCollapse (){
    $('.collapse-answer').each(function(){
        var region = $(this);
        
        var fullHeight = region.height();
        region.html('<div class="collapse-content">' + region.html() + '</div>');
        var content = region.find('.collapse-content');
        
        var readMore = $('<a class="collapse-read-more">Show Answer<span class="collapse-arrow">&nbsp;</span></a>');
        var showLess = $('<a class="collapse-show-less">Hide Answer<span class="collapse-arrow">&nbsp;</span></a>');
        region.append(readMore).append(showLess);
        
        showLess.hide();
        content.css({'height': 0, 'overflow':'hidden', 'position':'relative'});
        readMore.click(function(){
            content.animate({'height':fullHeight + 20}, 500);
            showLess.show();
            readMore.hide();
        })
        showLess.click(function(){
            content.animate({'height': 0}, 500);
            readMore.show();
            showLess.hide();
        })
            
    });
}
function initSectionCollapse (){

    $('.section-collapse').each(function(){
        var region = $(this);
        
        var fullHeight = region.height();
        region.html('<div class="collapse-content">' + region.html() + '</div>');
        var content = region.find('.collapse-content');
        
        var readMore = $('<a class="collapse-read-more">Read More<span class="collapse-arrow">&nbsp;</span></a>');
        var showLess = $('<a class="collapse-show-less">Show Less<span class="collapse-arrow">&nbsp;</span></a>');
        region.append(readMore).append(showLess);
        
        showLess.hide();
        content.css({'height': 0, 'overflow':'hidden', 'position':'relative'});
        readMore.click(function(){
            content.animate({'height':fullHeight + 20}, 500);
            showLess.show();
            readMore.hide();
        })
        showLess.click(function(){
            content.animate({'height': 0}, 500);
            readMore.show();
            showLess.hide();
        })
            
    });
}

function initTextCollapse (){
    var maxHeight = 100;
    var maxHeightBuffer = 20;
    $('.text-collapse').each(function(){
        var region = $(this);
        if(region.height() > maxHeight + maxHeightBuffer){
            var fullHeight = region.height();
            region.html('<div class="collapse-content">' + region.html() + '</div>');
            var content = region.find('.collapse-content');
            var fader = $('<div class="collapse-fade">&nbsp;</div>');
            content.append(fader);
            var readMore = $('<a class="collapse-read-more">Read More<span class="collapse-arrow">&nbsp;</span></a>');
            var showLess = $('<a class="collapse-show-less">Show Less<span class="collapse-arrow">&nbsp;</span></a>');
            region.append(readMore).append(showLess);
            
            showLess.hide();
            content.css({'height': maxHeight, 'overflow':'hidden', 'position':'relative'});
            readMore.click(function(){
                content.animate({'height':fullHeight + 20}, 500);
                showLess.show();
                readMore.hide();
                fader.hide();
            })
            showLess.click(function(){
                content.animate({'height': (maxHeight)}, 500);
                readMore.show();
                showLess.hide();
                fader.show();
            })
        }
    });
}