//Load when the page is ready - Using jQuery to run events

$(document).ready(function(){
$('#error').jqm({overlay:0,overlayClass: 'whiteOverlay'}).jqmShow();
});

$(document).ready(function(){

	var $links = $('.images a');
	var $preview = $('#preview');
	
	//this mode doesn't require any setting, can have though
	$links.preload({ threshold:2 }); //same as $.preload( $links, { threshold:2 } );
	
	$links.mouseover(function(){
		$preview.attr('src', this.href);
	});	
	
// onHide : fade the window out, remove overlay after fade.

                var myClose = function(hash){
                    hash.w.fadeOut('3000', function(){
                        hash.o.remove();
                    });
                };
                var openInIframe = function(hash){
                    var newWidth = 0, newHeight = 0, newLeft = 0, newTop = 0;
                    var $trigger = $(hash.t);
                    var $modal = $(hash.w);
                    var myUrl = $trigger.attr('href');
                    var myTitle = $trigger.attr('title');
                    var $modalContent = $("iframe", $modal);
                    
                    $modalContent.html('').attr('src', myUrl);
                    //let's use the anchor "title" attribute as modal window title
                    $('#jqmTitleText').text(myTitle);
                    
                    myUrl = (myUrl.lastIndexOf("#") > -1) ? myUrl.slice(0, myUrl.lastIndexOf("#")) : myUrl;
                    var queryString = (myUrl.indexOf("?") > -1) ? myUrl.substr(myUrl.indexOf("?") + 1) : null;
                    
                    if (queryString != null && typeof queryString != 'undefined') {
                        var queryVarsArray = queryString.split("&");
                        for (var i = 0; i < queryVarsArray.length; i++) {
                            if (unescape(queryVarsArray[i].split("=")[0]) == 'width') {
                                var newWidth = queryVarsArray[i].split("=")[1];
                            }
                            if (escape(unescape(queryVarsArray[i].split("=")[0])) == 'height') {
                                var newHeight = queryVarsArray[i].split("=")[1];
                            }
                        }
                        // let's run through all possible values: 90%, nothing or a value in pixel
                        if (newHeight != 0) {
                            if (newHeight.indexOf('%') > -1) {
                                newHeight = Math.floor(parseInt($(window).height()) * (parseInt(newHeight) / 100));
                            }
                            var newTop = Math.floor(parseInt($(window).height() - newHeight) / 2);
                        }
                        else {
                            newHeight = $modal.height();
                        }
                        if (newWidth != 0) {
                            if (newWidth.indexOf('%') > -1) {
                                newWidth = Math.floor(parseInt($(window).width() / 100) * parseInt(newWidth));
                            }
                            var newLeft = Math.floor(parseInt($(window).width() / 2) - parseInt(newWidth) / 2);
                            
                        }
                        else {
                            newWidth = $modal.width();
                        }
                        // do the animation so that the windows stays on center of screen despite resizing
                        $modal.jqmShow().animate({
                            width: 730,
							//width: newWidth
							//height: newHeight
                            height: 560,
							top: 5,
                            //top: newTop,
                            left: newLeft,
                            marginLeft: 0
                        }, 2000);
                    }
                    
                    else {
                        // don't do animations
                        $modal.jqmShow();
                    }
                }
                
                //thickbox replacement
                $('#modalWindow').jqm({
                    modal: true,
                    trigger: 'a.thickbox',
                    target: '#jqmContent',
                    onHide: myClose,
                    onShow: openInIframe
                });
	
	$('#ex3a').jqm({
	    trigger: '#ex3aTrigger',
	    overlay: 0, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
	    overlayClass: 'whiteOverlay'})
	    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
		
	$('#ignore').jqm({
	    trigger: '#ignoreTrigger',
	    overlay: 0, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
	    overlayClass: 'whiteOverlay'})
	    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
		
	$('#buddydel').jqm({
	    trigger: '#buddydelTrigger',
	    overlay: 0, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
	    overlayClass: 'whiteOverlay'})
	    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
		
	$('#albumdelete').jqm({
	    trigger: '#albumdeleteTrigger',
	    overlay: 0, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
	    overlayClass: 'whiteOverlay'})
	    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
		
	$('#logout').jqm({
	    trigger: '#logoutTrigger',
	    overlay: 0, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
	    overlayClass: 'whiteOverlay'})
	    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
		
	$('#settings').jqm({
	    trigger: '#settingsTrigger',
	    overlay: 0, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
	    overlayClass: 'whiteOverlay'})
	    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
		
	$('#report').jqm({
	    trigger: '#reportTrigger',
	    overlay: 0, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
	    overlayClass: 'whiteOverlay'})
	    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
		
	$('#error').jqm({
	    trigger: '#errorTrigger',
	    overlay: 0, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
	    overlayClass: 'whiteOverlay'})
	    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
		
	$(".go").click(function () {	
//		var elementid = $(".go").attr("rel");
		var elementid = $(this).attr("rel");
		$('#answer_' + elementid).jqm({
		    trigger: '#answerTrigger_' + elementid,
		    overlay: 0, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
		    overlayClass: 'whiteOverlay'})
		    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
    });
   
	$('#profilbild').jqm({ajax: '/upload.php', trigger: 'a.profilbildTrigger'});
	
	$('#cancel').jqm({
	    trigger: '#logoutTrigger',
	    overlay: 0, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
	    overlayClass: 'whiteOverlay'})
	    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
	  
	  // Close Button Highlighting. IE doesn't support :hover. Surprise?
	  $('input.jqmdX')
	  .hover(
	    function(){ $(this).addClass('jqmdXFocus'); }, 
	    function(){ $(this).removeClass('jqmdXFocus'); })
	  .focus( 
	    function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
	  .blur( 
	    function(){ $(this).removeClass('jqmdXFocus'); });

			
    $("a.navilink").click(function () {
		var elementn = $(this).attr("rel") + '_navi';
		var visn = document.getElementById(elementn).style.display;
		$('div.hidden > div:visible').slideUp(500);
		if(visn == '' || visn == 'none') $("#" + elementn).slideToggle("slow");
    });
	
	$(".toggleField").toggle(function(){
						 if(document.getElementById(this.rel).style.display == "block"){
						 	$("#" + this.rel).slideUp(500); 
						 	this.innerHTML = "<img src=\"/images/layout/background/modules/users/icons/pfeilunten.png\" width=\"14\" height=\"14\" />";
						 	return
						 	};
					 	this.innerHTML = "<img src=\"/images/layout/background/modules/users/icons/pfeiloben.png\" width=\"14\" height=\"14\" />";
				    $("#" + this.rel).slideDown(500);
				  },function(){
						if(document.getElementById(this.rel).style.display == "none"){
							$("#" + this.rel).slideDown(500);
							this.innerHTML = "<img src=\"/images/layout/background/modules/users/icons/pfeiloben.png\" width=\"14\" height=\"14\" />";
							return
						};
						this.innerHTML = "<img src=\"/images/layout/background/modules/users/icons/pfeilunten.png\" width=\"14\" height=\"14\" />";
				    $("#" + this.rel).slideUp(500);
  			});
			
	$(".toggleAll").toggle(function(){
						 if(document.getElementById(this.rel).style.display == "block"){
						 	$("#" + this.rel).slideUp(500); 
						 	this.innerHTML = "Alle einblenden";
						 	return
						 	};
					 	this.innerHTML = "Alle ausblenden";
				    $("#" + this.rel).slideDown(500);
				  },function(){
						if(document.getElementById(this.rel).style.display == "none"){
							$("#" + this.rel).slideDown(500);
							this.innerHTML = "Alle ausblenden";
							return
						};
						this.innerHTML = "Alle einblenden";
				    $("#" + this.rel).slideUp(500);
  			});
			
	$(".toggleBoxGrey").toggle(function(){
						 if(document.getElementById(this.rel).style.display == "block"){
						 	$("#" + this.rel).slideUp(500); 
						 	this.innerHTML = "Einblenden";
						 	return
						 	};
					 	this.innerHTML = "Ausblenden";
				    $("#" + this.rel).slideDown(500);
				  },function(){
						if(document.getElementById(this.rel).style.display == "none"){
							$("#" + this.rel).slideDown(500);
							this.innerHTML = "Ausblenden";
							return
						};
						this.innerHTML = "Einblenden";
				    $("#" + this.rel).slideUp(500);
  			});
			
	$(".toggleBox").toggle(function(){
						 if(document.getElementById(this.rel).style.display == "block"){
						 	$("#" + this.rel).slideUp(500); 
						 	this.innerHTML = "Einblenden";
						 	return
						 	};
					 	this.innerHTML = "Ausblenden";
				    $("#" + this.rel).slideDown(500);
				  },function(){
						if(document.getElementById(this.rel).style.display == "none"){
							$("#" + this.rel).slideDown(500);
							this.innerHTML = "Ausblenden";
							return
						};
						this.innerHTML = "Einblenden";
				    $("#" + this.rel).slideUp(500);
  			});
			
	$(".toggleMessage").toggle(function(){
						 if(document.getElementById(this.rel).style.display == "block"){
						 	$("#" + this.rel).slideUp(500); 
//						 	this.innerHTML = "Einblenden";
						 	return
						 	};
//					 	this.innerHTML = "Ausblenden";
				    $("#" + this.rel).slideDown(500);
				  },function(){
						if(document.getElementById(this.rel).style.display == "none"){
							$("#" + this.rel).slideDown(500);
//							this.innerHTML = "Ausblenden";
							return
						};
//						this.innerHTML = "Einblenden";
				    $("#" + this.rel).slideUp(500);
  			});
			
	$(".toggleMessageAdd").toggle(function(){
						 if(document.getElementById(this.rel).style.display == "block"){
						 	$("#" + this.rel).slideUp(500); 
//						 	this.innerHTML = "Einblenden";
						 	return
						 	};
//					 	this.innerHTML = "Ausblenden";
				    $("#" + this.rel).slideDown(500);
				  },function(){
						if(document.getElementById(this.rel).style.display == "none"){
							$("#" + this.rel).slideDown(500);
//							this.innerHTML = "Ausblenden";
							return
						};
//						this.innerHTML = "Einblenden";
				    $("#" + this.rel).slideUp(500);
  			});
			
	$(".togglePinnwand").toggle(function(){
						 if(document.getElementById(this.rel).style.display == "block"){
						 	$("#" + this.rel).slideUp(500); 
						 	this.innerHTML = "Pinnen";
						 	return
						 	};
					 	this.innerHTML = "Doch nicht";
				    $("#" + this.rel).slideDown(500);
				  },function(){
						if(document.getElementById(this.rel).style.display == "none"){
							$("#" + this.rel).slideDown(500);
							this.innerHTML = "Doch nicht";
							return
						};
						this.innerHTML = "Pinnen";
				    $("#" + this.rel).slideUp(500);
  			});
			
	$(".toggleCheckbox").toggle(function(){
						 if(document.getElementById(this.rel).style.display == "block"){
						 	$("#" + this.rel).slideUp(500); 
						 	return
						 	};
				    $("#" + this.rel).slideDown(500);
				  },function(){
						if(document.getElementById(this.rel).style.display == "none"){
							$("#" + this.rel).slideDown(500);
							return
						};
				    $("#" + this.rel).slideUp(500);
  			});


	$('span.link').click(function() {
				  var element = $(this).attr("rel") + '_content';
				  var vis = document.getElementById(element).style.display;
				  $('div.hidden > div:visible').hide();
				  if(vis == '' || vis == 'none')  $('#' + element).show();
   			});
});