/// <reference name="MicrosoftAjax.js"/>
/// <reference path = "Mochikit/MochiKit.js/>
/// <reference path = "Mochikit/Base.js/>
/// <reference path = "Mochikit/Dom.js/>
/// <reference path = "Mochikit/Style.js/>
/// <reference path = "Mochikit/Signal.js/>
/// <reference path = "Mochikit/Visual.js/>
/// <reference path = "Mochikit/Logging.js/>
/// <reference path = "Mochikit/LoggingPane.js/>

Type.registerNamespace("SardiniaYogaWeb");

SardiniaYogaWeb.ThumbNailViewer = function() {
    //createLoggingPane();
    this._mainDiv = DIV({ id: "sy-tnviewer" + "1", "width": "100%" }); //autoincrement
    this._pictureDiv = DIV({ id: "sy-tnviewer-mainpic" + "1", "width": "100%" }); //autoincrement
    this._backgroundDiv = DIV({ id: "sy-tnviewer-backpic" + "1", "width": "100%" }); //autoincrement
    this._mainImage = IMG({ src: "Gifs/UseOtherParty.gif" });
    appendChildNodes(this._pictureDiv, this._backgroundDiv);
    appendChildNodes(this._backgroundDiv, this._mainImage);
    this._descriptionDiv = DIV({ id: "sy-tnviewer-description" + "1", "width": "100%" }); //autoincrement
    this._descriptionLabel = LABEL(" "); //autoincrement
    appendChildNodes(this._descriptionDiv, this._descriptionLabel);
    this._descriptionLabel.id = "descriptionLabel";
    this._thumbnailDiv = DIV({ id: "sy-tnviewer-thumbnail" + "1", "width": "100%" }); //autoincrement

    appendChildNodes(this._mainDiv, this._pictureDiv);
    appendChildNodes(this._mainDiv, this._descriptionDiv);
    appendChildNodes(this._mainDiv, this._thumbnailDiv);
    this._descriptions = [];
    addElementClass(this._mainDiv, "thumbnailviewer-maindiv");
    addElementClass(this._pictureDiv, "thumbnailviewer-picturediv");
    addElementClass(this._backgroundDiv, "thumbnailviewer-background-div");
    addElementClass(this._mainImage, "thumbnailviewer-mainimage");
    addElementClass(this._descriptionDiv, "thumbnailviewer-descdiv");
    addElementClass(this._thumbnailDiv, "thumbnailviewer-thumbnaildiv");
    this._descriptions = new Array();

}

