$(function() {
    var bannerEffect,
        bannerTime,
        bannerSpeed,
        bannerW,
        bannerH;

    $(".ad_banner_ad_fx").change(function () {
        bannerTime = $("#pageslide #timeout").val()*1000;
        bannerSpeed = $("#pageslide #speed").val()*1000;

        bannerTime = parseInt(bannerTime) || 300;
        bannerSpeed = parseInt(bannerSpeed) || 300;
        slideshow($(this).val(), bannerTime, bannerSpeed);
    });
	slideshow = function (bannerEffect, bannerTime, bannerSpeed) {
        var $preview = $('#pageslide .preview'),
            $previewImg = $('#pageslide .preview img');
        $preview.cycle('destroy');
        $previewImg.removeAttr('style');
		$preview.cycle({
            fx: bannerEffect,
            timeout: bannerTime,
            speed: bannerSpeed,
        });
	}
    $('.open-slide').on('click', function() {
        var $preview = $('#pageslide .preview'),
            $data = $(this).data(),
            effect = $data.fx,
            time = $data.time,
            speed = $data.speed,
            W = $data.w,
            H = $data.h;
        $("#pageslide #timeout").attr("value", time/1000);
        $("#pageslide #speed").attr("value", speed/1000);
        $("#pageslide #banner_width").attr("value", W);
        $("#pageslide #banner_height").attr("value", H);
        $("#pageslide #ad_banner_ad_fx option").each(function(i) {
            if($(this).attr("value") == effect) {
                this.selected = true;
            }
        });
        slideshow(effect, time, speed)
    })
    $('.open-modal').on('click', function() {
        var $data = $(this).data()
        bannerEffect = $data.fx;
        bannerTime = $data.time;
        bannerSpeed = $data.speed;
        bannerW = $data.w;
        bannerH = $data.h;
        $('#preview').modal('show');
    });
    $('#preview').on('shown', function() {
        if(bannerW > 500) {
            var resize = 500/bannerW
            bannerW = Math.floor(bannerW*resize);
            bannerH = Math.floor(bannerH*resize);
        };
        if(bannerH > 300) {
            var resize = 300/bannerH
            bannerW = Math.floor(bannerW*resize);
            bannerH = Math.floor(bannerH*resize);
        }
        $(this).find('.preview').cycle({
            fx: bannerEffect,
            timeout: bannerTime,
            speed: bannerSpeed,
            fit: 1,
            width: bannerW,
            height: bannerH,
        });
    });
    $('#preview').on('hidden', function() {
        $(this).find('.preview').cycle('destroy');
        $(this).find('.preview img').removeAttr('style');
    });
});