﻿// webkitdragdrop.js v1.0, Mon May 15 2010
//
// Copyright (c) 2010 Tommaso Buvoli (http://www.tommasobuvoli.com)
// No Extra Libraries are required, simply download this file, add it to your pages!
//
// To See this library in action, grab an ipad and head over to http://www.gotproject.com
// webkitdragdrop is freely distributable under the terms of an MIT-style license.


//Description
// Because this library was designed to run without requiring any other libraries, several basic helper functions were implemented
// 6 helper functons in this webkit_tools class have been taked directly from Prototype 1.6.1 (http://prototypejs.org/) (c) 2005-2009 Sam Stephenson

var webkit_tools =
{
    //$ function - simply a more robust getElementById

    $: function (e) {
        if (typeof (e) == 'string') {
            return document.getElementById(e);
        }
        return e;
    },

    //extend function - copies the values of b into a (Shallow copy)

    extend: function (a, b) {
        for (var key in b) {
            a[key] = b[key];
        }
        return a;
    },

    //empty function - used as defaut for events

    empty: function () {

    },

    //remove null values from an array

    compact: function (a) {
        var b = []
        var l = a.length;
        for (var i = 0; i < l; i++) {
            if (a[i] !== null) {
                b.push(a[i]);
            }
        }
        return b;
    },

    //DESCRIPTION
    //	This function was taken from the internet (http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/) and returns 
    //	the computed style of an element independantly from the browser
    //INPUT
    //	oELM (DOM ELEMENT) element whose style should be extracted
    //	strCssRule element

    getCalculatedStyle: function (oElm, strCssRule) {
        var strValue = "";
        if (document.defaultView && document.defaultView.getComputedStyle) {
            strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
        }
        else if (oElm.currentStyle) {
            strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1) {
                return p1.toUpperCase();
            });
            strValue = oElm.currentStyle[strCssRule];
        }
        return strValue;
    },

    //bindAsEventListener function - used to bind events

    bindAsEventListener: function (f, object) {
        var __method = f;
        return function (event) {
            __method.call(object, event || window.event);
        };
    },

    //cumulative offset - courtesy of Prototype (http://www.prototypejs.org)

    cumulativeOffset: function (element) {
        var valueT = 0, valueL = 0;
        do {
            valueT += element.offsetTop || 0;
            valueL += element.offsetLeft || 0;
            if (element.offsetParent == document.body)
                if (element.style.position == 'absolute') break;

            element = element.offsetParent;
        } while (element);

        return { left: valueL, top: valueT };
    },

    //getDimensions - courtesy of Prototype (http://www.prototypejs.org)

    getDimensions: function (element) {
        var display = element.style.display;
        if (display != 'none' && display != null) // Safari bug
            return { width: element.offsetWidth, height: element.offsetHeight };

        var els = element.style;
        var originalVisibility = els.visibility;
        var originalPosition = els.position;
        var originalDisplay = els.display;
        els.visibility = 'hidden';
        if (originalPosition != 'fixed') // Switching fixed to absolute causes issues in Safari
            els.position = 'absolute';
        els.display = 'block';
        var originalWidth = element.clientWidth;
        var originalHeight = element.clientHeight;
        els.display = originalDisplay;
        els.position = originalPosition;
        els.visibility = originalVisibility;
        return { width: originalWidth, height: originalHeight };
    },

    //hasClassName - courtesy of Prototype (http://www.prototypejs.org)

    hasClassName: function (element, className) {
        var elementClassName = element.className;
        return (elementClassName.length > 0 && (elementClassName == className ||
		new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
    },

    //addClassName - courtesy of Prototype (http://www.prototypejs.org)

    addClassName: function (element, className) {
        if (!this.hasClassName(element, className))
            element.className += (element.className ? ' ' : '') + className;
        return element;
    },

    //removeClassName - courtesy of Prototype (http://www.prototypejs.org)

    removeClassName: function (element, className) {
        element.className = this.strip(element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' '));
        return element;
    },

    //strip - courtesy of Prototype (http://www.prototypejs.org)

    strip: function (s) {
        return s.replace(/^\s+/, '').replace(/\s+$/, '');
    }

}

//Description
//webkit draggable - allows users to drag elements with their hands