SardiniaYogaWeb.ThumbNailViewer.prototype = {
    initialize: function() {
        this._selectedPicture = -1;
        this._numOfPictures = 0;
    },

    dispose: function() {
        //Add custom dispose actions here
        SardiniaYogaWeb.ThumbNailViewer.callBaseMethod(this, 'dispose');
    },
    displayPictures: function(pictures) {
        this.offset = 10;
        this._backgroundImage = IMG({ src: "Pictures/PictureBackground.jpg" });
        appendChildNodes(this._backgroundDiv, this._backgroundImage);
        addElementClass(this._backgroundImage, "thumbnailviewer-backImage");
        var picDimensions = getElementDimensions(this._pictureDiv);
        this._pictureWidth = picDimensions.w;
        this._pictureHeight = picDimensions.h;
        if (pictures.length <= 0)
            return;
        this._descriptionLabel.innerText = "";
        this._thumbnailDiv.innerText = "";
        this._descriptions = [];
        var widthRatio = 1;
        var heightRatio = 1;
        var ratio = 1;
        var adjWidth = 1;
        var adjHeight = 1;

        for (var y = 0; y < pictures.length; y++) {
            widthRatio = (this._pictureWidth - (this.offset * 2)) / pictures[y].Width;
            heightRatio = (this._pictureHeight - (this.offset * 2)) / pictures[y].Height;
            if (widthRatio > heightRatio)
                ratio = heightRatio;
            else
                ratio = widthRatio;
            adjWidth = pictures[y].Width * ratio;
            adjHeight = pictures[y].Height * ratio;
            Array.add(this._descriptions, [pictures[y].FullPath, adjWidth,
            adjHeight, ((this._pictureWidth - adjWidth - (this.offset * 2)) / 2), ((this._pictureHeight - adjHeight - (this.offset * 2)) / 2), pictures[y].Description]);
            image = IMG({ src: pictures[y].FullPath });
            image.id = "pic_" + y.toString();
            image.src = pictures[y].FullPath;
            image.longdesc = pictures[y].Description;
            connect(image, "onmouseover", this, this.imageRollover);
            addElementClass(image, "thumbnailviewer-thumbnail");
            appendChildNodes(this._thumbnailDiv, image);
        }
        this.displayPicture(0);
    },
    displayPicture: function(index) {
        this._mainImage.src = this._descriptions[index][0];
        ($("descriptionLabel")).innerText = this._descriptions[index][5];
        ($("descriptionLabel")).textContent = this._descriptions[index][5];
        var mainImagedim = new Dimensions(this._descriptions[index][1],
        this._descriptions[index][2]);
        setElementDimensions(this._mainImage, mainImagedim);
        var hortOffset = 10 - (((this._descriptions[index][1] + (this.offset * 2)) / 476) * this.offset);
        var backImageDim = new Dimensions(mainImagedim.w + (this.offset * 2)-(hortOffset*2),
        mainImagedim.h + (this.offset * 2));
        setElementDimensions(this._backgroundImage, backImageDim);
        var imageCoords = new Coordinates(
        ((this._pictureWidth - (this._descriptions[index][1])) / 2),
        (this._pictureHeight - (this._descriptions[index][2])) / 2);
        setElementPosition(this._mainImage, imageCoords);
        var backImageCoords = new Coordinates((imageCoords.x-this.offset+hortOffset),
        (this._pictureHeight - backImageDim.h) / 2);
        setElementPosition(this._backgroundImage, backImageCoords);
        appear(this._backgroundDiv);
    },
    imageRollover: function(event) {
        if (this._mainImage.src != event._src.src) {
            var i = 0;
            var notFound = true;
            while ((i < this._descriptions.length) && (notFound)) {
                if (event._src.src.indexOf(this._descriptions[i][0]) >= 0) {
                    notFound = false;
                }
                i++;
            }
            if (!(notFound)) {
                if (this.selectedThumbnailId) {
                    addElementClass(this.selectedThumbnailId, "thumbnailviewer-thumbnail");
                    removeElementClass(this.selectedThumbnailId, "selected-thumbnail");

                }
                this.selectedThumbnailId = event._src.id;
                addElementClass(this.selectedThumbnailId, "selected-thumbnail");
                removeElementClass(this.selectedThumbnailId, "thumbnailviewer-thumbnail");
                this.displayPicture(i - 1);
            }
        }
    },
    stylizePicture: function() {
        while (!this._mainImage.complete);
        var dim = getElementDimensions(this._pictureDiv);
        var picdim = getElementDimensions(this._mainImage);
        var xfactor = dim.w / picdim.w;
        var yfactor = dim.h / picdim.h;
        var thefactor = 1;
        if (xfactor > yfactor)
            thefactor = yfactor;
        else
            thefactor = xfactor;
        this._mainImage.style.width = picdim.w * thefactor;
        this._mainImage.style.height = picdim.h * thefactor;
        picdim = getElementDimensions(this._mainImage);
        this._mainImage.style.left = ((dim.w - picdim.w) / 2);
        this._mainImage.style.top = ((dim.h - picdim.h) / 2);
    }
}
SardiniaYogaWeb.ThumbNailViewer.registerClass('SardiniaYogaWeb.ThumbNailViewer', Sys.UI.Control);


SardiniaYogaWeb.TeacherStrip = function() {
    //createLoggingPane();
    this._mainDiv = DIV({ id: "sy-teacherstrip" + "1", "width": "100%" }); //autoincrement
}

SardiniaYogaWeb.TeacherStrip.prototype = {
    initialize: function() {
        //SardiniaYogaWeb.ThumbNailViewer.callBaseMethod(this, 'initialize');
        //addElementClass(this._mainDiv, "teacherstrip-picture");
    },

    dispose: function() {
        //Add custom dispose actions here
        SardiniaYogaWeb.TeacherStrip.callBaseMethod(this, 'dispose');
    },
    displayTeachers: function(teachers) {
        if (teachers.length <= 0)
            return;
        addElementClass(this._mainDiv, "teacherstrip-maindiv");

        for (var y = 0; y < teachers.length; y++) {
            var div = DIV({ id: "sy-teacherstrip-teacher" + y }); //autoincrement
            div.id = "sy-teacherstrip-teacher" + y;
            appendChildNodes(this._mainDiv, div);
            addElementClass(div, "teacherstrip-teacherdiv");
            image = IMG({ src: teachers[y].TeacherPictures[0].PicturePath + teachers[y].TeacherPictures[0].FileName });
            image.longDesc = "teacherpic_" + y.toString();
            image.title = "Click to bring my profile to the top of the page";
            connect(image, "onclick", this, this.teacherClick);
            addElementClass(image, "teacherstrip-picture");
            appendChildNodes(div, image);
            appendChildNodes(div, BR());
            appendChildNodes(div, LABEL(teachers[y].FullName));
        }
    },
    teacherClick: function(event) {
        var s = event._src.longDesc.indexOf("_")
        signal(this, "TeacherFocussed", event._src.src);
    }
}

