/// <reference path="jquery.js" />
/// <xreference path="ww.jquery.js" />
/// <xreference path="wweditable.js" />

var msgTimeout = 5000;

$(document).ready(function() {
    if (serverVars.adminMode) {
        MakeListEditable();

        var status = "Click on caption to edit text. Drag image to sort list..."

        // *** create a status bar dynamically
        showStatus({ showCloseButton: true,
            additive: false,
            afterTimeoutText: status
        });
        showStatus(status);                                       
    }
});
function MakeListEditable() {
    var list = $("#ulThumbnailList");    
    list.sortable(
        {  
           opacity: 0.7, 
           revert: true, 
           scroll: true ,
           handle: $(".imagecontainer")
           //.add(".imagecontainer a img")
        });                                      

    $(".photolistitem div[id$=Notes]")
           .makeEditable({ textMode: "multiline", 
                           editMode: "html",
                             editClass: "captionedit", 
                             updatedColor: "green",
                             editMode: "text" } )               
           .css("opacity",0.8)
           .addClass("captiondisplay"); // required to force IE 6/7 to see an explicit background color          
    
    
    $("#lblTitle").makeEditable( {  editClass: "captionedit", updatedColor: "lightgreen" });
    $("#lblDescription").makeEditable({ textMode: "multiline", 
                                        editClass: "captionedit", 
                                        updatedColor: "lightgreen", 
                                        editMode: "formatted" } );  
    $(".photolistitem").hover( 
        function(e) { 
            $(this).find(".deletethumbnail")
                   .show()
                   .bind("click",DeletePhoto);                   
        },
        function(e) {
            $(this).find(".deletethumbnail")
                   .hide()
                   .unbind("click",DeletePhoto);        
        }    
    );
                                                                                          
}
function SavePhotos()
{
    var items = $(".photolistitem");
    var photos = [];
    
    for(var x=0; x<items.length; x++)
    {
        var photo = {}
        photo.id = items[x].id;                
        photo.notes = textFromHtml( $(items[x]).find("div[id$=Notes]").html(),true);                
        photos.push(photo);
    }
    
    var photoList = {};
    photoList.Photos = photos;
    photoList.Title = $("#lblTitle").text();    
    photoList.Description = textFromHtml( $("#lblDescription").html(),true);
        
    // *** Page JSON wrapper    
    httpJson("SaveList",photoList,
             function(result) { 
                showStatus("Changes have been saved...",msgTimeout); 
             },
             pageError);
       
    return photos;
}    

function DeletePhoto(e)
{
    var jItem = $(this).parent();
    var file = jItem.find("img[title]").attr("title");
    var notes = jItem.find("div[id$=Notes]").text();
    
    if (!confirm(String.format("Are you sure you want to delete\n{0}?\n\n{1}",file,notes)))
        return;
    
    httpJson("DeletePhoto",
             file,
             function() {
                jItem.remove();
                showStatus("Photo has been removed",msgTimeout);
             },
             pageError 
            );
}

var progressActive = false;
function ShowImagePopup(hashCode,nextHash,prevHash)
{             
    // Get the actually <img> display 
    var jImageDisplay = $("#imgImage");    
    
    // stop animations and make invisible until ready to show
    jImageDisplay.stop().hide();
   
    // *** The container that holds the image
    var jImageContainer = $("#ImageContainer");

    // *** Thumbnail notes and main image caption fields
    var jNotes = $("#" + hashCode + "Notes");
    var jMsg = $("#lblImageMessage");
    
    // *** Progress bar                    
    var jProgress = $("#imgProgress");    
    
    // *** 'hide' container but keep visible
    jImageContainer.css("opacity",0.01);
    
    // *** Show progress icon but only after 200 ms               
    progressActive = true;
    setTimeout( function() {
        if (progressActive)
            jProgress
                    .attr("src", jProgress.attr("src")) // reassign for ie.
                    .css("zIndex",400)
                    .show()
                    .centerInClient();            
       }, 200);

     // show image as modal dialog
     jImageContainer.modalDialog({ backgroundOpacity: .65, 
                                   overlayId: "OpaqueOverlay",
                                   zIndex: 100 });       
                                     
    // allow clearing of modal by clicking on background
    $("#OpaqueOverlay").click( ClearImagePopup );

    
    // assign the main image based on thumbnail name (strip tb_ off)
    var jImg = $("#" + hashCode + "Img");
    var imgUrl = jImg.attr("src").replace("tb_","");
    jImageDisplay.attr("src",imgUrl);
    
    // set the the note text
    jMsg.text(jNotes.text());        
    
    // Clear the image size empty initially wait for load to resize
    jImageDisplay.css({ width: "auto", height: "auto" });    
        
    // *** Wait for image to load before updating display
    jImageDisplay.bind("load", function() {
        $(this).unbind("load");

        progressActive = false;
        jProgress.hide();

        // *** Must make the image container visible first
        var ctl = $("#ImageContainer");
        ctl.show();

        // Must make image visible in order for display to update properly        
        jImageDisplay.show();

        // get image dimensions
        var ht = this.height;
        var wd = this.width;
        var wht = $(window).height() - 120;

        if (ht > wht) {
            // too big to display make window sized
            jImageDisplay.css("height", wht);

            var newwd = (wht / ht * wd); // apply ratio            
            jImageDisplay.width(newwd);

            //  set the width                
            jMsg.width(newwd - 20);
        }
        else
            jMsg.width(wd - 20);

        // Explicitly size image header so IE works
        if ($.browser.msie)
            $("#OverlayImageHeader").width(this.width + 8);

        if (nextHash) {
            $("#WindowNavNext")
                .show()
                .click(function() {
                        httpJson("GetNextPrevPhoto", nextHash, function(photo) {
                            $("#WindowNavNext").unbind("click");
                            ShowImagePopup(nextHash, photo.Next, photo.Prev);
                            return false;
                        }, null, true);
                });            
        }
        else
            $("#WindowNavNext").hide().unbind("click");

        if (prevHash) {
            $("#WindowNavPrev")
                .show()
                .click(function(e) {
                        $("#WindowNavPrev").unbind("click");
                        httpJson("GetNextPrevPhoto", prevHash, function(photo) {
                        ShowImagePopup(prevHash, photo.Next, photo.Prev);
                        return false;
                    }, 100);
                });
        }
        else
            $("#WindowNavPrev").hide().unbind("click");

        ctl.centerInClient();

        // *** Reset opacity and fade in                
        jImageContainer.css("opacity", 1).hide().fadeIn("slow");
    });    
}
function ClearImagePopup() {
    $("#imgProgress").hide();
    $("#ImageContainer").fadeOut("fast", function() {
        // *** Clear image and text so there's 
        //     no sizing issue on next view
        $("#imgImage").attr("src", "");
        $("#lblImageMessage").text("");
        $(this).modalDialog("hide");
    });

}

