/*
 © Copyright (c) 2006-2008 Apple Inc.  All rights reserved.
 
 IMPORTANT:  This Apple software ("Apple Software") is supplied to you in consideration of your agreement to the following terms. Your use, installation and/or redistribution of this Apple Software constitutes acceptance of these terms. If you do not agree with these terms, please do not use, install, or redistribute this Apple Software.
 
 Provided you comply with all of the following terms, Apple grants you a personal, non-exclusive license, under Apple’s copyrights in the Apple Software, to use, reproduce, and redistribute the Apple Software for the sole purpose of creating Dashboard widgets for Mac OS X. If you redistribute the Apple Software, you must retain this entire notice in all such redistributions.
 
 You may not use the name, trademarks, service marks or logos of Apple to endorse or promote products that include the Apple Software without the prior written permission of Apple. Except as expressly stated in this notice, no other rights or licenses, express or implied, are granted by Apple herein, including but not limited to any patent rights that may be infringed by your products that incorporate the Apple Software or by other works in which the Apple Software may be incorporated.
 
 The Apple Software is provided on an "AS IS" basis.  APPLE MAKES NO WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE, REGARDING THE APPPLE SOFTWARE OR ITS USE AND OPERATION ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
 
 IN NO EVENT SHALL APPLE BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, AND/OR DISTRIBUTION OF THE APPLE SOFTWARE, HOWEVER CAUSED AND WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHERWISE, EVEN IF APPLE HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

// Note: The Header part is considered private and subject to change in future Dashcode releases.
// Note: Properties and methods beginning with underbar ("_") are considered private and subject to change in future Dashcode releases.

function CreateHeader(elementOrID, spec) {
    var prefix = "Images/";
    var headerElement = elementOrID;
    if (elementOrID.nodeType != Node.ELEMENT_NODE) {
        headerElement = document.getElementById(elementOrID);
        prefix += elementOrID + "_"
    } else {
        prefix += spec.originalID + "_";
    }
    if (!headerElement.loaded) {
        headerElement.loaded = true;
        var leftImageWidth = spec.leftImageWidth || 0;
        var rightImageWidth = spec.rightImageWidth || 0;
        var rootTitle = spec.rootTitle || 'Home';
        headerElement.object = new Header(headerElement, spec, rootTitle, leftImageWidth, rightImageWidth, prefix + "left.png", prefix + "middle.png", prefix + "right.png");
        return headerElement.object;
    }
}

Header.prototype = new Shape;

function Header(headerElement, spec, rootTitle, leftImageWidth, rightImageWidth, imgLeft, imgMiddle, imgRight)
{
    var styleElement = headerElement;
    // when cloning template, get size from original
    if (spec.originalID) {
        styleElement = document.getElementById(spec.originalID);
    }
    this._headerHeight = getElementHeight(styleElement) || 20;
    this._paddingSides = 10;
    this._backButtonLeftPadding = 13;
    this._useTransforms = (window.WebKitCSSMatrix || window.CSSMatrix) ? true : false;
    
    this._init(headerElement, this._headerHeight, leftImageWidth, rightImageWidth, imgLeft, imgMiddle, imgRight);
    
    this.element = headerElement;
    if (!dashcode || !dashcode.inDesign) {
        headerElement.style.overflow = "hidden";
    }
    
    // create elements and add them to the header
    this._separatorElement = this._makeSeparator();    
    this._title1 = this._makeTitle();
    this._title2 = this._makeTitle();
    this._title1.style.opacity = 0;
    this._title2.style.opacity = 0;
    this._backButton1 = this._makeBackButton();
    this._backButton2 = this._makeBackButton();
    this._backButton1.style.opacity = 0;
    this._backButton2.style.opacity = 0;

    this.element.appendChild(this._separatorElement);
    this.element.appendChild(this._title1);
    this.element.appendChild(this._title2);
    this.element.appendChild(this._backButton1);
    this.element.appendChild(this._backButton2);
        
    // Set up click handler for back buttons
    var self = this;
    var onclickHandler = function (event) {
        self._goBack();
    }
    this._backButton1.onclick = onclickHandler;
    this._backButton2.onclick = onclickHandler;
    
    // Some default parameters for animation, can probably be configured from the Part Spec
    this._animationProperties = '-webkit-transform, opacity';
    this._setAnimationDuration(0.25);
	this._setAnimationTiming('default');
    
    // Init stack and set up root level
    this._stack = [];
    this._goForward(rootTitle, null);
}

Header.prototype._makeBackButton = function() {
    var newElem = document.createElement("div");
    newElem.style.position = 'absolute';
    newElem.style.top = Math.floor(((this._headerHeight - 30.0) / 2.0)) + 'px';
    newElem.style.width = 'auto';
    newElem.style.height = '30px';
    newElem.style.webkitBorderImage = 'url(Images/BackButton.png) 0 4 0 '+this._backButtonLeftPadding;
    newElem.style.borderWidth = '0px 4px 0px '+this._backButtonLeftPadding+'px';
    
    newElem.style.padding = '0px 4px 0px 0px';
    newElem.style.lineHeight = '30px';
    newElem.style.textAlign = 'left';
    newElem.style.fontSize = '12px';
    
	newElem.style.maxWidth = '20%';
	newElem.style.textOverflow = 'ellipsis';
	newElem.style.whiteSpace = 'nowrap';
	newElem.style.overflow = 'hidden';
    newElem.style.webkitTransform = 'translateX(0)';

    return newElem;
}

Header.prototype._makeTitle = function() {
    var newElem = document.createElement("div");
    var height = this._headerHeight - 2;
    
    newElem.style.position = 'absolute';
    newElem.style.top = 0;
    newElem.style.height = height+'px';
    newElem.style.webkitTransform = 'translateX(0)';

    newElem.style.textAlign = 'center';
    newElem.style.lineHeight = height+'px';
	newElem.style.textOverflow = 'ellipsis';
	newElem.style.whiteSpace = 'nowrap';
	
    // To avoid zero width but having innerHTML div from contributing to extra width
    newElem.style.overflow = 'hidden';

    return newElem;
}

Header.prototype._makeSeparator = function() {
    var newElem = document.createElement("div");
    newElem.style.position = 'absolute';
    newElem.style.left = 0;
    newElem.style.right = 0;
    newElem.style.bottom = '0px';
    newElem.style.width = 'auto';
    newElem.style.height = '1px';
    newElem.style.backgroundColor = 'rgb(84, 84, 84)';
    
    return newElem;
}

Header.prototype._disableTransitions = function(elements) {
    for (var i=0; i<elements.length; i++) {
        elements[i].style.webkitTransitionProperty = 'none';
    }
}

Header.prototype._setAnimationDuration = function(duration) {
    this._animationDuration = duration;
    this._animationDurations = duration + "s, " + duration + "s !important";
}

Header.prototype._setAnimationTiming = function(timing) {	
	this._animationTimings = timing + ', linear';
}

Header.prototype._performTransition = function(transforms) {
    var total = transforms.length;
    for (var f = 0; f<total; f++) {
        var transform = transforms[f];
        var element = transform.element;

        // enable transitions
        element.style.webkitTransitionProperty = this._animationProperties;
        element.style.webkitTransitionDuration = this._animationDurations;
        element.style.webkitTransitionTimingFunction = this._animationTimings;

        // perform translate transitions
        if (this._useTransforms) {
            element.style.webkitTransform = 'translateX(' + transform.translateX + 'px)';
        } else {
            element.style.left = transform.translateX + 'px';
        }

        // perform opacity and visibility transitions
        if (transform.opacity != null) {
            element.style.opacity = transform.opacity;
        }
        if (transform.visibility != null) {
            setTimeout(function() {
                element.style.visibility = transform.visibility;
            }, this._animationDuration*1000+50);
        }
    }
}

Header.prototype._goForward = function (newTitle, goBackCallback) {
    var vanishEntry = null;
    if (this._stack.length > 0) {
        vanishEntry = this._stack[this._stack.length-1];
    }

    // cycle the buttons and titles
    var appearTitle, vanishTitle, appearButton, vanishButton;
    if (this._stack.length % 2 == 0) {
        appearTitle = this._title1;
        vanishTitle = this._title2;
        appearButton = this._backButton1;
        vanishButton = this._backButton2;
    } else {
        appearTitle = this._title2;
        vanishTitle = this._title1;
        appearButton = this._backButton2;
        vanishButton = this._backButton1;
    }
    
    // set new title
    appearButton.innerHTML = vanishEntry ? vanishEntry.title : "";
	appearTitle.style.width = '';
    appearTitle.innerHTML = newTitle;
    
    // gather necessary data
    var headerWidth = this.element.offsetWidth;
    var appearTitleWidth = appearTitle.offsetWidth;
    var appearButtonWidth = vanishEntry ? appearButton.offsetWidth : headerWidth;
    var vanishButtonWidth = vanishEntry ? vanishButton.offsetWidth : headerWidth;

    // determine the end positions
    var appearTitleX = (headerWidth / 2) - (appearTitleWidth / 2);
    var vanishTitleX = this._paddingSides + this._backButtonLeftPadding;
    if (vanishEntry) {
        vanishTitleX = Math.min(vanishTitleX, vanishEntry.titleX);
    }
    var appearButtonX = vanishEntry ? this._paddingSides : -appearButtonWidth;
    var vanishButtonX = -(vanishButtonWidth + this._paddingSides);
    
    // adjust title to don't overlap with back button
    var minAppearTitleX = Math.max(appearButtonX + appearButtonWidth, 0) + this._paddingSides;
    if (minAppearTitleX > appearTitleX) {
        appearTitleX = minAppearTitleX;
        var maxTitleWidth = headerWidth - minAppearTitleX - this._paddingSides;
        if (appearTitleWidth > maxTitleWidth) {
            appearTitleWidth = maxTitleWidth;
            appearTitle.style.width = appearTitleWidth+"px";
        }
    }

    // set initial state of buttons and titles
    this._disableTransitions([appearTitle, vanishTitle, appearButton, vanishButton]);
    appearButton.style.opacity = 0;
    appearButton.style.visibility = "visible";
    if (vanishEntry) {
        var appearButtonInitialX = Math.max(appearButtonX, vanishEntry.titleX - this._backButtonLeftPadding);
        appearButton.style.webkitTransform = 'translateX(' + appearButtonInitialX + 'px)';
        appearTitle.style.webkitTransform = 'translateX(' + headerWidth + 'px)';
        appearTitle.style.opacity = 0;
    } else {
        appearTitle.style.webkitTransform = 'translateX(' + appearTitleX + 'px)';
        appearTitle.style.opacity = 1;
    }

    if (dashcode && dashcode.inDesign) {
        appearTitleX = this._useTransforms ? 0 : this._paddingSides;
        appearTitle.style.left = this._paddingSides+"px";
        appearTitle.style.right = this._paddingSides+"px";
    }    

    // let the transitions engine perform the transition
    var transforms = [
        {element: appearTitle, translateX: appearTitleX, opacity: 1},
        {element: vanishTitle, translateX: vanishTitleX, opacity: 0},
        {element: appearButton, translateX: appearButtonX, opacity: vanishEntry != null ? 1 : 0},
        {element: vanishButton, translateX: vanishButtonX, opacity: 0, visibility: "hidden"},
    ];
    var self = this;
    var transitionCallback = function() {
        self._performTransition(transforms)
    };
    if (this._useTransforms) {
        Transition._addDelayedTransitionCallback(transitionCallback);
    } else {
        transitionCallback();
    }
    
    // push new state into stack
    var newStackEntry = { 
        title : newTitle, 
        titleX : appearTitleX,
        callback : goBackCallback
    };
    this._stack.push(newStackEntry);
}

Header.prototype._goBack = function () {
    if (this._stack.length > 1) {		

        // cycle the buttons and titles
        var appearTitle, vanishTitle, appearButton, vanishButton;
        if (this._stack.length % 2 == 0) {
            appearTitle = this._title1;
            vanishTitle = this._title2;
            appearButton = this._backButton1;
            vanishButton = this._backButton2;
        } else {
            appearTitle = this._title2;
            vanishTitle = this._title1;
            appearButton = this._backButton2;
            vanishButton = this._backButton1;
        }

        // pop previous state from stack and set new title
        var vanishEntry = this._stack.pop();
        var appearEntry = this._stack[this._stack.length-1];
        var backEntry = null;
        if (this._stack.length > 1) {
            backEntry = this._stack[this._stack.length-2];
            appearButton.innerHTML = backEntry.title;
        }
        appearTitle.style.width = '';
        appearTitle.innerHTML = appearEntry.title;
        
        // gather necessary data
        var headerWidth = this.element.offsetWidth;
        var appearTitleWidth = appearTitle.offsetWidth;
        var appearButtonWidth = backEntry ? appearButton.offsetWidth : headerWidth;
        
        // determine the end positions
        var appearTitleX = (headerWidth / 2) - (appearTitleWidth / 2);
        var vanishTitleX = headerWidth;
        var appearButtonX = backEntry ? this._paddingSides : -headerWidth;
        var vanishButtonX = Math.max(this._paddingSides, appearTitleX - this._backButtonLeftPadding);

        // adjust title to don't overlap with back button
        var minAppearTitleX = Math.max(appearButtonX + appearButtonWidth, 0) + this._paddingSides;
        if (minAppearTitleX > appearTitleX) {
            appearTitleX = minAppearTitleX;
            var maxTitleWidth = headerWidth - minAppearTitleX - this._paddingSides;
            if (appearTitleWidth > maxTitleWidth) {
                appearTitleWidth = maxTitleWidth;
                appearTitle.style.width = appearTitleWidth+"px";
            }
        }

        // set initial state of buttons and titles
        this._disableTransitions([appearTitle, vanishTitle, appearButton, vanishButton]);
        appearButton.style.opacity = 0;
        appearButton.style.visibility = "visible";
        appearTitle.style.opacity = 0;
        appearButton.style.webkitTransform = 'translateX(' + -(appearButtonWidth + this._paddingSides) + 'px)';
        appearTitle.style.webkitTransform = 'translateX(' + (this._paddingSides + this._backButtonLeftPadding) + 'px)';
        
        // let the transitions engine perform the transition
        var transforms = [
            {element: appearTitle, translateX: appearTitleX, opacity: 1},
            {element: vanishTitle, translateX: vanishTitleX, opacity: 0},
            {element: appearButton, translateX: appearButtonX, opacity: backEntry != null ? 1 : 0},
            {element: vanishButton, translateX: vanishButtonX, opacity: 0, visibility: "hidden"},
        ];        
        var self = this;
        var transitionCallback = function() {
            self._performTransition(transforms)
        };
        if (this._useTransforms) {
            Transition._addDelayedTransitionCallback(transitionCallback);
        } else {
            transitionCallback();
        }
        
        if (vanishEntry.callback) {
            vanishEntry.callback(vanishEntry.title, appearEntry.title);
        }
    }
}