var webkit_draggable = function (r, ip) {
    this.initialize = function (root, instance_props) {
        this.root = webkit_tools.$(root);
        var default_props = { scroll: false, revert: false, handle: this.root, zIndex: 1000, onStart: webkit_tools.empty, onEnd: webkit_tools.empty };

        this.p = webkit_tools.extend(default_props, instance_props || {});
        default_props.handle = webkit_tools.$(default_props.handle);
        this.prepare();
        this.bindEvents();
    }

    this.prepare = function () {
        var rs = this.root.style;

        //set position
        if (webkit_tools.getCalculatedStyle(this.root, 'position') != 'absolute') {
            rs.position = 'relative';
        }

        //set top, right, bottom, left
        rs.top = rs.top || '0px';
        rs.left = rs.left || '0px';
        rs.right = "";
        rs.bottom = "";

        //set zindex;
        rs.zIndex = rs.zIndex || '0';
    }

    this.bindEvents = function () {
        var handle = this.p.handle;

        this.ts = webkit_tools.bindAsEventListener(this.touchStart, this);
        this.tm = webkit_tools.bindAsEventListener(this.touchMove, this);
        this.te = webkit_tools.bindAsEventListener(this.touchEnd, this);

        handle.addEventListener("touchstart", this.ts, false);
        handle.addEventListener("touchmove", this.tm, false);
        handle.addEventListener("touchend", this.te, false);
    }

    this.destroy = function () {
        var handle = this.p.handle;

        handle.removeEventListener("touchstart", this.ts);
        handle.removeEventListener("touchmove", this.tm);
        handle.removeEventListener("touchend", this.te);
    }

    this.set = function (key, value) {
        this.p[key] = value;
    }

    this.touchStart = function (event) {
        //prepare needed variables
        var p = this.p;
        var r = this.root;
        var rs = r.style;
        var t = event.targetTouches[0];

        //get position of touch
        touchX = t.pageX;
        touchY = t.pageY;

        //set base values for position of root
        rs.top = this.root.style.top || '0px';
        rs.left = this.root.style.left || '0px';
        rs.bottom = null;
        rs.right = null;

        var rootP = webkit_tools.cumulativeOffset(r);
        var cp = this.getPosition();

        //save event properties
        p.rx = cp.x;
        p.ry = cp.y;
        p.tx = touchX;
        p.ty = touchY;
        p.z = parseInt(this.root.style.zIndex);

        //boost zIndex
        rs.zIndex = p.zIndex;
        webkit_drop.prepare();
        p.onStart();
    }

    this.touchMove = function (event) {
        event.preventDefault();
        event.stopPropagation();

        //prepare needed variables
        var p = this.p;
        var r = this.root;
        var rs = r.style;
        var t = event.targetTouches[0];
        if (t == null) { return }

        var curX = t.pageX;
        var curY = t.pageY;

        var delX = curX - p.tx;
        var delY = curY - p.ty;

        rs.left = p.rx + delX + 'px';
        rs.top = p.ry + delY + 'px';

        //scroll window
        if (p.scroll) {
            s = this.getScroll(curX, curY);
            if ((s[0] != 0) || (s[1] != 0)) {
                window.scrollTo(window.scrollX + s[0], window.scrollY + s[1]);
            }
        }

        //check droppables
        webkit_drop.check(curX, curY, r);

        //save position for touchEnd
        this.lastCurX = curX;
        this.lastCurY = curY;
    }

    this.touchEnd = function (event) {
        var r = this.root;
        var p = this.p;
        var dropped = webkit_drop.finalize(this.lastCurX, this.lastCurY, r, event);

        if (((p.revert) && (!dropped)) || (p.revert === 'always')) {
            //revert root
            var rs = r.style;
            rs.top = (p.ry + 'px');
            rs.left = (p.rx + 'px');
        }

        r.style.zIndex = this.p.z;
        this.p.onEnd();
    }

    this.getPosition = function () {
        var rs = this.root.style;
        return { x: parseInt(rs.left || 0), y: parseInt(rs.top || 0) }
    }

    this.getScroll = function (pX, pY) {
        //read window variables
        var sX = window.scrollX;
        var sY = window.scrollY;

        var wX = window.innerWidth;
        var wY = window.innerHeight;

        //set contants		
        var scroll_amount = 10; //how many pixels to scroll
        var scroll_sensitivity = 100; //how many pixels from border to start scrolling from.

        var delX = 0;
        var delY = 0;

        //process vertical y scroll
        if (pY - sY < scroll_sensitivity) {
            delY = -scroll_amount;
        }
        else
            if ((sY + wY) - pY < scroll_sensitivity) {
                delY = scroll_amount;
            }

        //process horizontal x scroll
        if (pX - sX < scroll_sensitivity) {
            delX = -scroll_amount;
        }
        else
            if ((sX + wX) - pX < scroll_sensitivity) {
                delX = scroll_amount;
            }

        return [delX, delY]
    }

    //contructor
    this.initialize(r, ip);
}

//Description
//webkit_click class. manages click events for draggables

var webkit_click = function (r, ip) {
    this.initialize = function (root, instance_props) {
        var default_props = { onClick: webkit_tools.empty };

        this.root = webkit_tools.$(root);
        this.p = webkit_tools.extend(default_props, instance_props || {});
        this.bindEvents();
    }

    this.bindEvents = function () {
        var root = this.root;

        //bind events to local scope
        this.ts = webkit_tools.bindAsEventListener(this.touchStart, this);
        this.tm = webkit_tools.bindAsEventListener(this.touchMove, this);
        this.te = webkit_tools.bindAsEventListener(this.touchEnd, this);

        //add Listeners
        root.addEventListener("touchstart", this.ts, false);
        root.addEventListener("touchmove", this.tm, false);
        root.addEventListener("touchend", this.te, false);

        this.bound = true;
    }

    this.touchStart = function () {
        this.moved = false;
        if (this.bound == false) {
            this.root.addEventListener("touchmove", this.tm, false);
            this.bound = true;
        }
    }

    this.touchMove = function () {
        this.moved = true;
        this.root.removeEventListener("touchmove", this.tm);
        this.bound = false;
    }

    this.touchEnd = function () {
        if (this.moved == false) {
            this.p.onClick();
        }
    }

    this.setEvent = function (f) {
        if (typeof (f) == 'function') {
            this.p.onClick = f;
        }
    }

    this.unbind = function () {
        var root = this.root;
        root.removeEventListener("touchstart", this.ts);
        root.removeEventListener("touchmove", this.tm);
        root.removeEventListener("touchend", this.te);
    }

    //call constructor
    this.initialize(r, ip);
}

