﻿(function ($) {
    $.fn.imageBlurClick = function (options, callback) {
        var opts = $.extend({},
            $.fn.imageBlurClick.defaultOptions, options),
            $moduleWrap = this;

        $moduleWrap.each(function () {
            var $module = $(this);


            //click event
            function Clicked(opacity, elements) {
                for (l = 0; l < elements.length; l++) {
                    var $eleToBlur = $(elements[l]);
                    if (opts.debug && console) {
                        console.log("eleToBlur:" + $eleToBlur.html());
                    }
                    var $img = $eleToBlur.find("img");
                    $img.addClass("imgblurd");
                    var width = parseInt($img.width());
                    var height = parseInt($img.height());
                    if (opts.debug && console) {
                        console.log('Img h:' + height);
                        console.log('Img w:' + width);
                    }
                    for (i = 0; i < opts.horz.length; i++) {
                        var topMargin = opts.vert[i] + (-height);
                        var leftMargin = opts.horz[i];
                        blur_html = '<div class="songtwo"><span style="position:absolute; margin-left:' + leftMargin + 'px; margin-top:' + topMargin + 'px;" >';
                        blur_html += '<img src=' + $img.attr('src') + ' width="' + width + '" height="' + height + '" style=" margin-top: ' + opts.vert[i] + 'px; margin-left:' + opts.horz[i] + 'px;" /></span></div>';

                        $eleToBlur.append(blur_html);
                        if (opts.debug && console) {
                            console.log('blur_html:' + blur_html);
                        }
                    }

                }
                for (l = 0; l < elements.length; l++) {
                    var $eleToBlur = $(elements[l]);
                    $eleToBlur.fadeTo(opts.fadeSpeed, opts.selectorFadeToOpacity);
                    $(".imgblurd").fadeTo(opts.fadeSpeed, opts.selectorFadeToOpacity);
                    $eleToBlur.find(opts.elementSel).fadeTo(opts.fadeSpeed, opacity);
                }
            };

            $module.bind('click', function () {
                if (opts.debug && console) {
                    console.log('module clicked');
                }
                Clicked(opts.defaultOpacity, opts.elementBlurSelectors);
                if (typeof callback == 'function') { // make sure the callback is a function
                    if (opts.debug && console) {
                        console.log('callback called');
                    }
                    callback.call(this); // brings the scope to the callback
                }
            });            

        });
        return $moduleWrap;
    };

    // define default options
    $.fn.imageBlurClick.defaultOptions = {
        elementBlurSelectors: new Array(),
        elementSel: '.songtwo span',
        defaultOpacity: 0.2,
        selectorFadeToOpacity: 0.7,
        fadeSpeed: 'fast',
        debug: false,
        horz: new Array(-1, -1, 0, 1, 1, 1, 0, -1), //horizonal alignment margins and width modification values, be vewy, vewy caweful
        vert: new Array(0, -1, -1, -1, 0, 1, 1, 1), //vertical alignment margins and width modification values, be vewy, vewy caweful
        callback: null
    };

    // Pass in context
})(jQuery);
