/* global redux_change, wp */

(function($){
	"use strict";
    
    $.reduxBackground = $.reduxBackground || {};
	
    $(document).ready(function () {
         $.reduxBackground.init();
    });

	/**
	* Redux Background
	* Dependencies		: jquery, wp media uploader
	* Feature added by	: Dovy Paukstys
	* Date				: 07 Jan 2014
	*/
    $.reduxBackground.init = function(){
		// Remove the image button
		$('.redux-container-background .remove-image, .redux-container-background .remove-file').unbind('click').on('click', function(e) {
			$.reduxBackground.removeImage( $(this).parents('fieldset.redux-field:first') );
			$.reduxBackground.preview($(this));
			return false;
		});

		// Upload media button
		$('.redux-container-background .background_upload_button').unbind().on('click', function( event ) {
			$.reduxBackground.addImage( event, $(this).parents('fieldset.redux-field:first') );
		});

		$('.redux-background-input').on('change', function() {
			$.reduxBackground.preview($(this));
		});

		$('.redux-container-background .redux-color').wpColorPicker({
			change: function(u, ui) {
				redux_change($(this));
				$('#' + u.target.id + '-transparency').removeAttr('checked');
				$(this).val( ui.color.toString() );
				$.reduxBackground.preview($(this));
			}
		});
		

    };

    // Update the background preview
    $.reduxBackground.preview = function(selector) {
		var parent = selector.parents('.redux-container-background:first');
		var preview = $(parent).find('.body-background_previewer');

		if (!preview) { // No preview present
			return;
		}

		var split = parent.data('id')+'][';
		var css = 'height:'+preview.height()+'px;';
		$(parent).find('.redux-background-input').each(function() {
			var data = $(this).serializeArray();
			data = data[0];
			if (data && data.name.indexOf('background]') != -1) {
				if (data.value !== "") {
					data.name = data.name.split(split);
					data.name = data.name[1].replace(']', '');
					if (data.name == "background-image") {
						css += data.name+':url("'+data.value+'");';
					} else {
						css += data.name+':'+data.value+';';	
					}					
				}
				
			}
		});

		preview.attr('style', css).fadeIn();

	};

    // Add a file via the wp.media function
    $.reduxBackground.addImage = function (event, selector) {

		event.preventDefault();

		var frame;
		var jQueryel = jQuery(this);

		// If the media frame already exists, reopen it.
		if ( frame ) {
			frame.open();
			return;
		}

		// Create the media frame.
		frame = wp.media({
			multiple: false,
			library: {
				//type: 'image' //Only allow images
			},
			// Set the title of the modal.
			title: jQueryel.data('choose'),

			// Customize the submit button.
			button: {
				// Set the text of the button.
				text: jQueryel.data('update')
				// Tell the button not to close the modal, since we're
				// going to refresh the page when the image is selected.

			}
		});

		// When an image is selected, run a callback.
		frame.on( 'select', function() {
			// Grab the selected attachment.
			var attachment = frame.state().get('selection').first();
			frame.close();

			console.log(attachment.attributes.type);

			if ( attachment.attributes.type !== "image") {
				return;
			}

			selector.find('.upload').val(attachment.attributes.url);
			selector.find('.upload-id').val(attachment.attributes.id);
			selector.find('.upload-height').val(attachment.attributes.height);
			selector.find('.upload-width').val(attachment.attributes.width);
			redux_change( jQuery(selector).find( '.upload-id' ) );
			var thumbSrc = attachment.attributes.url;
			if (typeof attachment.attributes.sizes !== 'undefined' && typeof attachment.attributes.sizes.thumbnail !== 'undefined') {
				thumbSrc = attachment.attributes.sizes.thumbnail.url;
			} else if ( typeof attachment.attributes.sizes !== 'undefined' ) {
				var height = attachment.attributes.height;
				for (var key in attachment.attributes.sizes) {
					var object = attachment.attributes.sizes[key];
					if (object.height < height) {
						height = object.height;
						thumbSrc = object.url;
					}
				}
			} else {
				thumbSrc = attachment.attributes.icon;
			}
			selector.find('.upload-thumbnail').val(thumbSrc);
			if ( !selector.find('.upload').hasClass('noPreview') ) {
				selector.find('.screenshot').empty().hide().append('<img class="redux-option-image" src="' + thumbSrc + '">').slideDown('fast');
			}
			//selector.find('.media_upload_button').unbind();
			selector.find('.remove-image').removeClass('hide');//show "Remove" button
			selector.find('.redux-background-input-properties').slideDown();
			$.reduxBackground.preview(selector.find('.upload'));
		});

		// Finally, open the modal.
		frame.open();
	};

    // Update the background preview
    $.reduxBackground.removeImage = function(selector) {

		// This shouldn't have been run...
		if (!selector.find('.remove-image').addClass('hide')) {
			return;
		}
		selector.find('.remove-image').addClass('hide');//hide "Remove" button
		selector.find('.upload').val('');
		selector.find('.upload-id').val('');
		selector.find('.upload-height').val('');
		selector.find('.upload-width').val('');
		redux_change( jQuery(selector).find( '.upload-id' ) );
		selector.find('.redux-background-input-properties').hide();
		var screenshot = selector.find('.screenshot');
		
		// Hide the screenshot
		screenshot.slideUp();

		selector.find('.remove-file').unbind();
		// We don't display the upload button if .upload-notice is present
		// This means the user doesn't have the WordPress 3.5 Media Library Support
		if ( jQuery('.section-upload .upload-notice').length > 0 ) {
			jQuery('.background_upload_button').remove();
		}

		//$.reduxBackground.preview(selector);

    };    

})(jQuery);