//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2001 by Mike Hall.
// See http://www.brainjar.com for terms of use.
//*****************************************************************************

// Determine browser and version.

function Browser() {

    var ua, s, i;

    this.isIE = false;
    this.isNS = false;
    this.version = null;

    ua = navigator.userAgent;

    s = "MSIE";
    if ((i = ua.indexOf(s)) >= 0) {
        this.isIE = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
    }

    s = "Netscape6/";
    if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
    }

    // Treat any other "Gecko" browser as NS 6.1.

    s = "Gecko";
    if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = 6.1;
        return;
    }
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;

function dragStart(event, id) {

    var el;
    var x, y;

    // If an element id was given, find it. Otherwise use the element being
    // clicked on.

    if (id)
        dragObj.elNode = document.getElementById(id);
    else {
        if (browser.isIE)
            dragObj.elNode = window.event.srcElement;
        if (browser.isNS)
            dragObj.elNode = event.target;

        // If this is a text node, use its parent element.

        if (dragObj.elNode.nodeType == 3)
            dragObj.elNode = dragObj.elNode.parentNode;
    }

    // Get cursor position with respect to the page.

    if (browser.isIE) {
        x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
    }
    if (browser.isNS) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
    }

    // Save starting positions of cursor and element.

    dragObj.cursorStartX = x;
    dragObj.cursorStartY = y;
    dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
    dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);

    if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
    if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;

    // Update element's z-index.

    dragObj.elNode.style.zIndex = ++dragObj.zIndex;

    // Capture mousemove and mouseup events on the page.

    if (browser.isIE) {
        document.attachEvent("onmousemove", dragGo);
        document.attachEvent("onmouseup", dragStop);
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    if (browser.isNS) {
        document.addEventListener("mousemove", dragGo, true);
        document.addEventListener("mouseup", dragStop, true);
        event.preventDefault();
    }
}

function dragGo(event) {

    var x, y;

    // Get cursor position with respect to the page.

    if (browser.isIE) {
        x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
    }
    if (browser.isNS) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
    }

    // Move drag element by the same amount the cursor has moved.

    dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
    dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";

    if (browser.isIE) {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    if (browser.isNS)
        event.preventDefault();
}

function dragStop(event) {

    // Stop capturing mousemove and mouseup events.

    if (browser.isIE) {
        document.detachEvent("onmousemove", dragGo);
        document.detachEvent("onmouseup", dragStop);
    }
    if (browser.isNS) {
        document.removeEventListener("mousemove", dragGo, true);
        document.removeEventListener("mouseup", dragStop, true);
    }
}

function printPhoto() {
    orgSrc = document.getElementById('detailZoomImage').src;
    widthIndex = orgSrc.indexOf('&width=');
    heightIndex = orgSrc.indexOf('&height=');
    orgWidth = Number(orgSrc.substring(widthIndex + 7, heightIndex)) + 50;
    var printwin = window.open(document.getElementById('detailZoomImage').src, 'Print', 'fullscreen=no,toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,directories=no,location=no,width=' + orgWidth + ',height=' + orgWidth + ',left=700,top=100');
    printwin.focus();
    printwin.print();
}

currentImage = 1;
function browsePhoto(values, i) {
    value = values.split(';');
    currentImage = currentImage + i;
    if (currentImage > parseInt(value.length)) currentImage = 1;
    if (currentImage < 1) currentImage = parseInt(value.length);
    orgSrc = document.getElementById('detailZoomImage').src;
    widthIndex = orgSrc.indexOf('&width=');
    valueIndex = orgSrc.indexOf('&value=');
    startSrc = orgSrc.substring(0, valueIndex + 7);
    endSrc = orgSrc.substring(widthIndex);
    fullSrc = (startSrc + value[currentImage - 1] + endSrc);
    document.getElementById('detailZoomImage').src = fullSrc;
    document.getElementById('photoCounter').innerHTML = (currentImage) + "/" + value.length;
}

function zoomOut(bool) {
    orgSrc = document.getElementById('detailZoomImage').src;
    widthIndex = orgSrc.indexOf('&width=');
    heightIndex = orgSrc.indexOf('&height=');
    orgWidth = orgSrc.substring(widthIndex + 7, heightIndex);
    newWidth = bool == 1 ? Math.round(orgWidth * 1.25) : Math.round(orgWidth / 1.25);
    newSrc = orgSrc.substring(0, widthIndex) + "&width=" + newWidth + "&height=" + newWidth;
    document.getElementById('detailZoomImage').src = newSrc;
}

