/**
 * @author Rok
 */
var movableBoxes = {

	jQuery: $,
	
	settings: {
		columns: '.column',
		widgetSelector: '.widget',
		handleSelector: '.widget-head',
		contentSelector: '.widget-content',
		columnSelector: '#column1, #column2, #column3',
		allIDs: '',
		setCookieName: 'listOrder',
		setCookieExpiry: 7,
		widgetDefault: {
			movable: true,
			removable: false,
			collapsible: false,
			editable: false
		},
		widgetIndividual: {
			intro: {
				movable: false,
				removable: false,
				collapsible: false,
				editable: false
			}
		}
	},
	
	init: function(){
		this.restoreOrder();
		this.restoreColor();
		this.restoreHeading();
		this.addWidgetControls();
		this.restoreHide();
		this.makeSortable();
		this.restoreDelete();
	},
	
	getOrder: function(){
		var $ = this.jQuery, settings = this.settings;
		var arr = settings.columnSelector.split(",");
		for (i = 0; i < arr.length; i++) {
			var list = '';
			$(arr[i] + ' > ' + settings.widgetSelector).each(function(){
				list += $(this).attr('id') + ',';
			});
			$.cookie(settings.setCookieName + '_' + i, list, {
				expires: settings.setCookieExpiry,
				path: "/"
			});
		}
	},
	
	restoreOrder: function(){
		var $ = this.jQuery, settings = this.settings;
		var arr = settings.columnSelector.split(",");
		for (j = 0; j < arr.length; j++) {
			var list = $(arr[j]);
			if (list == null) 
				continue;
			var cookie = $.cookie(settings.setCookieName + '_' + j);
			if (!cookie) 
				continue;
			var IDs = cookie.split(",");
			for (i = 0; i < IDs.length; i++) {
				if (IDs[i]) {
					var child = $('#' + IDs[i]);
					var savedOrd = $('#' + IDs[i]);
					child.remove();
					$(arr[j]).append(savedOrd);
				}
			}
		}
	},
	
	getColor: function(id, color){
		var $ = this.jQuery, settings = this.settings;
		$.cookie(id + '_color', color, {
			expires: settings.setCookieExpiry,
			path: "/"
		});
		// alert(id + ' -> ' + color);
	},
	
	restoreColor: function(){
		var $ = this.jQuery, settings = this.settings;
		$(settings.widgetSelector).each(function(){
			var cookie = '';
			cookie = $.cookie($(this).attr('id') + '_color');
			// alert(cookie);
			if (cookie) {
				var currentClass = $(this).attr('class');
				currentClass = currentClass.split(" ");
				currentClass = currentClass[1];
				// spremenimo celoten widget na novi class
				$(this).removeClass(currentClass);
				$(this).addClass(cookie + '_box');
				// spremenimo head widget-a na novi class
				$(this).find('.widget-head').removeClass(currentClass + '_head');
				$(this).find('.widget-head').addClass(cookie + '_box_head');
				// spremenimo p widget-a na novi class
				$(this).children('.widget-content').removeClass(currentClass + '_p');
				$(this).children('.widget-content').addClass(cookie + '_box_p');
			}
		});
	},
	
	getHeading: function(id, heading){
		var $ = this.jQuery, settings = this.settings;
		// alert(id.attr('id') + ' -> ' + heading);
		$.cookie(id.attr('id') + '_heading', heading, {
			expires: settings.setCookieExpiry,
			path: "/"
		});
	},
	
	restoreHeading: function(){
		var $ = this.jQuery, settings = this.settings;
		$(settings.widgetSelector).each(function(){
			var cookie = '';
			cookie = $.cookie($(this).attr('id') + '_heading');
			if (cookie) {
				// alert(cookie);
				$(this).find('h2').text(cookie);
			}
		});
	},
	
	getHide: function(id, status){
		var $ = this.jQuery, settings = this.settings;
		// alert(id.attr('id') + ' -> ' + status);
		$.cookie(id.attr('id') + '_hide', status, {
			expires: settings.setCookieExpiry,
			path: "/"
		});
	},
	
	restoreHide: function(){
		var movableBoxes = this, $ = this.jQuery, settings = this.settings;
		$(settings.widgetSelector).each(function(){
			var cookie = '';
			cookie = $.cookie($(this).attr('id') + '_hide');
			if (cookie) {
				// alert(cookie);
				if (cookie == 'hidden') {
					$(this).find('.collapse').click();
				}
			}
		});
	},
	
	getDelete: function(id, status){
		var $ = this.jQuery, settings = this.settings;
		// alert(id.attr('id') + ' -> ' + status);
		$.cookie(id.attr('id') + '_deleted', status, {
			expires: settings.setCookieExpiry,
			path: "/"
		});
	},
	
	restoreDelete: function(){
		var movableBoxes = this, $ = this.jQuery, settings = this.settings;
		$(settings.widgetSelector).each(function(){
			var cookie = '';
			cookie = $.cookie($(this).attr('id') + '_deleted');
			if (cookie) {
				// alert(cookie);
				if (cookie == 'deleted') {
					$(this).remove();
				}
			}
		});
	},
	
	getWidgetSettings: function(id){
		var $ = this.jQuery, settings = this.settings;
		return (id && settings.widgetIndividual[id]) ? $.extend({}, settings.widgetDefault, settings.widgetIndividual[id]) : settings.widgetDefault;
	},
	
	addWidgetControls: function(){
		var movableBoxes = this, $ = this.jQuery, settings = this.settings;
		
		$(settings.widgetSelector, $(settings.columns)).each(function(){
			var thisWidgetSettings = movableBoxes.getWidgetSettings(this.id);
			if (thisWidgetSettings.removable) {
				$('<a href="#" class="remove">ZAPRI</a>').mousedown(function(e){
					e.stopPropagation();
				}).click(function(){
					if (confirm('Okno bo ostranjeno. Nadaljujem?')) {
						$(this).parents(settings.widgetSelector).animate({
							opacity: 0
						}, function(){
							$(this).wrap('<div/>').parent().slideUp(function(){
								$(this).remove();
							});
						});
						movableBoxes.getDelete($(this).parents(settings.widgetSelector), 'deleted');
					}
					return false;
				}).appendTo($(settings.handleSelector, this));
			}
			
			if (thisWidgetSettings.editable) {
				$('<a href="#" class="edit">UREDI</a>').mousedown(function(e){
					e.stopPropagation();
				}).toggle(function(){
					$(this).css({
						backgroundPosition: '-66px 0',
						width: '55px'
					}).parents(settings.widgetSelector).find('.edit-box').slideDown('normal').find('input').focus();
					return false;
				}, function(){
					$(this).css({
						backgroundPosition: '',
						width: ''
					}).parents(settings.widgetSelector).find('.edit-box').slideUp('normal');
					return false;
				}).appendTo($(settings.handleSelector, this));
				$('<div class="edit-box" style="display:none;"/>').append('<ul><li class="item"><label>Spremeni naslov?</label> <input class="txt-navadna" value="' + $('h2', this).text() + '"/></li><br />').append('<li class="item"><label>Spremeni barvo:</label><a href="#" class="change_color_link default">Navadno</a> | <a href="#" class="change_color_link gray">Siva</a> | <a href="#" class="change_color_link green">Zelena</a> | <a href="#" class="change_color_link red">Rdeča</a> | <a href="#" class="change_color_link blue">Modra</a></li>').append('</ul>').insertAfter($(settings.handleSelector, this));
			}
			
			if (thisWidgetSettings.collapsible) {
				$('<a href="#" class="collapse">SKRČI</a>').mousedown(function(e){
					e.stopPropagation();
				}).toggle(function(){
					$(this).css({
						backgroundPosition: '-38px 0'
					}).parents(settings.widgetSelector).find(settings.contentSelector).slideUp('normal');
					movableBoxes.getHide($(this).parents(settings.widgetSelector), 'hidden');
					return false;
				}, function(){
					$(this).css({
						backgroundPosition: ''
					}).parents(settings.widgetSelector).find(settings.contentSelector).slideDown('normal');
					movableBoxes.getHide($(this).parents(settings.widgetSelector), 'visible');
					return false;
				}).prependTo($(settings.handleSelector, this));
			}
		});
		
		$('.change_color_link').click(function(){
			var color = $(this).attr('class');
			color = color.split(" ");
			color = color[1];
			movableBoxes.getColor($(this).parents(settings.widgetSelector).attr('id'), color)
			
			var currentClass = $(this).parents(settings.widgetSelector).attr('class');
			currentClass = currentClass.split(" ");
			currentClass = currentClass[1];
			// spremenimo celoten widget na novi class
			$(this).parents(settings.widgetSelector).removeClass(currentClass);
			$(this).parents(settings.widgetSelector).addClass(color + '_box');
			// spremenimo head widget-a na novi class
			$(this).parents(settings.widgetSelector).find('.widget-head').removeClass(currentClass + '_head');
			$(this).parents(settings.widgetSelector).find('.widget-head').addClass(color + '_box_head');
			// spremenimo p widget-a na novi class
			$(this).parents(settings.widgetSelector).children('.widget-content').removeClass(currentClass + '_p');
			$(this).parents(settings.widgetSelector).children('.widget-content').addClass(color + '_box_p');
			return false;
		});
		
		$('.edit-box').each(function(){
			$('input', this).keyup(function(){
				$(this).parents(settings.widgetSelector).find('h2').text($(this).val().length > 20 ? $(this).val().substr(0, 20) + '...' : $(this).val());
				movableBoxes.getHeading($(this).parents(settings.widgetSelector), $(this).val().length > 20 ? $(this).val().substr(0, 20) + '...' : $(this).val());
			});
		});
		
	},
	
	attachStylesheet: function(href){
		var $ = this.jQuery;
		return $('<link href="' + href + '" rel="stylesheet" type="text/css" />').appendTo('head');
	},
	
	makeSortable: function(){
		var movableBoxes = this, $ = this.jQuery, settings = this.settings, $sortableItems = (function(){
			var notSortable = '';
			$(settings.widgetSelector, $(settings.columns)).each(function(i){
				if (!movableBoxes.getWidgetSettings(this.id).movable) {
					if (!this.id) {
						this.id = 'widget-no-id-' + i;
					}
					notSortable += '#' + this.id + ',';
				}
			});
			if (notSortable != '') {
				return $('> li:not(' + notSortable + ')', settings.columns);
			}
			else {
				return $(settings.widgetSelector);
			}
		})();
		
		$sortableItems.find(settings.handleSelector).css({
			cursor: 'move'
		}).mousedown(function(e){
			$sortableItems.css({
				width: ''
			});
			$(this).parent().css({
				width: $(this).parent().width() + 'px'
			});
		}).mouseup(function(){
			if (!$(this).parent().hasClass('dragging')) {
				$(this).parent().css({
					width: ''
				});
			}
			else {
				$(settings.columns).sortable('disable');
			}
		});
		
		$(settings.columns).sortable({
			items: $sortableItems,
			connectWith: $(settings.columns),
			handle: settings.handleSelector,
			placeholder: 'widget-placeholder',
			forcePlaceholderSize: true,
			revert: 300,
			delay: 100,
			opacity: 0.8,
			containment: 'document',
			start: function(e, ui){
				$(ui.helper).addClass('dragging');
			},
			stop: function(e, ui){
				$(ui.item).css({
					width: ''
				}).removeClass('dragging');
				$(settings.columns).sortable('enable');
			},
			update: function(e, ui){
				movableBoxes.getOrder();
			}
		});
		
		
		$(settings.widgetSelector).each(function(){
			settings.allIDs += $(this).attr('id') + ',';
		});
		
		$('.clearCookies').click(function(){
			var allIDs = settings.allIDs.split(',');
			for (i = 0; i < allIDs.length; i++) {
				var cookie = '';
				$.cookie(allIDs[i] + '_deleted', null, {
					path: '/',
					expires: 10
				});
				$.cookie(allIDs[i] + '_hide', null, {
					path: '/',
					expires: 10
				});
				$.cookie(allIDs[i] + '_heading', null, {
					path: '/',
					expires: 10
				});
				$.cookie(allIDs[i] + '_color', null, {
					path: '/',
					expires: 10
				});
				$.cookie(allIDs[i] + '_heading', null, {
					path: '/',
					expires: 10
				});
				var arr = settings.columnSelector.split(",");
				for (j = 0; j < arr.length; j++) {
					var list = $(arr[j]);
					if (list == null) 
						continue;
					$.cookie(settings.setCookieName + '_' + j, null, {
						path: '/',
						expires: 10
					});
				}
			}
			location.reload(true);
			return false;
		})
	}
	
};