function SlideShowPlayer() 
{
    var _I = this;
	
    this.photos = []
	this.delay = 5000;
	this.imageHeight = 400;
    
	var curIndex = 0;
    var playing = false;
	var cancelPending = false;
	
    this.load  = function()
    {
        _I.photos = [];
		var photos = _I.photos;

        // *** Load the photos into an array
        $(".photolistitem").each( function() {        
            var ji = $(this);
            var photo = {};
            var jimg = ji.find("img");
            if (jimg.length < 1)
                return;
            
            photo.filename = ji.find("img").attr("title");
            photo.notes = ji.find("div[id$=Notes]").text(); 
            photos.push(photo);
        });
        
    }
    this.showPicture = function(index) {
        var jimg = $("#imgSlideShowImage");
        var jbox = $("#divSlideShow").css("zIndex", 300);

        jbox.fadeOut("slow", function() {
            $("#divImageCaption").text(_I.photos[index].notes);
            jimg
	            .attr("src", _I.photos[index].filename)
				.one("load", function() {
				    jbox.centerInClient();
				    if (playing)
				        _I.nextPicture();
				    jbox.hide().fadeIn("slow");
				});
            if (_I.imageHeight && _I.imageHeight > 0)
                jimg.height(_I.imageHeight);
        });
    }
	this.start = function() {
	    opaqueOverlay({ opacity: .65, zIndex: 100 });
	    _I.load();
	    _I.restart();
	}
	this.restart = function(next)
	{
	    if (playing)
	        return;		
		if (next)
		{
		    curIndex++;
		    if (curIndex > _I.photos.length) curIndex=0;
		}
		playing = true;
		cancelPending = false;
        _I.showPicture(curIndex);
	}
	this.stop = function()
	{
		playing = false;
		cancelPending = true;
	}	
	this.nextPicture = function()
	{
		if (playing)
		{			
			setTimeout( function() 
			              { if (cancelPending || !playing) { 
							    cancelPending = false; 
							    return; 
						    }
    					    curIndex++;
                            if (curIndex >= _I.photos.length)
	                            curIndex = 0;
                            var dispIndex = curIndex;
	 				        _I.showPicture(dispIndex ) 
	 				     }, _I.delay);			
		}
	}
	this.next = function()
	{
		_I.stop();
		curIndex++;
		if (curIndex > _I.photos.length -1)
			curIndex = 0;
		cancelPending = true;
		_I.showPicture(curIndex);		
	}
	this.prev = function()
	{
		_I.stop();		
		curIndex--;
		if (curIndex < 0) 
		   curIndex = _I.photos.length-1;
		cancelPending = true;
		_I.showPicture(curIndex);
	}
	this.hide = function()
	{
		$("#divSlideShow").hide();
		opaqueOverlay("hide");
	}	
	this.exit = function()
	{
		cancelPending = true;
		playing = false;
		_I.hide();
	}
	
}
// *** static instance
var player = new SlideShowPlayer();
player.imageHeight = 450;

function Log(message)
{
    var text = $("#message").html(); 
    $("#message").html(text + message);
}
function UploadWindows(FtpSite,LocalSite) 
{
  var Win = window.open(FtpSite,"","Top=0,Left=0,width=400,height=600,resizable=yes,menubar=yes,location=yes");
  if (Win == null)
    return;
    
  if (LocalSite != null && LocalSite != "")
    window.open(LocalSite,"","Top=0,Left=410,width=400,height=600,resizable=yes,titlebar=yes,menubar=yes,location=yes")
}
function showAdminDialog()
{    
    AdminDialog.show();
}
function pageError(xhr,status)
{
    var msg = xhr.responseText;
    if (status == "timeout")
       msg = "Request timed out."    
    showStatus(msg,5000,true);
}
// *** Ajax Wrapper that simplifies callbacks with JSON parameters
function httpJson(method,data,success,error,isNotAdmin)
{
    var json = JSON.stringify(data);
    $.ajax( { 
            url: serverVars.pageName + "?Callback=" + method + (isNotAdmin ? "" : "&Admin=true;"),
            data: json,
            type: "POST",
            contentType: "application/json",
            timeout: 10000,
            success: success,
            error: error 
          } );    
}           
function textFromHtml(html,fixCR)
{
    if (fixCR)
        html = html.replace(/<br.*?>/g,"#CR#");   

    html = $("<div>" + html + "</div>").text();
    
    if (fixCR)
        html = html.replace(/#CR#/g,"\r\n");
    return html;
}
function htmlFromText(text,fixCR)
{
    return text.replace(/[\n]/ig,"<br/>");
}