var win = null;

$.fn.messages = function (config) {
	config = config || {};
	var defaults = {
        
    };   
        
	config = $.extend(defaults, config);
    
    var $container = $(this);
    
    var change_title_tag_counter = false; // Counter für den Title Tags
	var change_title_tag_interval = false; // Interval für den Counter
	var main_title_tag = ''; // Realer Title Tag vor der Veränderung

	var changeTitle = function () {
	
	if (change_title_tag_counter === false) {
		main_title_tag = document.title;
		change_title_tag_counter = 0;
	} 
		
	if (change_title_tag_counter == 0) {
			document.title = '***********************';
			change_title_tag_counter++;
		} else {
			document.title = 'Neue Nachricht!';
			change_title_tag_counter = 0;
		}
	};

	var counters = {user_messages: 0, messages: 0}; // Enthält User Message Counters und alle Counters 
	var count_new_messages_interval = false; // Interval für das Prüfen der neuen Nachrichten
	var selected_user_uid = false; // Selected User ID
	var do_not_load_messages = false; // Lade User Nachrichten
	var scroll_to_position = false; // Scrollt zur Postition
	
	var mask = null;
	var mask2 = null;
	
	var countNewMessages = function (user_uid, callback) { // Prüft neue Nachrichten
		Ext.Ajax.request({
    		url: config.count_url,
    		success: function (data) {
				var json_data = eval('(' + data.responseText + ')');
				var imail_messages = $('#imail-messages');
		
				if (json_data.messages > 0) {
				    imail_messages.addClass('sticker');
				    imail_messages.html(json_data.messages);
				    
				    $('.mail_eingang').parent().find('.sticker').remove();
				    $('.mail_eingang').parent().prepend('<strong class="sticker">'+json_data.messages+'</strong>');
		
				    if (change_title_tag_interval) {
				    	window.clearInterval(change_title_tag_interval);
				    }

				    change_title_tag_interval = window.setInterval(changeTitle, 1000);
					changeTitle();
				} else {
				    imail_messages.removeClass('sticker');
				    imail_messages.html('');
				    $('.mail_eingang').parent().find('.sticker').remove();
				    
				    if (change_title_tag_interval) {
				    	window.clearInterval(change_title_tag_interval);
				    	document.title = main_title_tag;
				    }
				    
				    $('.users_block span.sticker').remove();
				}
				
				if (user_uid && json_data.user_messages == 0) {
					 $('#'+user_uid+' span.sticker').remove();
				}
		
				if (callback) {
				    callback(json_data);
				} else {
				    counters = json_data;
				}
			},
			params: {'user_uid': user_uid},
			failure: function () {
			    if (change_title_tag_interval) {
			    	window.clearInterval(change_title_tag_interval);
			    	document.title = main_title_tag;
			    }
			    
			    counters = {user_messages: 0, messages: 0};
			}
		});
	};

	countNewMessages();
	var message_counter_interval = window.setInterval(countNewMessages, 20000);

	$container.click(function () {
	    if (win) {
	    	return false;
	    }
	    
	    window.clearInterval(message_counter_interval);
	    
	    Ext.Updater.defaults.showLoadIndicator = false;

		var max_msg_rows = 20;

	    var users_store = new Ext.data.Store({
	    	autoLoad: {params:{start:0}},
	        proxy: new Ext.data.HttpProxy({
	            url: config.get_users_url
	        }),
	        reader: new Ext.data.JsonReader({
	            root: 'rows',
	            totalProperty: 'totalCount',
	            idProperty: 'user_uid',
	            fields: [
	                'user_uid', 'user_name', 'user_image', 'status', 'imails_count', 'last_sendtime', 'today', 'yesterday'
	            ]
	        }),
	        listeners: {
				load: function (store, records, options) {
					var uindex = false;
					var row_counter=0;
					var row_array = [];
					var last_grid_date = false;
					
					Ext.each(records, function (record, number) {
					    if (last_grid_date != record.data.last_sendtime) {
							last_grid_date = record.data.last_sendtime;
	
							var p = new users_store.recordType({
							    user_uid: record.data.user_uid, 
							    index: number+row_counter,
							    today: record.data.today, 
							    yesterday: record.data.yesterday,
							    show_date: record.data.last_sendtime == record.data.today?'Heute':record.data.last_sendtime == record.data.yesterday?'Gestern':record.data.last_sendtime
							}, number+row_counter);
							
							row_array[number+row_counter] = p;
							row_counter++;
					    }
					    
					    record.data.index = number+row_counter;
					    record.id = number+row_counter;
					    row_array[number+row_counter] = record;
					    
					    if (selected_user_uid == record.data.user_uid) {
							uindex = record.data.index;
							selected_user_uid = false;
					    }
					});
					
					users_store.removeAll();
					Ext.each(row_array, function (record) {
					    if (record) {
							users_store.add(record);
						} else {
							//console.log(record);
						}
					});
					
					
					if (!uindex) {
						if (selected_user_uid) {
						    selected_user_uid = false;
						}
	
						smm.selectRow(1);
					} else {
						smm.selectRow(uindex);
	
						if (scroll_to_position) {
						    var d = user_grid.getView().scroller.dom;
							$(d).scrollTo(scroll_to_position, 1);
							scroll_to_position = false;
						}
					}
					
					if (mask) {
						mask.hide();
					}
				}
			}
	    });

	    var loadUsers = function () {
			users_store.load();
	    };
	
		var loadMessages = function (user_uid, noScroll) {
			loading_layer.addClass('active-loading-layer');
		    loading_layer.update('Nachrichten werden geladen...');
		    
		  //  mask2 = new Ext.LoadMask(Ext.get('messages-block'), {msg:"Nachrichten werden geladen..."})
		//	mask2.show();
		    
			Ext.Ajax.request({
				url: config.get_messages_url,
		    	params: {
					'user_uid': user_uid,
					start: 0,
					limit: max_msg_rows
				}, 
				nocache: true,
			    success: function(data) {
			    	messages.update(data.responseText);
		
			    	if (!noScroll) {
						scrollDown();
					}
	
					msg_area.focus();
					loading_layer.update('');
				    loading_layer.removeClass('active-loading-layer');
	
				    var bt_more_messages = Ext.get('bt-more-messages');
				    if (bt_more_messages) {
						bt_more_messages.on('click', function () {
							loadMoreMessages(smm.getSelected().data.user_uid);
						});
				    }
				    
				    if (counters.user_messages > 0) {
				    	countNewMessages(user_uid);
				    }
				    
				   // mask2.hide();
			     },
			     failure: function() {
			    	 loading_layer.update('');
			    	 loading_layer.removeClass('active-loading-layer');
			    	 loadMessages(user_uid, noScroll);
			     }
			});
		};

		var selected_index = null;
	    var user_grid = new Ext.grid.GridPanel({
	        store: users_store,
	        hideHeaders: true,
	        border: false,
	        id: 'users-grid',
	        loadMask: false,
	        maskDisabled: true,
	        region: 'center',
	        listeners: {
	    		afterrender: function() {
					mask = new Ext.LoadMask(Ext.get('users-panel'), {msg:"User werden geladen..."})
					mask.show();
				}
	    	},
	        sm: smm = new Ext.grid.RowSelectionModel(
			{
				singleSelect:true,
				listeners: {
					rowselect: function (elem, index, record) {
					    if (count_new_messages_interval) {
					    	window.clearInterval(count_new_messages_interval);
					    }
					    
				    	var interval_function = function () {
						    countNewMessages(record.data.user_uid, function (count_data) {
							    if (count_data.messages != counters.messages) {
								    selected_user_uid = record.data.user_uid;
	
									if (count_data.user_messages != counters.user_messages) {
										loadUsers();
										loadMessages(record.data.user_uid);
									} else {
									    do_not_load_messages = true;
	
									    var d = user_grid.getView().scroller.dom;
									    scroll_to_position = d.scrollTop;
									    
										loadUsers();
									}
							    } else if (count_data.user_messages != counters.user_messages) {
									counters = count_data;
									loadMessages(record.data.user_uid);
							    }
							    
							    counters = count_data;
						    });
						};
						
						count_new_messages_interval = window.setInterval(interval_function, 10000);
						interval_function ();

			    			max_msg_rows = 20;
			    		
						if (!record.data.user_name) {
						    index++;
						    smm.selectRow(index);
						}

						if (selected_index != index) {
						    if (!do_not_load_messages) {
			    			loadMessages(record.data.user_uid);
						    } else {
							do_not_load_messages = false;
						    }
						    
			    			selected_index = index;
						}
					}
				}
			}
	        ),
	        columns: [
			{
		            id: 'user_uid',
		            dataIndex: 'user_uid',
		            width: 216,
		            renderer: function (value, p, record) {
					if (record.data.show_date) {
						return String.format('<div class="users_block_time" id="'+record.data.user_uid+'"><h4>{0}</h4></div>',
						record.data.show_date
						);
					} else {
						return String.format('<div class="users_block"><a href="'+BASE_PATH+'/de/profil/{0}" title="{0}" target="_blank"><img src="{1}" alt="{0}" height="66" width="50" /></a><h4 style="float: left;">{0}<br />{2}</h4><div class="clear"></div>{3}</div>',
						record.data.user_name,
						record.data.user_image,
						(record.data.status?'<span style="color: green; font-size: 8px;">online</span>':'<span style="color: #C80000; font-size: 8px;">offline</span>'),
						(record.data.imails_count>0?'<span class="sticker" style="float: right;">'+record.data.imails_count+'</span>':'')
						);
					}
			        }
		        }
			]
	    });

	    var loadMoreMessages = function (user_uid) {
		    max_msg_rows = max_msg_rows+20;
		    loadMessages(user_uid, true);
		};

	    // User Liste
	    var users = new Ext.Panel({
	        region: 'west',
	        split: false,
	        width: 236,
	        collapsible: false,
	        border: false,
	        id: 'users-panel',
	        margins:'3 0 3 3',
	        cmargins:'3 3 3 3',
	        layout: 'border',
	        items: [user_grid]
	    });
	    
	    // User Messages
	    var messages = new Ext.Panel({
			autoScroll: true,
	        region: 'center',
	        split: false,
	        id: 'messages-block',
	        collapsible: false,
	        margins:'7 5 7 5',
	        cmargins:'7 5 7 5',
	        bodyStyle: {
			'-moz-border-radius': '5px',
			'-webkit-border-radius': '5px',
			'border-radius': '5px',
			padding: '8px 10px'
	        },
	        listeners: {
	    		afterrender: function() {
				
				}
	    	}
	    });
	
	    var scrollDown = function () {
		    var d = messages.body.dom;
		    d.scrollTop = d.scrollHeight - d.offsetHeight + 100;

			setTimeout(function () {
			    var d = messages.body.dom;
			    d.scrollTop = d.scrollHeight - d.offsetHeight + 100;
			}, 1000);
		};
	
		var resized = false;
	
	    // Buttons Bar
	    var buttons_bar = new Ext.Panel({
	        region: 'center',
	        split: false,
	        id: 'editor_buttons',
	        cls: 'editor_buttons',
	        collapsible: false,
	        margins:'0 5 3 5',
	        cmargins:'0 5 3 5',
	        layout: 'table',
	        bodyStyle: {
			background: '#e1e1e1',
			'-moz-border-radius': '5px',
			'-webkit-border-radius': '5px',
			'border-radius': '5px',
			padding: '5px'
			},
			items: [
			new Ext.BoxComponent({
			    autoEl: {
			        tag: 'input',
			        type: 'button',
			        id: 'bt_createimage',
			        lang: '[IMG][/IMG]'
			    }
			}),
			new Ext.BoxComponent({
			    autoEl: {
			        tag: 'input',
			        type: 'button',
			        id: 'bt_createvideo',
			        lang: '[VIDEO][/VIDEO]'
			    }
			}),
			new Ext.BoxComponent({
			    autoEl: {
			        tag: 'input',
			        type: 'button',
			        id: 'bt_createmp3',
			        lang: '[MP3][/MP3]'
			    }
			}),
			new Ext.BoxComponent({
			    autoEl: {
			        tag: 'input',
			        type: 'button',
			        id: 'bt_createlink',
			        lang: '[URL][/URL]'
			    }
			}),
			new Ext.BoxComponent({
			    autoEl: {
			        tag: 'input',
			        type: 'button',
			        id: 'bt_underline',
			        lang: '[U][/U]'
			    }
			}),
			new Ext.BoxComponent({
			    autoEl: {
			        tag: 'input',
			        type: 'button',
			        id: 'bt_italic',
			        lang: '[I][/I]'
			    }
			}),
			new Ext.BoxComponent({
			    autoEl: {
			        tag: 'input',
			        type: 'button',
			        id: 'bt_bold',
			        lang: '[B][/B]'
			    }
			}),
			new Ext.BoxComponent({
			    autoEl: {
			        tag: 'input',
			        type: 'button',
			        id: 'bt_strike',
			        lang: '[S][/S]'
			    }
			}),
			loading_layer = new Ext.BoxComponent({
			    autoEl: {
			        tag: 'div',
			        id: 'loading-layer'
			    },
			    cellCls: 'full-width-td'
			})
			]
	    });

	    var msg_area = new Ext.form.TextArea({
                hideLabel: true,     // override hideLabels layout config
                name: 'msg',
                id: 'msg',
                region: 'center',
                anchor: '100% 100%',
                style: {
        			'border': '1px solid #D0D0D0',
        			'padding': '8px 10px',
        			'background': '#fff'
        	        },
        	        margins:'5 5 7 5',
        	        cmargins:'5 5 7 5',
        	        enableKeyEvents: true,
        	        listeners: {
        			keypress: function (elem, e) {
        				if (e.getCharCode() == 13 && !e.shiftKey) {
        				    sendMessage();
        				    e.stopEvent();
        				}
        			}
        		    }
	    });

		var sendMessage = function () {
		    loading_layer.addClass('active-loading-layer');
		    loading_layer.update('Nachricht wird gesendet...');
		    
		    //mask2 = new Ext.LoadMask(Ext.get('messages-block'), {msg:"Nachrichten werden geladen..."})
			//mask2.show();
		    
		    Ext.Ajax.request({
    	   url: config.send_message_url,
    	   method: 'POST',
    	   success: function (data) {
				if (data.responseText) {
					data = eval('(' + data.responseText + ')');
		        		if (data.succeed == true) {
		        		    	if (smm.getSelected().data.index != 1) {
						loadUsers();
					    } else {
						loadMessages(smm.getSelected().data.user_uid);
					    }
					}
				} else {

				}
    	   },
    	   failure: function (data) {},
    	   params: {msg: msg_area.getValue(), user_uid: smm.getSelected().data.user_uid}
    	});
    	
        msg_area.setValue('');
		};
	    
	    var send_form = new Ext.form.FormPanel({
		    region: 'south',
		    split: false,
		    height: 100,
		    border: false,
		    defaultType: 'textfield',
		    buttonAlign: 'right',
		    layout: 'border',
	        bodyStyle: {
			background: 'transparent'
			},
		    defaults: {
		        // applied to each contained item
		        msgTarget: 'side'
		    },
		    items: [
			msg_area,
			new Ext.BoxComponent({
			    margins:'5 5 7 5',
			        cmargins:'5 5 7 5',
			        region: 'east',
			        listeners: {
					render: function (component){
						component.getEl().on('click', function (e){
						    sendMessage();
						});
					}
			        },
			    autoEl: {
			        tag: 'input',
			        type: 'button',
			        id: 'send-button'
			    }
			})
		    ],
		    layoutConfig: {
		        labelSeparator: '~' // superseded by assignment below
		    },
		    // config options applicable to container when layout='form':
		    hideLabels: true
		});
	
	    // Form Panel
	    var form_panel = new Ext.Panel({
	        region: 'south',
	        split: false,
	        collapsible: false,
	        border: false,
	        height: 140,
	        layout: 'border',
	        bodyStyle: {
			background: 'transparent'
	        },
	        items: [
			buttons_bar,
			send_form
	        ]
	    });
	
	    // Right Side
	    var right_side = new Ext.Panel({
	        region: 'center',
	        split: false,
	        collapsible: false,
	        margins:'0 3 0 0',
	        cmargins:'0 3 0 0',
	        border: false,
	        layout: 'border',
	        id: 'messages-right-side',
	        bodyStyle: {
			background: 'transparent'
	        },
	        items: [
			messages,
			form_panel
	        ]
	    });
	
	    win = new Ext.Window({
	        title: 'User Chat',
	        closable:true,
	        width: 900,
	        height: 500,
	        id: 'messages-window',
	        plain: false,
	        maximizable: true,
	        layout: 'border',
	        items: [users, right_side],
	        listeners: {
				resize: function (elem, width, height) {
					if (resized) {
                			scrollDown();
                		} else {
                		    resized = true;
                		}
	    		},	
	    		show: function () {
					$('#editor_buttons input[type="button"]').click(function () {
						var input = $(this);
						var text_elem = $('#msg');
	
						var code = input.attr('lang');
						
						exploded_code = code.split('][');
						code1 = exploded_code[0]+']';
						code2 = '['+exploded_code[1];
						
						if (input.attr('class') == 'url_type') {
						    Ext.Msg.prompt('Eingabe', 'URL eingeben:', function (btn, text){
							    if (btn == 'ok' && text){
								if (text.indexOf('http://') == -1) {
								    text = 'http://'+text;
								}
								
								text_elem.val(text_elem.val()+code1+text+code2+' ');
							    }
							});
						} else {
						    Ext.Msg.prompt('Eingabe', 'Text eingeben:', function (btn, text){
							    if (btn == 'ok' && text){
								text_elem.val(text_elem.val()+code1+text+code2+' ');
							    }
							});
						}
						
						text_elem.focus();
					});
	    		},
			close: function (p) {
			    win.destroy();
			    win = null;

			    if (count_new_messages_interval) {
					window.clearInterval(count_new_messages_interval);
			    }

			    message_counter_interval = window.setInterval(countNewMessages, 20000);
			}
			}
	    });
	
	    win.show(this);

	    return false;
	});
};