var SS = SS || {};
SS.imgRoot = "systemimg/slideshow"

SS.ajaxLoader = 'systemimg/ajax-loader.gif';
SS.startLabel = '<img src="' + SS.imgRoot + '/Play.png" alt="Play" />';
SS.stopLabel = '<img src="' + SS.imgRoot + '/Stop.png" alt="Stop" />';
SS.forwardIcon = '<img src="' + SS.imgRoot + '/StepForward.png" style="cursor:pointer;" alt="Forward" />';
SS.backwardIcon = '<img src="' + SS.imgRoot + '/StepBackward.png" style="cursor:pointer;" alt="Backward" />';

var gallery = null;
var descContainerWidth = 160;                // Will be used only in horizantal layout
var descContainerHeight = 60;              // will only be used in Veritical layout.


$(function () {
    var callbacks = {
        init: onInit,
        beforeImageVisible: onBeforeImageVisible,
        afterImageVisible: onafterImageVisible
    }

    var slideshow = {
        onStart: onStartSlideShow,
        onStop: onStopSlideShow,
        start_label: SS.startLabel,
        stop_label: SS.stopLabel,
        speed: 3000
    }

    var galleries = $('.ad-gallery').adGallery({
        loader_image: SS.ajaxLoader,
        display_next_and_prev: false,
        display_back_and_forward: false,
        width: slideshowWidth,
        height: slideshowHeight,     
        callbacks: callbacks,
        slideshow: slideshow
    });

    gallery = galleries[0];
    gallery.slideshow.start();
});




/** Call back Hanlders **/
function onBeforeImageVisible() {
    $('.ad-image-description').css('width', '100%');
    // Set the description container
    setImageDesc();
}

onafterImageVisible = function(){
    $('.ad-slideshow-countdown').hide();
    
}

function onInit() {
    $('.ad-slideshow-stop').hide();
    $('.ad-slideshow-countdown').remove();      // unable to hide it so removing it.

    var ctrlContainer = $('.ad-slideshow-controls')
    var forward = $(SS.forwardIcon);
    forward.click(function () {
        gallery.nextImage();
        gallery.slideshow.stop();
    });

    backward = $(SS.backwardIcon);
    backward.click(function () {
        gallery.prevImage();
        gallery.slideshow.stop();
    });


    ctrlContainer.append(forward);
    ctrlContainer.prepend(backward);


    if (orientation === 'horizantal') {
        var imageWrapper = $('.ad-image-wrapper');
        var imageSBContainer = $('<div id="image_sb_container" class="horizantal-desc-wrapper"><div class="desc-container">&nbsp;</div></div>');
        imageWrapper.append(imageSBContainer);

        var imageDesc = $('.ad-image-description');
        imageSBContainer.append(imageDesc);
        $('.desc-container').css('display', 'table-cell');
    }
    else {
        // Vertical alignment
        var container = $('#vertical_container');
        container.show().addClass('desc-container');
    }

    setImageDesc();
}

onStartSlideShow = function () {
    $('.ad-slideshow-countdown').hide();
    var start = $('.ad-slideshow-start');
    var stop = $('.ad-slideshow-stop');
    start.hide();
    stop.show();
}

onStopSlideShow = function () {
    var start = $('.ad-slideshow-start');
    var stop = $('.ad-slideshow-stop');
    stop.hide();
    start.show();
}

// desc-container horizantal-desc-wrapper

/** Helper functions **/
setImageDesc = function () {
    var imageDesc = $('.ad-image-description');
    var imageSBContainer = $('.desc-container');
    imageSBContainer.append(imageDesc);

    if (orientation === 'horizantal') {
        setHorizantalDescWrapperDim();
        setAdImage();
    }
    else if (orientation === 'vertical') {
        // Vertical alignment
        var container = $('#vertical_container');
        verticalAlignControls(container, imageDesc);
    }

    var img_container = $('.ad-image');
    var image_width = img_container.width();
    var image_height = img_container.height();
    centerImage(img_container, image_width, image_height);
}

setHorizantalDescWrapperDim = function () {
    var adImageWrapper = $('.ad-image-wrapper');
    var height = adImageWrapper.height();
    height = height - 20;

    var horizantalWrapper = $('.horizantal-desc-wrapper');
    horizantalWrapper.height(height);
    horizantalWrapper.width(descContainerWidth);
    horizantalWrapper.css("left", getHorizantalDescContainerLeftPos() + 'px');
}

getHorizantalDescContainerLeftPos = function () {
    var adImageWrapperWidth = $('.ad-image-wrapper').width();
    var leftPosition = adImageWrapperWidth - (descContainerWidth + 16);
    return leftPosition;
}

centerImage = function (img_container, image_width, image_height) {
    var availableWidth = getAvailableWidthForImage();
    var availabelHeight = getAvailableHeightForImage();

    img_container.css('top', '0px');
    if (image_height < availabelHeight) {
        var dif = availabelHeight - image_height;
        img_container.css('top', (dif / 2) + 'px');
    };

    img_container.css('left', '0px');
    if (image_width < availableWidth) {
        var dif = availableWidth - image_width;
        img_container.css('left', (dif / 2) + 'px');
    };
}

verticalAlignControls = function (container, control) {
    var availableHeight = container.height();
    var controlHeight = control.height();

    control.css('top', '0px');
    if (controlHeight < availableHeight) {
        var dif = availableHeight - controlHeight;
        control.css('top', (dif / 2) + 'px');
    };

}

getAvailableWidthForImage = function () {
    var imgWrapper = $('.ad-image-wrapper');
    var width = imgWrapper.width();
    if (orientation === 'horizantal')
        width = width - (descContainerWidth + 40);

    return width;
}

getAvailableHeightForImage = function () {
    var imgWrapper = $('.ad-image-wrapper');
    var height = imgWrapper.height();
    
    /* if (orientation === 'vertical')
        height = height - (descContainerHeight + 2); */

    return height;
}

/*
getHorizantalDescContainerWidth = function () {
    var adImageWidth = $('.ad-image').width();
    var adImageWrapperWidth = $('.ad-image-wrapper').width();



    return adImageWrapperWidth - adImageWidth - 40;
}
*/

setAdImage = function () {
    var adImage = $('.ad-image');
    adImage.position({
        left: 0,
        top: 0
    });

    adImage.css('left', 0 + 'px');
}