$(document).ready(function () {
    loadSlideshow()
});

$(window).resize(function () {
    resize()
});


function loadSlideshow() {
    if ($('#cycle').length > 0) {
        fA(function () { fB(function () { }) });
    }
}

function fA(callback) {
    resizeContainer();
    callback.apply(this, []);
}
function fB(callback) {
    loadImgs();
    callback.apply(this, []);
}

function resizeContainer() {
    var wtouse = $(window).width() - $('#left').width();
    var wh = $(window).height();
    var ratio = 1.24;
    var marginLeft = 280;

    if ($('#secondCol').length != 0) {
        ratio = 1.06
        marginLeft = 450
    }

    if ($(window).width() <= 640) {
        wh = 200
        marginLeft = 0
    }


    var imgw = wh * ratio;
    var fh;
    var fw;
    if (imgw <= wtouse) {
        fh = wtouse / ratio;
        fw = wtouse;
    } else {
        fh = wh;
        fw = imgw;
    }

    //hold imgs in center
    if (fw > wtouse) {
        marginLeft = marginLeft - ((fw - wtouse) / 2)
    }

    //$('#slideshow img').css('top', -(fh - wh) / 2).css('left', marginLeft).height(fh).width(fw)

    $('#cycle, #cycle img').height(fh).width(fw);
    if ($(window).width() > 640) {
        $('#cycle').css('left', marginLeft).css('top', -(fh - wh) / 2)
    }
    


}





function loadImgs() {

    $("#cycle img:first").fadeIn(1000, function () {

        //show loading
        $('#loader').fadeIn('fast');

        //gets images urls from ajax
        $.post('/ajax/carousel.aspx',
            {
                idMediaNode: $('#cycle').attr('idMediaNode'),
                contentTypeAlias: $('#cycle').attr('contentTypeAlias')
            },
            function (data) {

                //prints images insider the correct div
                $('#cycle').append(data);
                //remove loading
                $('#loader').fadeOut('fast').remove();

                //show buttons
                if ($('#cycle img').size() != 1) {
                    $('#prv, #nxt').fadeIn('fast');
                }

                fone(function () { ftwo(function () { }) });

            })

    })

    }



function fone(callback) {
    resize();
    callback.apply(this, []);
}
function ftwo(callback) {
    startCycle();
    callback.apply(this, []);
}

function resize() {
    resizeContainer()

}

function startCycle() {

    $('#cycle').cycle({
        fx: 'fade',
        speed: 1000,
        timeout: 4000,
        sync: true,
        next: '#nxt',
        prev: '#prv',
        containerResize: false,
        slideResize: false,
        fit: 1

    });


    $('#prv, #nxt').click(function () {
        $('#cycle').cycle('pause');
    })
   


}














//function slideshow() {

//    //$('#cycle img:first').fadeIn(300);

//    var actions = $('#cycle div').not(':first').length;
//    if (actions > 0) { $('#loader').fadeIn(); }

//    //load all images
//    $('#cycle div').not(':first').each(function () {
//        var img = new Image();
//        var src = $(this).attr('src');
//        $(img).load(next).attr('src', src);
//    })

//    function next() {
//        if (--actions) return;
//        //all loaded

//        fone(function(){ftwo(function(){})});

//    }

//    if (actions == 0) {
//        $('#cycleNav').hide().addClass('single')
//        foneA(function () { ftwoA(function () { }) });
//    }

//}

//function fone(callback) {
//    resizeImgs()
//    callback.apply(this,[]);

//}

//function ftwo(callback) {
//    $('#cycle img:first').fadeIn(300);
//    startCarousel()
//    callback.apply(this, []);

//}


//function foneA(callback) {
//    resizeImgs()
//    callback.apply(this, []);

//}

//function ftwoA(callback) {
//    $('#cycle img:first').fadeIn(300);

//}




//function resizeImgs() {

//    var wtouse = $(window).width() - $('#left').width();
//    var wh = $(window).height();
//    var ratio = 1.24;
//    var marginLeft = 280;
//    if ($('#secondCol').length != 0) {
//        ratio = 1.06
//        marginLeft = 450
//    }

//    var imgw = wh * ratio;
//    var fh;
//    var fw;
//    if (imgw <= wtouse) {
//        fh = wtouse / ratio;
//        fw = wtouse;
//    } else {
//        fh = wh;
//        fw = imgw;
//    }

//    //hold imgs in center
//    if (fw > wtouse) {
//        marginLeft = marginLeft - ((fw - wtouse) / 2)
//    }

//    $('#slideshow img').css('top', -(fh - wh) / 2).css('left', marginLeft).height(fh).width(fw).show()
//}


//var refreshIntervalId;
//var interval = 5000;
//function startCarousel() {
//    $('#loader:visible').fadeOut();
//        refreshIntervalId = setInterval(function () { carousel('nxt', false); }, interval);
//        $('.cycleBtn').one('click', function () {
//            clearInterval(refreshIntervalId)
//            carousel($(this).attr('id'), true)
//        });
//}

//function carousel(direction, isButton) {

//    var $active = $('#cycle div.active');
//    var $next;
//    if (direction == 'nxt') {
//        $next = $active.next().length ? $active.next() : $('#cycle div:first');
//    }
//    if (direction == 'prv') {
//        $next = $active.prev()
//        if ($active.attr('src') == $('#cycle div:first').attr('src')) {
//            $next = $('#cycle div:last');
//        }
//    }

//    //get next img src attr
//    var src = $next.attr('src');
//    var $img = $('#cycle img');

//    $img
//    .animate({ opacity: 0.0 }, 500, function () {
//        $(this).attr('src', src)
//        .animate({ opacity: 1.0 }, 500, function () {
//            //change active
//            $active.removeClass('active');
//            $next.addClass('active');
//            if (isButton) {
//                $('#' + direction).one('click', function () { carousel(direction, true) })
//            }

//        })
//    })


//}