var image_path = '';
var save_url = '';
var gallery_id = 0;
var section_id = 0;
var disable_vote = [];
var vote_array = [];
var rating_array = [];
var vote_count_array = [];

//var delet_comment_url = '';

/*
function IncludeJavaScript(jsFile)
{
  document.write('<script type="text/javascript" src="'
    + jsFile + '"></scr' + 'ipt>'); 
}
*/


/*
function createHTTPRequest() {
	var http = null;
	if (window.XMLHttpRequest) {
	   http = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	   http = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return http;
}
*/
function mod_imagegallery_toggle_public_status(user_gallery_id) {
	var url = WB_URL + "/modules/imagegallery/ajax_toggle_status.php?&gallery_id="+ user_gallery_id;
	var data = {"gallery_id" : user_gallery_id};
	$.ajax({
		  url: url,
		  dataType: "json",
		  data: data,
		  success: function(data) {
				if(data != '')
					alert(data.name);
			}
		});

	$("#imagegallery_public_status").attr("src",WB_URL+"/modules/imagegallery/images/lock.png");
	$("#imagegallery_public_status").attr("title", "veröffentlichen");
	
}


function mod_imagegallery_confirm_link(message, url) {
	if(confirm(message)) location.href = url;
}



function mod_imagegallery_init(wburl) {
	WB_URL = wburl;
}


function showDetails(details) {
    $("#image_details").html(details);
		//document.getElementById('image_details').innerHTML = details;
}

function delete_comment(comment_id, delet_comment_url, section_id,gallery_id, image_id) {
    check = confirm('Wollen Sie den Kommentar wirklich l�schen?');
    if (check == true) {
        delete_request = createHTTPRequest();
        delete_request.open('POST',delet_comment_url,true);
        delete_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    		delete_request.setRequestHeader('Cache-Control', 'no-cache');
    		delete_request.onreadystatechange = function() {
    		if (delete_request.readyState == 4) {
    		  if (delete_request.responseText != 'false') {
    			document.getElementById('comment_list').innerHTML = delete_request.responseText;
    		  }
    		}
    	}
    	delete_request.send('comment_id='+comment_id+'&section_id='+section_id+'&gallery_id='+gallery_id+'&image_id='+image_id);
    	
        
        
    }
}

function imagegallery_hideDiv(name) {
        $("#"+name).hide();
				//var r = document.getElementById(name);
        //r.style.visibility = 'hidden';
}






















function imagegallery_delete_from_usergallery(image_id,user_gallery_id) {
	//alert(image_id+','+user_gallery_id);
	$.ajax({url: WB_URL + "/modules/imagegallery/ajax_usergallery.php?action=deleteFromUserGallery&image_id="+ image_id+"&gallery_id="+ user_gallery_id,
						success: function(data) {
							if(data != '')
								alert(data);
							imagegallery_hideDiv('chooseUserGallery');
							//alert('image_container_' + image_id);
							//$('#image_container_' + image_id).html('');
						}
		});
}

function imagegallery_add2usergallery(image_id,user_gallery_id) {
	$.ajax({url: WB_URL + "/modules/imagegallery/ajax_usergallery.php?action=add2UserGallery&image_id="+ image_id+"&gallery_id="+ user_gallery_id,
						success: function(data) {
							imagegallery_hideDiv('chooseUserGallery');
						}
		});
}


function startImageClick(e) {
		var img_name = $(e.target).parent().attr("id").split('_');
		var image_id = img_name[1];
		var gallery_id = img_name[2];
		$.ajax({url: WB_URL + "/modules/imagegallery/ajax_usergallery.php?action=setStartImage&image_id="+ image_id + '&gallery_id='+gallery_id,
						success: function(data) {
							//alert(data);
							var span = $("#"+data);
							if(span != null) {
								$("#"+data).html('<img style="cursor:pointer;" class="img_starter" title="Bild als Startbild setzen" src="' + WB_URL + '/modules/imagegallery/images/control_play_blue.png">');
								$("#startimage_" + image_id + "_" + gallery_id).html("gesetzt");
								$(".img_starter").click(startImageClick);
							} else {
								alert("something went wrong: " + data);
							}
						}
		});
}








