/* instructions for css for jacarousel
Developed by Rajesh Makhija for Media Fusion
Kindly check before making changes to this script.

Adjust Css with special attention to these
jcarousel-clip-horizontal css computes to item size by division with max no of items on carousel
item width in css should match img width height css name is jcarousel-item-horizontal or vertical as per requirement
css will need to be adjusted as per requirement
img rollover has to be given in css at the following class
.jcarousel-skin-tango .jcarousel-item-horizontal img.highlight or vertical accordingly
script has been adjusted only for horizontal. Will need setup for vertical once

setCarousel({
    Type: 'json',
    Data: strProducts,
    JsonProcess: simpleParser,
    ListObject: "a",
    OnPageId: carOnPageId,
    Direction: 'H',
    Display: 4,
    ShowTooltip: false,
    TipPos: 'Top',
    TipOffset: 2,
    TipDelay: 100,
    OnClick: clickLi
});*/

var oData;
var carousel;

function mfCarousel(data) {
    $('#loader').show();
    oData = data;
    switch (oData.Type) {
        case "json":
            oData.JsonProcess(oData.Data, startCarousel);
            break;
        case undefined:
            startCarousel();
            break;
    }
}

function startCarousel() {
    //reading data object
    id = oData.OnPageId;
    ctype = oData.Direction;
    carMaxVis = oData.Display;
    toolsOn = oData.ShowTooltip;
    click = oData.OnClick;
    lo = oData.ListObject;

    //setting tooltip
    if (oData.TipPos == undefined)
        tpos = "Top";
    else
        tpos = oData.TipPos;

    if (oData.TipOffset == undefined)
        toff = 2;
    else
        toff = oData.TipOffset;

    if (oData.TipDelay == undefined)
        tdelay = 2;
    else
        tdelay = oData.TipDelay;

    //setting up jcarousel
    $('#' + id).jcarousel({
        visible: carMaxVis,
        scroll: 1
    });

    carousel = $('#' + id).data('jcarousel');

    //this is the image roll over script for hover
    $('#' + id + ' li ' + lo).hover(function () {
        $(this).toggleClass('highlight');
    });

   
    //click function for li
    $('#' + id + ' li ' + lo).click(function () {
        click($(this).attr('rel'));
    });

//    //click function for li of images
//    $('#' + id + ' li ' + lo).click(function () {
//        click($(this).attr('id'));
//    });

    //if lesser than max, this is the thumb centering mechanism
    if ($('#' + id + ' li').length < (carMaxVis + 1)) {
        unitWidth = Number($('#' + id + ' li').width()); // width of each li
        clipWidth = Number($('.jcarousel-clip-horizontal').width()); //width of the clip mask of carousel
        unitCount = Number($('#' + id + ' li').length); //No of items on carousel
        difference = (clipWidth - (carMaxVis * unitWidth)) / 2; //difference between carousel width and required with of max items
        actualItemSize = Number($('#' + id + ' li img').width()); //need right offset as acutual image size and unitwidth is different.
        margin = $('.jcarousel-item-horizontal').css('margin-left'); // also need to offset left margin set in css.
        offset = unitWidth - actualItemSize - Number(margin.substr(0, (margin.length - 2)));
        displace = (clipWidth - (unitCount * unitWidth) + offset) / 2; // displace width for centereing.
        displace = displace - difference; // adjusting the displacement with difference to get exact centering.

        carousel.buttonNext.hide();
        carousel.buttonPrev.hide();
        $('#' + id).css('left', displace + 'px');
    }

    //this sets up the tooltip
    if (toolsOn) {
        $('#' + id + ' li ' + lo).tipTip(
        {
            maxWidth: "auto",
            edgeOffset: tpos,
            defaultPosition: toff,
            delay: tdelay
        });
    }
}

function loadItem() {
    index = currentIndex
    var folder = $(strXml).find("folder").text();
    imgNode = $(strXml).find("Item").eq(index);
    img = rootPath + 'Assets/images/' + folder + '/' + imgNode.find("image").text();
    txt = imgNode.find("caption").text();
    $('#imageText').html(txt);
    $('#imageImage').hide();
    newImage = "image_" + loadIndex;
    loadIndex++;
    strImg = '<img src="' + img + '" id="' + newImage + '" style="display:none" />';

    $('#imgHolder').append(strImg);

    $('#' + newImage).bind('load', showNewImage);

    carousel.scroll($.jcarousel.intval(currentIndex));
}

function setHighLight() {
    $('#' + carOnPageId + ' li img').removeClass('highlight');
    $('#' + carOnPageId + ' li img').eq(currentIndex).addClass('highlight');

    $('#' + carOnPageId + ' li').removeAttr('disabled');
    $('#' + carOnPageId + ' li').eq(currentIndex).attr('disabled', 'disabled');
}

function showNewImage() {
    if (currentImage != "") {
        $('#' + currentImage).fadeOut('fast', function () {
            $('#' + newImage).fadeIn('slow', 'swing');
            setHighLight();
            $(this).remove();
            currentImage = newImage;
        });
    } else {
        $('#' + newImage).fadeIn('slow', 'swing');
        currentImage = newImage;
    }
    if (showOn)
        timeoutID = window.setTimeout(nextImage, timing);
}

function nextImage() {
    window.clearTimeout(timeoutID);
    if (currentIndex < (maxIndex - 1)) {
        currentIndex++;
    } else {
        currentIndex = 0;
    }
    loadItem();
}

stopShow = function() {
    window.clearTimeout(timeoutID);
    showOn = false;
}

startShow = function() {
    showOn = true;
    nextImage();
}

startSlideShow = function() {
    loadItem();
}