SardiniaYogaWeb.TeacherStrip.registerClass('SardiniaYogaWeb.TeacherStrip', Sys.UI.Control);

SardiniaYogaWeb.TeacherDetails = function(name, mainImage, description, url, centers,
pictures, dates) {
    this._name = name;
    this._mainImage = mainImage;
    this._description = description;
    this._url = url;
    this._centers = centers;
    this.pictures = pictures;
    this._dates = dates;
}

SardiniaYogaWeb.TeacherDetails.prototype = {
    getName: function() { return this._name; },
    setName: function(value) { this._name = value; },
    getMainImage: function() { return this._mainImage; },
    setMainImage: function(value) { this._mainImage = value; },
    getDescription: function() { return this._description; },
    setDescription: function(value) { this._description = value; },
    getUrl: function() { return this._url; },
    setUrl: function(value) { this._url = value; },
    getCentreByIndex: function(i) {
        return this._centers[i];
    },
    setCentreByIndex: function(i, value) {
        this._centers[i] = value;
    },
    getPictureByIndex: function(i) {
        return this.pictures[i];
    },
    setPictureByIndex: function(i, value) {
        this.pictures[i] = value;
    },
    getDateByIndex: function(i) {
        return this._dates[i];
    },
    setDateByIndex: function(i, value) {
        this._dates[i] = value;
    }
}

SardiniaYogaWeb.TeacherDetails.registerClass('SardiniaYogaWeb.TeacherDetails');

