// pictureviewer javascript

// PictureViewerModel
function PictureViewerModel(div, configUrl, pictureRoot, settings)
{
    this.mainPane = div;
    this.configUrl = configUrl;
    this.pictureRoot = pictureRoot; // optional
    this.currPic = 0;
    this.picList = new Array();
    
    if (!settings)
    {
        settings = new Object();
    }
    if (!settings.imageWidth) settings.imageWidth = "400px";
    if (!settings.imageHeight) settings.imageHeight = "300px";
    
    
    //if (!settings.backgroundColor) settings.backgroundColor = "Transparent";
    // settings.controlWidth = "560px";
    // settings.controlHeight = "380px";
    
    this.settings = settings;
}

PictureViewerModel.prototype.Build = function()
{
    var self = this; //closure
    
    // Add the DOM elements
    if (self.mainPane)
    {
        this.BuildPVUI();
    }

    // Fire xml request to server asynchronously
    var completionFunc = function (ajax) { self.PVProcessResponse(ajax) };
    var handler = function () { self.OnLeftButtonClick() };
    self.pvleftButton.onclick = handler;
    handler = function () { self.OnRightButtonClick() };
    self.pvrightButton.onclick = handler;
    self.xRequest = new AJAXRequest("GET", self.configUrl, null, completionFunc);
}

PictureViewerModel.prototype.OnLeftButtonClick = function()
{
    logger("left button click");
    if (this.picList && this.picList.length>0)
    {
        if (--this.currPic < 0) this.currPic = this.picList.length-1;
        this.OnPictureSelectionChanged();
    }
}

PictureViewerModel.prototype.OnRightButtonClick = function()
{
    logger("right button click");
    if (this.picList && this.picList.length>0)
    {
        if (++this.currPic >= this.picList.length) this.currPic = 0;
        this.OnPictureSelectionChanged();
    }
}

PictureViewerModel.prototype.OnPictureSelectionChanged = function()
{
    if (this.picList && this.picList.length>0)
    {
        if (this.currPic<0 || this.currPic >= this.picList.length)
        {
            assert(false, "Invalid Index");
            currPic = 0;
        }
        logger("currPic="+this.currPic);
        
        var picture=this.picList[this.currPic];
        url = this.GetPictureUrl(picture);
        logger("current="+this.pvpicturePane.src);
        logger("new="+url);
        this.pvpicturePane.src=url;
        this.pvcaption.innerText=picture.caption;
        this.pvdatecaption.innerText=picture.date;
        this.pvdescription.innerHTML=picture.description;
    }
}

PictureViewerModel.prototype.GetPictureUrl = function(picture)
{
    if (this.pictureRoot)
        return this.pictureRoot+"/"+picture.url;
    else
        return picture.url;
}

// ReadyState handler for the XmlHttpRequest for PictureViewer
PictureViewerModel.prototype.PVProcessResponse = function(ajax)
{
    if (ajax.readyState == 4)
    {
        if (ajax.status == 200)
        {
            logger('AJAXRequest is complete: ' + ajax.readyState + "/" + ajax.status + "/" + ajax.statusText);
            if ( ajax.responseText )
            {
		        logger(ajax.responseText);
                this.PVProcessXMLResponse(ajax.responseXML)
		    }
    	}
    }
}

PictureViewerModel.prototype.PVProcessXMLResponse = function(xml)
{
    if (xml.documentElement)
    {
        var pictures = xml.documentElement.getElementsByTagName("picture");
        if (pictures.length <=0)
        {
            logger("no pictures returned in XML");
        }
        else
        {
            for (var i=0; i<pictures.length; i++)
            {
                var picXml = pictures[i];
                
                var description = "<p>" + getInnerXml(picXml) + "</p>";
                var id = attrValue(picXml, "id");
                var url = attrValue(picXml, "url");
                var caption = attrValue(picXml, "caption");
                var date = attrValue(picXml, "date");
                
                var picture = new PictureModel(id, url, caption, date, description);
                this.picList.push(picture);
                if (i==0) this.OnPictureSelectionChanged(); // show initial picture immediately
                logger("id="+id+" url="+url+" caption="+caption+" date="+date+" description="+description);
            }
            
        }           
    }
}

// render picture viewer UI
PictureViewerModel.prototype.BuildPVUI = function()
{
    // assumes px unit
    var widthPx=parseInt(this.settings.imageWidth);
    var heightPx=parseInt(this.settings.imageHeight);
    assert(!isNaN(widthPx) && !isNaN(heightPx));
    var controlWidth = this.settings.controlWidth ? this.settings.controlWidth :
        (widthPx + 40*2 + 4*10).toString()+"px";
    var controlHeight = this.settings.controlHeight ? this.settings.controlHeight :
        (heightPx + 50 + 100).toString()+"px";

    // main control pane
    this.mainPane.className="pvmainPain";
    logger("controlWidth="+controlWidth+" controlHeight="+controlHeight);
    this.mainPane.style.height=controlHeight;
    this.mainPane.style.width=controlWidth;
    if (this.settings.backgroundColor) this.mainPane.style.backgroundColor=this.settings.backgroundColor;

    // caption           
    var div = document.createElement("div");
    div.className="pvcaption";
    div.style.width=this.settings.imageWidth;
    this.mainPane.appendChild(div);
    this.pvcaption=div;
    
    // date caption
    div = document.createElement("div");
    div.className="pvdatecaption";
    div.style.width=this.settings.imageWidth;    
    this.mainPane.appendChild(div);
    this.pvdatecaption=div;

    // main picture pane
    var img = document.createElement("img");
    img.className="pvpicturePane";
    img.src="MyControlLib/pvloading.gif";
    img.style.width=this.settings.imageWidth;
    img.style.height=this.settings.imageHeight;
    this.mainPane.appendChild(img);
    this.pvpicturePane=img; 
    
    // description pane
    div = document.createElement("div");
    div.className="pvdescription";
    div.style.width=this.settings.imageWidth;    
    this.mainPane.appendChild(div);
    this.pvdescription=div;
    
    div = document.createElement("span");
    div.className="pvcontrolButton pvleftButton";
    div.title="previous";
    this.mainPane.appendChild(div);
    this.pvleftButton=div;
    
    div = document.createElement("span");
    div.className="pvcontrolButton pvrightButton";
    div.title="next";
    this.mainPane.appendChild(div);
    this.pvrightButton=div;
}


// PictureModel class
function PictureModel(id, url, caption, date, description)
{
    this.id = id;
    this.url = url;
    this.caption = caption
    this.date = date;
    this.description = description
}