$(document).ready(function() {
	
	$(".img_starter").click(startImageClick);
	
	$(".img_adder").click(function(e){
		
		
		
		var img_name = $(e.target).parent().attr("id").split('_');
		var image_id = img_name[1];
		
		
		
		
		
		var div = $("<div>").html('<span id="loading2"><img src="'+WB_URL+'/modules/imagegallery/images/loading.gif">Loading......</span>');
		var str = '<span id="inhalt"><img src="'+WB_URL+'/modules/imagegallery/images/loading.gif">Loading......</span>';
		
		str += '<center><a href="javascript:imagegallery_hideDiv(\'chooseUserGallery\')"><img src="' + WB_URL + '/modules/imagegallery/images/cancel.png" border="0"> abbrechen</a></center>';
		div.css("border","1px solid green");
		div.css("position", "absolute");
		div.css("left",e.pageX+30+"px");
		div.css("top", e.pageY+"px");
		div.css("text-align", "left");
		div.css("padding-left", "20px");
		div.css("padding-right", "20px");
		div.css("background-color", "white");				
		div.html(str);
		div.attr("id", "chooseUserGallery");
		
		$.ajax({url: WB_URL + "/modules/imagegallery/ajax_usergallery.php?action=listUserGalleries&image_id="+ image_id,
						success: function(data) {
							$("#inhalt").html(data);
						}
		
		});
		
		
		$("body").prepend(div);
		});

});


// http://code.google.com/p/jquery-image-annotate/