SardiniaYogaWeb.TeacherDiv = function(teacherDetails) {
    this.teacherDetails = teacherDetails;
    this._mainDiv = DIV({ id: "sy-teacherDiv" + "1", "width": "100%" }); //autoincrement
    this._holderDiv = DIV({ id: "sy-holderDiv" + "1", "width": "20%" }); //autoincrement
    appendChildNodes(this._mainDiv, this._holderDiv);
    if (teacherDetails.TeacherPictures.length >= 1) {
        this._mainImage = IMG({ src: teacherDetails.TeacherPictures[0].PicturePath + teacherDetails.TeacherPictures[0].FileName });
    }
    appendChildNodes(this._holderDiv, this._mainImage);
    appendChildNodes(this._holderDiv, BR());

    appendChildNodes(this._holderDiv, LABEL(teacherDetails.TeacherPictures[0].Description));
    this._descriptionDiv = DIV({ id: "sy-teacherDiv-description" + "1", "width": "100%" }); //autoincrement
    appendChildNodes(this._descriptionDiv, LABEL(teacherDetails.Description));

    this._datesDiv = DIV({ id: "sy-teacherDiv-dates" + "1", "width": "100%" }); //autoincrement
    appendChildNodes(this._datesDiv, LABEL("Teaching Dates: "));

    for (var y = 0; y < (teacherDetails.TeachingDates).length; y++) {
        var lbl = null;
	var difference = 0;
        if (y > 0) {
            lbl = LABEL(", " + teacherDetails.TeachingDates[y]);
        }
        else {
            lbl = LABEL(teacherDetails.TeachingDates[y]);
        }
        //connect(lbl, "ondblclick", this, this.dateDblClick);

	appendChildNodes(this._datesDiv, lbl);

	 
        //appendChildNodes(this._datesDiv, BR());
    }
    appendChildNodes(this._mainDiv, this._datesDiv);

    if (teacherDetails.Url != "") {
        var urlLabel = LABEL("   You can read more at ");
        var webUrl = A(teacherDetails.Url);
        webUrl.href = "http://" + teacherDetails.Url;
        webUrl.target = "_blank";
        //{ href: teacherDetails.Url, target: "_blank" });
        appendChildNodes(this._descriptionDiv, urlLabel);
        appendChildNodes(this._descriptionDiv, webUrl);
    }
    appendChildNodes(this._mainDiv, this._descriptionDiv);
    /*
    this._urlDiv = DIV({ id: "sy-teacherDiv-url" + "1", "width": "100%" }); //autoincrement
    appendChildNodes(this._urlDiv, LABEL("Website: " + teacherDetails.Url));
    connect(this._urlDiv, "ondblclick", this, this.displayWebsite);
    appendChildNodes(this._mainDiv, this._urlDiv);
   
    this._centersDiv = DIV({ id: "sy-teacherDiv-centers" + "1", "width": "100%" }); //autoincrement
    this._thumbnailDiv = DIV({ id: "sy-teacherDiv-tnv" + "1", "width": "100%" }); //autoincrement
    for (var y = 0; y < (teacherDetails.TeacherPictures).length; y++) {
    image = IMG({ src: teacherDetails.TeacherPictures[y].PicturePath + teacherDetails.TeacherPictures[y].FileName });
    image.Id = "pic_" + y.toString();
    image.src = teacherDetails.TeacherPictures[y].PicturePath + teacherDetails.TeacherPictures[y].FileName;
    //this._images[y] = image;
    connect(image, "onmouseover", this, this.imageRollover);
    addElementClass(image, "thumbnailviewer-thumbnail");
    appendChildNodes(this._thumbnailDiv, image);
    }
    this._datesDiv = DIV({ id: "sy-teacherDiv-dates" + "1", "width": "100%" }); //autoincrement
    appendChildNodes(this._datesDiv, STRONG("Teaching Dates"));
    appendChildNodes(this._datesDiv, BR());

    for (var y = 0; y < (teacherDetails.TeachingDates).length; y++) {
    var lbl = LABEL(teacherDetails.TeachingDates[y]);
    connect(lbl, "ondblclick", this, this.dateDblClick);

        appendChildNodes(this._datesDiv, lbl);
    appendChildNodes(this._datesDiv, BR());
    }
    appendChildNodes(this._mainDiv, this._datesDiv);
    //  appendChildNodes(this._mainDiv, this._centersDiv);
    //appendChildNodes(this._mainDiv, this._thumbnailDiv);
    */

    addElementClass(this._mainDiv, "teacherDiv-maindiv");
    addElementClass(this._holderDiv, "teacherDiv-holderdiv");
    if (this._mainImage != null) {
        addElementClass(this._mainImage, "teacherDiv-mainimage");
    }
    addElementClass(this._descriptionDiv, "teacherDiv-descdiv");
    //addElementClass(this._urlDiv, "teacherDiv-url");
    //addElementClass(this._centersDiv, "teacherDiv-centers");
    //addElementClass(this._thumbnailDiv, "teacherDiv-thumbnaildiv");
    // addElementClass(this._datesDiv, "teacherDiv-datesdiv");
}


SardiniaYogaWeb.TeacherDiv.prototype = {
    initialize: function() {
        SardiniaYogaWeb.TeacherDiv.callBaseMethod(this, 'initialize');
        this._selectedPicture = -1;
        this._numOfPictures = 0;
    },
    displayWebsite: function() {
        if (this.teacherDetails.Url)
            window.open("http://" + this.teacherDetails.Url);
    }
    ,
    dateDblClick: function() {
        alert("date clicked");
    }
    ,
    dispose: function() {
        //Add custom dispose actions here
        SardiniaYogaWeb.TeacherDiv.callBaseMethod(this, 'dispose');
    },
    displayPictures: function(pictures) {
        if (pictures.length <= 0)
            return;
        for (var y = 0; y < pictures.length; y++) {
            image = IMG({ src: pictures[y][0] });
            image.Id = "pic_" + y.toString();
            image.src = pictures[y][0];
            //this._images[y] = image;
            connect(image, "onmouseover", this, this.imageRollover);
            addElementClass(image, "thumbnailviewer-thumbnail");
            appendChildNodes(this._thumbnailDiv, image);
        }
        // this.displayPicture(0);
    },
    imageRollover: function(event) {
        if (this._mainImage.src != event._src.src)
            this._mainImage.src = event._src.src;
        //var sArray = str.split("event._src.id");
        //var picNum = sArray[1];
        //this._displayPicture(picNum);
    },
    displayPicture: function(picNum) {
        this._mainImage.src = this._images[picNum].src;
    }
}
SardiniaYogaWeb.TeacherDiv.registerClass('SardiniaYogaWeb.TeacherDiv', Sys.UI.Control);



if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();