var watch = {
		initialize : function() {
				
        // connect the comment delete buttons
				$$('.item .remove').addEvent('click', function() {
						 watch.removeItem(this);						
				});
				
				if($('watch')) {
				    if($('watch').hasClass('incomplete')) this.thumb();
            
            document.addEvent('keypress', function(e) {
                
                if(['input', 'textarea'].contains(e.target.get('tag'))) return true;
                
                if(e.key == 'enter') {
                    if(e.shift) {
                        var link = $('top').getElement('.caption .via a').get('href');
                        window.location.href = link;                    
                    } else {
                        var link = $('top').getElement('.caption .title a').get('href');
                        window.location.href = link;                    
                    } 
                }                
                            
            });
        
        }
          
        if($('comment')) {
            $('comment').addEvent('keyup', watch.counter);
            $('comment-form').addEvent('submit', function(e) {
                e.preventDefault();
                watch.comment();
            });
        }
																	
		},
		removeItem : function(element) {

				question.show(
						'Do you want to remove this from your Zoo?', 
						'You can add it again later, anytime.', 
						function() {

								var data = {
										'action' : 'delete_item',
										'item' : element.get('rel')
								};
						
								load('/watch/actions/', data, function(r) {
                    window.location.reload();
								});
																																				
						}
				);
				
		},					
		counter : function() {

        var c = $('comment-counter');
				var limit = 140;
				var text  = $('comment').get('value');
				var count = text.length;

				c.removeClass('limit');			
				if(count > limit) c.addClass('limit');			
				c.set('text', limit - count); 
										
		},
		comment : function() {
																
				var text = $('comment').get('value').trim();
				var form = $('comment-form');
				if(text.length < 3) return alert('Please enter some more text!');
				if(text.length > 140) return alert('Your comment is too long. Only 140 characters please!');

				form.addClass('loading');
				form.getElement('input[type=image]').set('disabled', 'disabled');
				form.getElement('textarea').set('readonly', 'readonly');
				
				form.set('send', {
						onComplete : function(r) {
								var r = JSON.decode(r, true);
								
								form.removeClass('loading');
								form.getElement('input[type=image]').removeProperty('disabled');
								form.getElement('textarea').removeProperty('readonly');
										
								if(r.status == 'error') return alert(r.msg);
                if(r.note) alert(r.note);

								$('comment').set('value', '');
								$('comment-counter').set('text', 140);

								var username = form.getElement('[name=username]').get('value');
								var counter  = $('title').getElement('h2.comments span');
								var count    = counter.get('text').toInt();
				
								counter.set('text', (count+1));
				
								html  = '<div class="user vcard"><a href="/user/' + username + '/" class="avatar url"><img src="/api/avatar/?' + $time() + '" width="30" height="30" alt="' + username + '" /></a></div>';
								html += '<div class="bubble">';
								html += '<div class="text"><p></p></div>';
								html += '<div class="meta"><p>right now by <a href="/user/' + username + '/">' + username + '</a></p></div>';
								html += '</div>'
								
								// add the delete button
								if(r.id && r.remove) {
								    html += '<a class="delete" href="/watch/actions/?action=delete_comment&comment=' + r.id + '">delete</a>';
								}
								
								// replace the empty box with the list
								if($('comments').getElement('.nothing')) {
										var ul = new Element('ul')
												.addClass('comments')
												.replaces( $('comments').getElement('.nothing') );
								}								
																
								var li = new Element('li');
										
                li.set('html', html)
                  .set('id', 'comment-' + r.id)
                  .setStyle('opacity', 0)
                  .addClass('comment')
                  .injectTop( $('comments').getElement('.comments') )
                  .fadeIn(300);
								
								// add the comment content
								li.getElement('.bubble .text p').set('text', r.text);
								
						}
				}).send();
								
		},
		thumb : function() {

        var uid  = $('watch').get('rel');
				var data = {'uid' : uid, 'box' : 458};
        
				load('/api/thumb/', data, function(r) {
						
						if(!$('thumb').getElement('img')) return false;
						
						var i = new Element('img')
								.set('src', r.url)
								.set('width', r.box.width)
								.set('height', r.box.height)
								.replaces( $('thumb').getElement('img') );

				});	

		}		

};

watch.initialize();

// setup the dropdowns
dropdown.onSubmit = function(r) {
    if(r.view == 'edit' || r.view == 'add' || r.view == 'post') window.location.reload();
}