/// <reference path="jquery-1.2.6-vsdoc.js" />
(function($) {

		// image annotate functions
    $.fn.annotateImage = function(options) {
        ///	<summary>
        ///		Creates annotations on the given image.
        ///     Images are loaded from the "getUrl" propety passed into the options.
        ///	</summary>
        var opts = $.extend({}, $.fn.annotateImage.defaults, options);
        var image = this;

        this.image = this;
        this.mode = 'view';

        // Assign defaults
        this.getUrl = opts.getUrl;
        this.saveUrl = opts.saveUrl;
        this.deleteUrl = opts.deleteUrl;
        this.editable = opts.editable;
        this.useAjax = opts.useAjax;
        this.notes = opts.notes;
        this.user_id = opts.user_id;
        this.searchUrl = opts.searchUrl;
        this.image_id = opts.image_id;
        this.marked_user_id = opts.marked_user_id;
        this.marked_user_name = opts.marked_user_name;

        // Add the canvas
        this.canvas = $('<div class="image-annotate-canvas"><div class="image-annotate-view"></div><div class="image-annotate-edit"><div class="image-annotate-edit-area"></div></div></div>');
        this.canvas.children('.image-annotate-edit').hide();
        this.canvas.children('.image-annotate-view').hide();
        this.image.after(this.canvas);

        // Give the canvas and the container their size and background
        this.canvas.height(this.height());
        this.canvas.width(this.width());
        this.canvas.css('background-image', 'url("' + this.attr('src') + '")');
        this.canvas.children('.image-annotate-view, .image-annotate-edit').height(this.height());
        this.canvas.children('.image-annotate-view, .image-annotate-edit').width(this.width());

        // Add the behavior: hide/show the notes when hovering the picture
        this.canvas.hover(function() {
            if ($(this).children('.image-annotate-edit').css('display') == 'none') {
                $(this).children('.image-annotate-view').show();
            }
        }, function() {
            $(this).children('.image-annotate-view').hide();
        });

        this.canvas.children('.image-annotate-view').hover(function() {
            $(this).show();
        }, function() {
            $(this).hide();
        });

        // load the notes
        if (this.useAjax) {
            $.fn.annotateImage.ajaxLoad(this);
        } else {
            $.fn.annotateImage.load(this);
        }

        // Add the "Add a note" button
        if ((this.editable) && (this.user_id > 0)) {
            this.button = $('<a class="image-annotate-add" id="image-annotate-add" href="#">Person erkennen und/oder Anmerkung erstellen</a>');
            this.button.click(function() {
                $.fn.annotateImage.add(image);
            });
            this.canvas.after(this.button);
        }

        // Hide the original
        this.hide();

        return this;
    };

    /**
    * Plugin Defaults
    **/
    $.fn.annotateImage.defaults = {
        getUrl: 'your-get.rails',
        saveUrl: 'your-save.rails',
        deleteUrl: 'your-delete.rails',
        editable: true,
        useAjax: true,
        notes: new Array(),
        user_id : 0,
        searchUrl: 'your-get.rails',
        image_id : 0,
        marked_user_id : 0,
        marked_user_name : ''
        
    };

    $.fn.annotateImage.clear = function(image) {
        ///	<summary>
        ///		Clears all existing annotations from the image.
        ///	</summary>    
        for (var i = 0; i < image.notes.length; i++) {
            image.notes[image.notes[i]].destroy();
        }
        image.notes = new Array();
    };

    $.fn.annotateImage.ajaxLoad = function(image) {
        ///	<summary>
        ///		Loads the annotations from the "getUrl" property passed in on the
        ///     options object.
        ///	</summary>
        $.getJSON(image.getUrl + '?ticks=' + $.fn.annotateImage.getTicks() + '&image_id='+ image.image_id + '&user_id=' + image.user_id, function(data) {
            
            image.notes = data;
            $.fn.annotateImage.load(image);
        });
    };

    $.fn.annotateImage.load = function(image) {
        ///	<summary>
        ///		Loads the annotations from the notes property passed in on the
        ///     options object.
        ///	</summary>
        for (var i = 0; i < image.notes.length; i++) {
            image.notes[image.notes[i]] = new $.fn.annotateView(image, image.notes[i]);
        }
    };

    $.fn.annotateImage.getTicks = function() {
        ///	<summary>
        ///		Gets a count og the ticks for the current date.
        ///     This is used to ensure that URLs are always unique and not cached by the browser.
        ///	</summary>        
        var now = new Date();
        return now.getTime();
    };

    $.fn.annotateImage.add = function(image) {
        ///	<summary>
        ///		Adds a note to the image.
        ///	</summary>        
        if (image.mode == 'view') {
            image.mode = 'edit';

            // Create/prepare the editable note elements
            var editable = new $.fn.annotateEdit(image);

            $.fn.annotateImage.createSaveButton(editable, image);
            $.fn.annotateImage.createCancelButton(editable, image);
        }
    };

// ****************************************************************************************************
$.fn.annotateImage.dump = function(arr,level) {                                                    // *
	var dumped_text = "";                                                                          // *
	if(!level) level = 0;                                                                          // *
	
	//The padding given at the beginning of the line.
	var level_padding = "";
	for(var j=0;j<level+1;j++) level_padding += "    ";
	
	if(typeof(arr) == 'object') { //Array/Hashes/Objects 
		for(var item in arr) {
			var value = arr[item];
			
			if(typeof(value) == 'object') { //If it is an array,
				dumped_text += level_padding + "'" + item + "' ...\n";
				dumped_text += $.fn.annotateImage.dump(value,level+1);
			} else {
				dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
			}
		}
	} else { //Stings/Chars/Numbers etc.
		dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
	}
	return dumped_text;
}
// *****************************************************************************


    $.fn.annotateImage.createSaveButton = function(editable, image, note) {
        ///	<summary>
        ///		Creates a Save button on the editable note.
        ///	</summary>
        var ok = $('<a class="image-annotate-edit-ok">OK</a>');

        ok.click(function() {
            var form = $('#image-annotate-edit-form form');
            //var text = $('#image-annotate-text').val();
            var display_name = $('#search').val();
            var annotation = $('#annotation').val();
            //alert(annotation);
            //var user_id = $('#image-annotate-user_id').val();
            //alert(user_id);
            $.fn.annotateImage.appendPosition(form, editable)
            image.mode = 'view';

            // Save via AJAX
            if (image.useAjax) {
		//alert(image.saveUrl);
                $.ajax({
                    url: image.saveUrl,
                    data: form.serialize(),
                    error: function(Request, textStatus, errorThrown) { 
			alert("An error occured saving that note: " + errorThrown) 
		    },
                    success: function(data) {
				      if (data.annotation_id != undefined) {
					     editable.note.id = data.annotation_id;
					     //editable.note.annotation = annotation;
				      }
		    },
                    dataType: "json"
                });
            }

            // Add to canvas
            if (note) {
                //note.resetPosition(editable, text);
                note.resetPosition(editable, display_name, annotation);
                //alert(annotation);
            } else { // new note
                editable.note.editable = true;
                editable.note.annotation = annotation
                //alert(editable);
                note = new $.fn.annotateView(image, editable.note)
                //note.resetPosition(editable, text);
                note.resetPosition(editable, display_name, annotation);
                image.notes.push(editable.note);
            }

            editable.destroy();
        });
        editable.form.append(ok);
    };

    $.fn.annotateImage.createCancelButton = function(editable, image) {
        ///	<summary>
        ///		Creates a Cancel button on the editable note.
        ///	</summary>
        var cancel = $('<a class="image-annotate-edit-close">Cancel</a>');
        cancel.click(function() {
            editable.destroy();
            image.mode = 'view';
        });
        editable.form.append(cancel);
    };

    $.fn.annotateImage.saveAsHtml = function(image, target) {
        var element = $(target);
        var html = "";
        for (var i = 0; i < image.notes.length; i++) {
            html += $.fn.annotateImage.createHiddenField("text_" + i, image.notes[i].text);
            html += $.fn.annotateImage.createHiddenField("top_" + i, image.notes[i].top);
            html += $.fn.annotateImage.createHiddenField("left_" + i, image.notes[i].left);
            html += $.fn.annotateImage.createHiddenField("height_" + i, image.notes[i].height);
            html += $.fn.annotateImage.createHiddenField("width_" + i, image.notes[i].width);
        }
        element.html(html);
    };

    $.fn.annotateImage.createHiddenField = function(name, value) {
        return '&lt;input type="hidden" name="' + name + '" value="' + value + '" /&gt;<br />';
    };

    $.fn.annotateEdit = function(image, note) {
        ///	<summary>
        ///		Defines an editable annotation area.
        ///	</summary>
        this.image = image;

        if (note) {
            this.note = note;
        } else {  // add new note
            var newNote = new Object();
            newNote.id = "new";
            newNote.top = 30;
            newNote.left = 30;  // 
            newNote.width = 30;
            newNote.height = 30;
            //newNote.text = "";
            newNote.marked_user_id = 0;
            newNote.annotation = "";
            this.note = newNote;
        }

        // Set area
        var area = image.canvas.children('.image-annotate-edit').children('.image-annotate-edit-area');
        this.area = area;
        this.area.css('height', this.note.height + 'px');
        this.area.css('width', this.note.width + 'px');
        this.area.css('left', this.note.left + 'px');
        this.area.css('top', this.note.top + 'px');

        // Show the edition canvas and hide the view canvas
        image.canvas.children('.image-annotate-view').hide();
        image.canvas.children('.image-annotate-edit').show();

        // Add the note (which we'll load with the form afterwards)
        // <textarea id="image-annotate-text" name="text" rows="3" cols="30">' + this.note.text + '</textarea>
        var form = $('<div id="image-annotate-edit-form"><form><input type="hidden" name="image_id" id="image_id"><input type="hidden" name="user_id" id="user_id"><input type="hidden" id="marked_user_id" name="marked_user_id"><textarea id="annotation" name="annotation"></textarea>oder Person:&nbsp;<input type="text" id="search" name="search"/></form></div>');
        
        this.form = form;

        $('body').append(this.form);
        var input_search = $('#search');
// *****************************************************************************    
// To find the user_id 
        $("#user_id").val(image.user_id);
        $("#image_id").val(image.image_id);
        
        //alert($.fn.annotateImage.dump(note,3));
        if (note) {
            $("#marked_user_id").val(note.marked_user_id);
            $("#annotation").val(note.annotation);
            input_search.val(note.display_name);
            //alert($.fn.annotateImage.dump(note,3));
        } else { // new note
            if(image.marked_user_name != '') {
                input_search.val(image.marked_user_name);
                //$("#annotation").val(image.annotation);
                //alert(image.marked_user_id);
                $("#marked_user_id").val(image.marked_user_id);
            } else {
                input_search.val('Person suchen');
                $("#marked_user_id").val(0);
            }
        }
        input_search.click(function() {  // clear the search field
            input_search.val('');
            $("#marked_user_id").val(0);
        });
        image.searchUrl
        input_search.autocomplete(image.searchUrl, {
            dataType: 'json',
            parse: function(data) {  // to parse the JSON data
                var parsed = new Array();
                for(var i=0;i<data.length;i++) {
                    parsed[i] = { data:data[i], value: data[i].display_name, result: data[i].display_name};
                }
                return parsed;
            },
            formatItem: function(data,i,max,value,term){
                return value;
            },
            width: 260,
            selectFirst: true,
            minChars: 3,
            autoFill:false
        });
        input_search.result(function(event, data, formatted) {
            //alert(data.marked_user_id);
            $("#marked_user_id").val(data.marked_user_id);
        });
// *****************************************************************************
        this.form.css('left', this.area.offset().left + 'px');
        this.form.css('top', (parseInt(this.area.offset().top) + parseInt(this.area.height()) + 10) + 'px');

        // Set the area as a draggable/resizable element contained in the image canvas.
        // Would be better to use the containment option for resizable but buggy
        area.resizable({
            handles: 'all',

            stop: function(e, ui) {
                form.css('left', area.offset().left + 'px');
                form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 10) + 'px');
            }
        })
        .draggable({
            containment: image.canvas,
            drag: function(e, ui) {
                form.css('left', area.offset().left + 'px');
                form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 10) + 'px');
            },
            stop: function(e, ui) {
                form.css('left', area.offset().left + 'px');
                form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 10) + 'px');
            }
        });
        return this;
    };

    $.fn.annotateEdit.prototype.destroy = function() {
        ///	<summary>
        ///		Destroys an editable annotation area.
        ///	</summary>        
        this.image.canvas.children('.image-annotate-edit').hide();
        this.area.resizable('destroy');
        this.area.draggable('destroy');
        this.area.css('height', '');
        this.area.css('width', '');
        this.area.css('left', '');
        this.area.css('top', '');
        this.form.remove();
    }

    $.fn.annotateView = function(image, note) {
        ///	<summary>
        ///		Defines a annotation area.
        ///	</summary>
        
        
        this.image = image;

        this.note = note;

        this.editable = (note.editable && image.editable);

        // Add the area
        this.area = $('<div class="image-annotate-area' + (this.editable ? ' image-annotate-area-editable' : '') + '"><div></div></div>');
        image.canvas.children('.image-annotate-view').prepend(this.area);
        
        if(note.marked_user_id == 0) {
            note.display_name = '';
        }
        // Add the note
        //alert($.fn.annotateImage.dump(note,3));
        if((note.display_name == '') && (note.annotation != '') ) {
            this.form = $('<div class="image-annotate-note"><span>' + note.annotation + '</span></div>');
            //this.form = $('<div class="image-annotate-note">' + note.display_name + '</div>');
        } else if ((note.display_name != '') && (note.annotation != '') ){
            this.form = $('<div class="image-annotate-note">' + note.display_name + '<br /><span>' + note.annotation + '<span></div>');
        } else {
            this.form = $('<div class="image-annotate-note">' + note.display_name + '</div>');
        }
        this.form.hide();
        image.canvas.children('.image-annotate-view').append(this.form);
        this.form.children('span.actions').hide();

        // Set the position and size of the note
        this.setPosition();

        // Add the behavior: hide/display the note when hovering the area
        var annotation = this;
        this.area.hover(function() {
            annotation.show();
        }, function() {
            annotation.hide();
        });

        // Edit a note feature
        if (this.editable) {
            var form = this;
            this.area.click(function() {
                form.edit();
            });
        }
    };

    $.fn.annotateView.prototype.setPosition = function() {
        ///	<summary>
        ///		Sets the position of an annotation.
        ///	</summary>
        this.area.children('div').height((parseInt(this.note.height) - 2) + 'px');
        this.area.children('div').width((parseInt(this.note.width) - 2) + 'px');
        this.area.css('left', (this.note.left) + 'px');
        this.area.css('top', (this.note.top) + 'px');
        this.form.css('left', (this.note.left) + 'px');
        this.form.css('top', (parseInt(this.note.top) + parseInt(this.note.height) + 7) + 'px');
    };

    $.fn.annotateView.prototype.show = function() {
        ///	<summary>
        ///		Highlights the annotation
        ///	</summary>
        this.form.fadeIn(250);
        if (!this.editable) {
            this.area.addClass('image-annotate-area-hover');
        } else {
            this.area.addClass('image-annotate-area-editable-hover');
        }
    };

    $.fn.annotateView.prototype.hide = function() {
        ///	<summary>
        ///		Removes the highlight from the annotation.
        ///	</summary>      
        this.form.fadeOut(250);
        this.area.removeClass('image-annotate-area-hover');
        this.area.removeClass('image-annotate-area-editable-hover');
    };

    $.fn.annotateView.prototype.destroy = function() {
        ///	<summary>
        ///		Destroys the annotation.
        ///	</summary>      
        this.area.remove();
        this.form.remove();
    }

    $.fn.annotateView.prototype.edit = function() {
        ///	<summary>
        ///		Edits the annotation.
        ///	</summary>      
        if (this.image.mode == 'view') {
            this.image.mode = 'edit';
            var annotation = this;

            //alert($.fn.annotateImage.dump(this.note,3));
            // Create/prepare the editable note elements
            var editable = new $.fn.annotateEdit(this.image, this.note);

            $.fn.annotateImage.createSaveButton(editable, this.image, annotation);

            // Add the delete button
            var del = $('<a class="image-annotate-edit-delete">Delete</a>');
            del.click(function() {
                var form = $('#image-annotate-edit-form form');

                $.fn.annotateImage.appendPosition(form, editable)

                if (annotation.image.useAjax) {
                    $.ajax({
                        url: annotation.image.deleteUrl,
                        data: form.serialize(),
                        error: function(e) { alert("An error occured deleting that note.") }
                    });
                }

                annotation.image.mode = 'view';
                editable.destroy();
                annotation.destroy();
            });
            editable.form.append(del);

            $.fn.annotateImage.createCancelButton(editable, this.image);
        }
    };

    $.fn.annotateImage.appendPosition = function(form, editable) {
        ///	<summary>
        ///		Appends the annotations coordinates to the given form that is posted to the server.
        ///	</summary>
        var areaFields = $('<input type="hidden" value="' + editable.area.height() + '" name="height"/>' +
                           '<input type="hidden" value="' + editable.area.width() + '" name="width"/>' +
                           '<input type="hidden" value="' + editable.area.position().top + '" name="top"/>' +
                           '<input type="hidden" value="' + editable.area.position().left + '" name="left"/>' +
                           '<input type="hidden" value="' + editable.note.id + '" name="id"/>');
        form.append(areaFields);
    }

    $.fn.annotateView.prototype.resetPosition = function(editable, display_name, annotation) {
        ///	<summary>
        ///		Sets the position of an annotation.
        ///	</summary>

        if(display_name == 'Person suchen') {
            display_name = '';
        }
        
        if((display_name == '') &&(annotation != '' )) {
            this.form.html('<span>'+annotation+'</span>');
        } else if((display_name != '') && (annotation != '')) {
            this.form.html(display_name + '<br /><span>' + annotation + '<span>');
        } else {
            this.form.html(display_name);
        }
        
        
        this.form.hide();

        // Resize
        this.area.children('div').height(editable.area.height() + 'px');
        this.area.children('div').width((editable.area.width() - 2) + 'px');
        this.area.css('left', (editable.area.position().left) + 'px');
        this.area.css('top', (editable.area.position().top) + 'px');
        this.form.css('left', (editable.area.position().left) + 'px');
        this.form.css('top', (parseInt(editable.area.position().top) + parseInt(editable.area.height()) + 7) + 'px');

        // Save new position to note
        this.note.top = editable.area.position().top;
        this.note.left = editable.area.position().left;
        this.note.height = editable.area.height();
        this.note.width = editable.area.width();
        this.note.display_name = display_name;
        this.note.annotation = annotation;
        this.note.id = editable.note.id;
        this.editable = true;
    };

})(jQuery);