﻿var text1 = ['DesignLinx... <br />We know FPGAs', 'DesignLinx\' engineers are FPGA experts<br /> who plug-in to your team as<br/ > trusted advisors'];
var text2 = ['The Best Companies <div style="margin-left:40px;">are the Best Collaborators<div>', '<div style="margin-left:80px;">Outsource to DesignLinx to enhance innovation,</div><div style="margin-left:40px;">hiring "on assignment" the necessary competencies</div>and knowledge'];
var text3 = ['Outsourcing is Today\'s Strategic Way<div style="margin-left:200px;">of Doing Business</div>', 'Companies <em>need</em> to outsource to win, not just to save money... <br/ >We become an extension of your engineering and<br />can augment your technical sales support organization'];
var text4 = ['Technical Sales Support', 'We are well versed in the sales process and provide industry<br />seasoned technical field sales and support professionals - <br />when you need it.'];
var images = ['slide_weKnowFPGAs.png', 'slide_bestCompanies.png', 'slide_outsourcing.png', 'slide_techSupport.png'];
var timeouts = [5000,7000,7000,7000]

var headerColor = ['white', 'white', 'white', 'white'];
var headerFontSize = ['24px', '24px', '24px', '24px'];
var headerFontStyle = ['oblique', 'oblique', 'oblique', 'oblique'];
var headerBold = ['bold', 'bold', 'bold', 'bold'];
var headerStartTop = ['85px', '30px', '0px', '50px'];
var headerEndTop = ['85px', '30px', '140px', '50px'];
var headerStartLeft = ['300px', '40px', '0px', '0px'];
var headerEndLeft = ['30px', '40px', '30px', '150px'];

var descColor = ['white', 'white', 'white', 'white'];
var descFontSize = ['16px', '16px', '16px', '16px'];
var descFontStyle = ['normal', 'normal', 'normal', 'normal'];
var descBold = ['normal', 'normal', 'normal', 'normal'];
var descStartTop = ['85px', '120px', '170px', '110px'];
var descEndTop = ['85px', '120px', '60px', '110px'];
var descStartLeft = ['0px', '300px', '300px', '300px'];
var descEndLeft = ['240px', '50px', '50px', '50px'];

var $sliderContainer;
var $sliderBG;
var $header;
var $desc;

var currentHeaderText;
var currentHeaderFontSize;
var currentHeaderStyle;
var currentHeaderBold;
var currentHeaderStartTop;
var currentHeaderEndTop;
var currentHeaderStartLeft;
var currentHeaderEndLeft;
var currentHeaderColor;

var currentDescText;
var currentDescFontSize;
var currentDescStyle;
var currentDescBold;
var currentDescStartTop;
var currentDescEndTop;
var currentDescStartLeft;
var currentDescEndLeft;
var currentDescColor;

var currentImage;
var currentTimeout;
var previousImage = null;
var currentSlideIndex;

$(window).ready(function () {
    $sliderContainer = $('#slider1');
    $sliderBG = $('#slider2');
    $header = $sliderContainer.find('.header');
    $desc = $sliderContainer.find('.desc');
    loadParameters(0);
    initDisplay();
});

function loadParameters(slideIndex) {
    switch (slideIndex) {
        case 0:
            {
                currentHeaderText = text1[0];
                currentDescText = text1[1];
                break;
            }    //case
        case 1:
            {
                currentHeaderText = text2[0];
                currentDescText = text2[1];
                break;
            }     //case
        case 2:
            {
                currentHeaderText = text3[0];
                currentDescText = text3[1];
                break;
            }     //case
        case 3:
            {
                currentHeaderText = text4[0];
                currentDescText = text4[1];
                break;
            }     //case
    }   //switch

    currentHeaderFontSize = headerFontSize[slideIndex];
    currentHeaderStyle = headerFontStyle[slideIndex];
    currentHeaderBold = headerBold[slideIndex];
    currentHeaderStartTop = headerStartTop[slideIndex];
    currentHeaderEndTop = headerEndTop[slideIndex];
    currentHeaderStartLeft = headerStartLeft[slideIndex];
    currentHeaderEndLeft = headerEndLeft[slideIndex];
    currentHeaderColor = headerColor[slideIndex];

    currentDescFontSize = descFontSize[slideIndex];
    currentDescStyle = descFontStyle[slideIndex];
    currentDescBold = descBold[slideIndex];
    currentDescStartTop = descStartTop[slideIndex];
    currentDescEndTop = descEndTop[slideIndex];
    currentDescStartLeft = descStartLeft[slideIndex];
    currentDescEndLeft = descEndLeft[slideIndex];
    currentDescColor = descColor[slideIndex];

    previousImage = currentImage;
    currentImage = images[slideIndex];
    currentSlideIndex = slideIndex;
    currentTimeout = timeouts[slideIndex];
}

function initDisplay() {
    updateDisplayCss();
    updateDisplayContents();
    updateBackgroundImage();
    $sliderContainer.css('display', 'block');
    fadeInHeader(function () { fadeInDescription(); });
}

function changeDisplay() {
    if (previousImage) {
        $sliderBG.css('background-image', 'url(/Images/' + previousImage + ')');
    }   //if

    // fade out current header
    $header.fadeOut(function () {
        // fade out desc
        $desc.fadeOut(function () {
            updateDisplayCss();
            updateDisplayContents();
            updateBackgroundImage();
            fadeInBackground(function () { fadeInHeader(function () { fadeInDescription(); }); });
        });
    });
}

function updateDisplayCss() {
    // set header css
    $header.css({
        color: currentHeaderColor,
        fontSize: currentHeaderFontSize,
        fontStyle: currentHeaderStyle,
        fontWeight: currentHeaderBold,
        display: 'block',
        opacity: 0,
        marginTop: currentHeaderStartTop,
        marginLeft: currentHeaderStartLeft
    });

    // set desc css
    $desc.css({
        color: currentDescColor,
        fontSize: currentDescFontSize,
        fontStyle: currentDescStyle,
        fontWeight: currentDescBold,
        display: 'block',
        opacity: 0,
        marginTop: currentDescStartTop,
        marginLeft: currentDescStartLeft
    });
}


function updateDisplayContents() {
    $header.html(currentHeaderText);
    $desc.html(currentDescText);
}

function updateBackgroundImage() {
    $sliderContainer.css({
        display: 'none',
        backgroundImage: 'url(/Images/' + currentImage + ')'
    });
}

function fadeInBackground(callback) {
    $sliderContainer.fadeIn(1500, function () {
        if (callback) {
            callback();
        }
    });
}

function fadeInHeader(callback) {
    // fade in header
    $header.animate({
        marginLeft: currentHeaderEndLeft,
        marginTop: currentHeaderEndTop,
        opacity: 1
    }, 1000, function () {
        if (callback) {
            callback();
        }
    });
}

function fadeInDescription() {
    $desc.animate({
        marginLeft: currentDescEndLeft,
        marginTop: currentDescEndTop,
        opacity: 1
    }, 1000, function () {
        setTimeout('changeDisplay()', currentTimeout);
        loadParameters((currentSlideIndex + 1) % 4);
    });
}
