<?php
$ajax_nonce = wp_create_nonce("intense-plugin-noonce"); 
?>
<div style="padding: 10px 30px 0 30px; margin: 0 -30px; overflow: auto; overflow-y: hidden; min-height: 100px; background: #dedede; border-top: 1px solid #ccc;">
    <div id="images">
        
    </div>
</div>
<script>
    jQuery(function($) { 
        var $ = jQuery;

        $('.masonrysettings').hide();
        $('.marginpercentsettings').show();

        $('#layout').change(function() {
            var layout = $(this).val();

            $('.columnssettings').hide();
            $('.sizesettings').hide();                       
            $('.masonrysettings').hide();
            $('.marginpercentsettings').show();

            switch (layout) {
                case '':
                    $('.columnssettings').show();
                    $('.sizesettings').show();
                    break;
                case 'square':                          
                    break;
                case 'smallsquare':
                    break;
                case 'circle':
                    break;
                case 'masonry':
                    $('.masonrysettings').show();
                    $('.sizesettings').show();
                    $('.marginpercentsettings').hide();
                    break;
            }                        
        });

        $(".flickrsettings").hide();
        $(".facebooksettings").hide();
        $(".instagramsettings").hide();
        $(".smugmugsettings").hide();
        $(".zenfoliosettings").hide();
        $(".deviantartsettings").hide();
        $(".500pxsettings").hide();
        $(".googleplussettings").hide();

        $("#source").change(function() {
            var source = $(this).val();

            $('#images').html("");
            $(".wpsettings").hide();
            $(".postsettings").hide();
            $(".flickrsettings").hide();
            $(".facebooksettings").hide();
            $(".instagramsettings").hide();
            $(".smugmugsettings").hide();
            $(".zenfoliosettings").hide();
            $(".deviantartsettings").hide();
            $(".500pxsettings").hide();
            $(".googleplussettings").hide();                

            switch(source) {
                case "wordpress":
                    $(".wpsettings").show();
                    break;
                case "post_featured":
                    $(".postsettings").show();
                    break;
                case "flickr":
                    $(".flickrsettings").show();
                    break;
                case "facebook":
                    $(".facebooksettings").show();
                    break;
                case "instagram":
                    $(".instagramsettings").show();
                    break;
                case "smugmug":
                    $(".smugmugsettings").show();
                    break;
                case "zenfolio":
                    $(".zenfoliosettings").show();
                    break;
                case "deviantart":
                    $(".deviantartsettings").show();
                    break;
                case "500px":
                    $(".500pxsettings").show()
                    break;
                case "google+":
                    $(".googleplussettings").show();
                    break;
            }
        });

        $(".grouping").hide();
        $(".supersizedsettings").hide();
        $(".standardsettings").show();
        $(".galleriasettings").hide();

        $("#type").change(function() {
            var gallerytype = $(this).val();

            $(".grouping").hide();
            $('.radiussettings').hide();
            $('.supersizedsettings').hide();
            $(".standardsettings").hide();
            $(".galleriasettings").hide();

            switch(gallerytype) {
                case "colorbox":
                    $(".grouping").show();
                    $('.radiussettings').show();
                    $(".standardsettings").show();
                    break;
                case "galleria":
                    $(".galleriasettings").show();
                    break;
                case "photoswipe":
                    $(".grouping").show();
                    $('.radiussettings').show();
                    $(".standardsettings").show();
                    break;
                case "prettyphoto":
                    $(".grouping").show();
                    $('.radiussettings').show();
                    $(".standardsettings").show();
                    break;
                case "standard":
                    $('.radiussettings').show();
                    $(".standardsettings").show();
                    break;
                case "supersized":
                    $('.supersizedsettings').show();
                    break;
                case "swipebox":
                    $(".grouping").show();
                    $('.radiussettings').show();
                    $(".standardsettings").show();
                    break;
                case "thickbox":
                    $(".grouping").show();
                    $('.radiussettings').show();
                    $(".standardsettings").show();
                    break;
                case "touchtouch":
                    $(".grouping").show();
                    $('.radiussettings').show();
                    $(".standardsettings").show();
                    break;
                case "magnificpopup":
                    $(".radiussettings").show();
                    $(".standardsettings").show();
                    break;
                case "":
                    $(".radiussettings").show();
                    $(".standardsettings").show();
                    break;                  
            }
        });

        $(".adipoli-settings").hide();
        $(".effeckt-settings").hide();
        $(".subtle-settings").hide();

        $("#hover_effect").change(function() {
            var hovertype = $(this).val();
            
            $(".adipoli-settings").hide();
            $(".effeckt-settings").hide();
            $(".subtle-settings").hide();

            switch(hovertype) {
                case "adipoli":
                    $(".adipoli-settings").show();                    
                    break;
                case "effeckt":
                    $(".effeckt-settings").show();                    
                    break;
                case "subtle":
                    $(".subtle-settings").show();                    
                    break;
                default:
                    $("#type").change();
            }
        });

        var searchString = window.location.search;
        var matches = searchString.match(/post=([^&]+)/);
        
        if (matches && matches.length > 0) {
            var id = matches[1];

            $("#id").val(id);
        }
        
        $('.upload_gallery_button').live('click', function( event ){
            event.preventDefault();

            var target = $(this).data('target-id');
    
            window.parent.loadGalleryFrame($(this), function(attachments) {

                $.each(attachments, function (i, attachment) {
                    if (i == 0) { 
                        jQuery("#" + target).val('');
                    }

                    var ids = jQuery("#" + target).val() + ',' + attachment.id;

                    if (jQuery("#" + target).val().length == 0) {
                        ids = attachment.id;
                    }

                    jQuery("#" + target).val(ids);
                });

                setThumbnails();
            });
        });                    

        $("#id").change(setThumbnails);
        $("#order").change(setThumbnails);
        $("#orderby").change(setThumbnails);
        $("#include").change(setThumbnails);
        $("#exclude").change(setThumbnails);
        $("#user").change(setThumbnails);
        $("#source").change(setThumbnails);
        $("#groupid").change(setThumbnails);
        $("#facebookpage").change(setThumbnails);
        $("#tag").change(setThumbnails);
        $("#setid").change(setThumbnails);
        $("#album").change(setThumbnails);
        $("#pagesize").change(setThumbnails);
        $("#page").change(setThumbnails);

        function setThumbnails() {
            $("#images").html("Loading...");

            $.ajax({
                type: "POST",
                url: ajaxurl + '?action=intense_gallery_preview',
                data: {
                    security: '<?php echo $ajax_nonce; ?>',
                    source: $("#source").val(),
                    postid: $("#id").val(),
                    order: $("#order").val(),
                    orderby: $("#orderby").val(),
                    ids: $("#include").val(),
                    excludedids: $("#exclude").val(),
                    user: $("#user").val(),
                    group: $("#groupid").val(),
                    facebookpage: $("#facebookpage").val(),
                    tag: $("#tag").val(),
                    set: $("#setid").val(),
                    album: $("#album").val(),
                    pagesize: $("#pagesize").val(),
                    page: $("#page").val()
                }
            }).done(function (msg) {
                $("#images").width(0);
                $("#images").html(msg);
                var newWidth = 0;

                $("#images > img").css('visibility', 'hidden');

                $("#images > img").load(function() {
                    $(this).css('visibility', 'visible');
                    newWidth += $(this).outerWidth() * 1.015;
                    $("#images").width(newWidth < 300 ? 300 : newWidth);
                });
            });
        }
    });
</script>