﻿$(document).ready(function() {
    $('.slideshow').cycle({
		//fx: 'cover', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		//sync: true, 
		//fx: 'shuffle',
		fx: 'fade',
		//fx: 'scrollVert',
		timeout:  4000,
		speed: 500,
		pager:  '#nav',
		pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
            return '#nav li:eq(' + idx + ') a'; 
        }, 
		pause:  1,
		before: onBefore
	});
});

var firstSlide = true;

function onBefore(curr, next, opts)
{ 
    var index = opts.currSlide;
    var last = opts.lastSlide;
    var next = opts.nextSlide;
    
    //alert(last + " " + index + " " + next );
    
    if(firstSlide)
    {
        next = index;
    }
    
    document.getElementById(getIdFromIndex(next) + "Link").className = "HomeBannerSelected";
    document.getElementById(getIdFromIndex(next) + "Link").onmouseout = "";
    document.getElementById(getIdFromIndex(next)).src = getImageString(getIdFromIndex(next), true);
    
    if(!firstSlide)
    {
        document.getElementById(getIdFromIndex(index) + "Link").className = "HomeBanner";
        document.getElementById(getIdFromIndex(index)).src = getImageString(getIdFromIndex(index), false);
        document.getElementById(getIdFromIndex(index) + "Link").onmouseout = new Function("out('" + getIdFromIndex(index) + "');");
    }
    firstSlide = false;
}

function out(id)
{
    //alert(id);
    //document.getElementById(id).src = "images//NewHome//middle_tab.png";
    document.getElementById(id).src = getImageString(id, false);
}

function over(id)
{
    //alert(id);
    //document.getElementById(id).src = "images//NewHome//middle_tab.png";
    document.getElementById(id).src = getImageString(id, true);
}

function getImageString(id, isOver)
{
    var retVal;
    
    if(id == "Better")
    {
        retVal = "images//NewHome//left_tab";
    }
    else if(id == "Automation")
    {
        retVal = "images//NewHome//right_tab";
    }
    else if(id == "videos")
    {
        retVal = "images//NewHome//videos_btn";
    }
    else if(id == "how")
    {
         retVal = "images//NewHome//how_it_works_btn";
    }
    else if(id == "home")
    {
         retVal = "images//NewHome//for_your_home_btn";
    }
    else if(id == "business")
    {
         retVal = "images//NewHome//for_your_business_btn";
    }
    else
    {
        retVal = "images//NewHome//middle_tab";
    }
    
    if(isOver)
    {
        retVal += "_over";
    }
    
    return retVal += ".png";
}

function getIdFromIndex(index)
{
    if(index == 0)
    {
        return "Better";
    }
    else if(index == 1)
    {
        return "Interactive";
    }
    else if(index == 2)
    {
        return "Mobile";
    }
    else if(index == 3)
    {
        return "Video";
    }
    else if(index == 4)
    {
        return "Automation";
    }

}

function expand(x)
{
    //alert(x);
    document.getElementById("expandable" + x).style.display="block";
    document.getElementById("expandableLink" + x).style.display="none";
    //document.getElementById("expandableLink" + x).innerHTML = "<<&nbsp;Less";
    
    animateExpand(x);
    
    //document.getElementById("expandableImage" + x).src = "images/NewHome/bminus.gif";
    document.getElementById("expandableLink" + x).href = "javascript:collapse(" + x + ")";

    //document.getElementById("expandableImage" + x).onmouseover = new Function('overPlus(1,' +  x + ');');
    //document.getElementById("expandableImage" + x).onmouseout = new Function('outPlus(1,' +  x + ');');
}

function collapse(x)
{
    //alert("collapse");
    animateCollapse(x);
    
    //document.getElementById("expandable" + x).style.display="none";
    //document.getElementById("expandableLink" + x).innerHTML = "More&nbsp;>>";
    document.getElementById("expandableLink" + x).style.display="inline";
    //document.getElementById("expandableImage" + x).src = "images/NewHome/bplus.gif";
    document.getElementById("expandableLink" + x).href = "javascript:expand(" + x + ")";
      
    //document.getElementById("expandableImage" + x).onmouseover = new Function('overPlus(0,' +  x + ');');
    //document.getElementById("expandableImage" + x).onmouseout = new Function('outPlus(0,' +  x + ');');
}

function animateExpand(x)
{
    var contentHeight = document.getElementById("expandable" + x).offsetHeight;
    
    document.getElementById("expandable" + x).style.height = 0 + "px";
    
    //alert(contentHeight);
    
    window.setTimeout(new Function('animateHelper(' +  x + ', ' + 0 + ', ' + contentHeight + ',' + 15 + ');'), 7);
     
}

function animateCollapse(x)
{
    var contentHeight = document.getElementById("expandable" + x).offsetHeight;
    
    document.getElementById("expandable" + x).style.height = contentHeight + "px";
    //alert(contentHeight);
    window.setTimeout(new Function('animateHelper(' +  x + ', ' + contentHeight + ', ' + contentHeight + ',' + (-15) + ');'), 7);
     
}


function animateHelper(x, h, max, step)
{
    if(h+step < max && h+step > 0)
    {
        document.getElementById("expandable" + x).style.height = h + "px";
        //alert(h);
        window.setTimeout(new Function('animateHelper(' +  x + ', ' + (h + step) + ', ' + max + ',' + step + ');'), 7);
    }
    else
    {
        if(step < 0)
        {
            document.getElementById("expandable" + x).style.height = "0px";
            document.getElementById("expandable" + x).style.display="none";
            document.getElementById("expandable" + x).style.height = max + "px";
        }
        else
        {
            document.getElementById("expandable" + x).style.height = max + "px";
        }
    }
}

function showBannerText()
{
    //this was added to avoid ie loading issue
    document.getElementById("banner1Text").style.display = "block";
    document.getElementById("banner2Text").style.display = "block";
    document.getElementById("banner3Text").style.display = "block";
    document.getElementById("banner4Text").style.display = "block";
    document.getElementById("banner5Text").style.display = "block";
}
