Tapestry.ErrorPopup = Class.create(Tapestry.ErrorPopup, {
    BUBBLE_HEIGHT: "58px",
    BUBBLE_VERT_OFFSET: -60,
    BUBBLE_HORIZONTAL_OFFSET: 0,
    initialize : function($super, field)    {
      $super(field);
      this.outerDiv.setAttribute("class","t-error-popup");
      }
});


Tapestry.ElementEffect.modal = function(n) {
    var popupEl  = $('changeZone');
    popupEl.setStyle({display:"block"});
   /* popupEl.setStyle({height:document.body.getHeight()+"px"}); */
    /* a hack, make the gray area just "VERY LARGE" */
    popupEl.setStyle({height:"200%"});
    var win = windowSize();
    var popupContent = popupEl.firstDescendant();
    var contentTop = win[1]/2 -(popupContent.getHeight()/2);
    if(contentTop < 0) contentTop = 0;
    popupContent.setStyle({top:contentTop+"px"});
    popupContent.setStyle({left:win[0]/2 -(popupContent.getWidth()/2) +"px"});
    popupContent.scrollTo();

};


Tapestry.ElementEffect.highlight = function(n) {
};

Tapestry.ElementEffect.warenkorb = function(n) {
        $$('.t-error-popup').each(function(item) {
            item.remove();
        });
        if($('cartError')) {
            var button = $('cartError').getAttribute("rel");
            button = $(button);
            var text = $('cartError').childNodes[0].nodeValue;
            showErrorPopup(button, text);
        }
        else {
        if($('sprechblase')) {
                var button = $('sprechblase').getAttribute("rel");
                button = $(button);
                Effect.Appear($('sprechblase'));
                positionBubble(button);
            }
        }
};

    function showSuccessMsg() {
        /*$$('#successMsg').each(function(item) {
            item.setStyle({width:"0px",height:"0px",visibility:"hidden"});
            var successText = "";
            if(item.childNodes.length>0) {
                successText = item.childNodes[0].nodeValue;
            }
            load: {
                if(successText) {
                    showNotice(item, successText);
                }
            }
            item.setStyle({width:"",height:"",visibility:"normal"});
        });*/
    }

/*

Event.observe(document, "dom:loaded",  function() {
    preloadImages('.preloadImage');

});
*/


Event.observe(window, 'load', function() {
    init();
});


function showCenterContent(id) {
	/*var popupEl  = $('changeZone');	*/
	var popupContent  = $(id);
	/*popupEl.setStyle({height:"200%"});	*/
	var win = windowSize();	
	var contentTop = win[1]/2 -(popupContent.getHeight()/2);
	if(contentTop < 0) contentTop = 0;
	/*popupEl.setStyle({display:'block'});*/
	popupContent.setStyle({top:contentTop+"px"});
	popupContent.setStyle({left:win[0]/2 -(popupContent.getWidth()/2) +"px"});
	popupContent.appear();
}


function windowSize() {
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' )
    {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return new Array(myWidth, myHeight);
}


function showPopup(url){
    new Ajax.Updater('popup', url, {
        method: 'get',
        onComplete: function(transport) {
            var win = windowSize();
            $('popup').setStyle({height:$('container').getHeight()+$('footer').getHeight()+"px"});
            $('popup').setStyle({display:"block"});
            $('popup').setStyle({width:"none"});
            var popupContent = $('popup').firstDeendant();
            popupContent.setStyle({top:win[1]/2 -(popupContent.getHeight()/2) +"px"});
            popupContent.setStyle({left:win[0]/2 -(popupContent.getWidth()/2) +"px"});
            var firstInnerDiv = $('popup').getElementsByTagName("div")[0];
            $('closePopup').setStyle({marginLeft:firstInnerDiv.getWidth()-50+"px"});
            var popupY = win[1]/2 -(firstInnerDiv.getHeight()/2);
            if(popupY <0) {
                popupY = 0;
            }
            firstInnerDiv.setStyle({top:popupY+"px"});
            firstInnerDiv.setStyle({left:win[0]/2 -(firstInnerDiv.getWidth()/2) +"px"});
            firstInnerDiv.setStyle({position:"absolute"});
        }
    });
}


function display_effect(id){
    $(id).setOpacity(0);
    $(id).setStyle({display:"block"});
    new Effect.Opacity($(id), { from: 0, to: 1, duration: 0.5 });
}

function showZoom(){
    $('detailsPic').setStyle({display:"none"});
    display_effect('origImage');

    //if($('mainSlide')) $('mainSlide').setStyle({display:"none"});
    display_effect('zoomImage');

    $('detailsZoomOn').setStyle({display:"none"});
    $('detailsZoomOff').setStyle({display:"block"});
    glassOn(1);
}

function hideZoom(){
    $('origImage').setStyle({display:"none"});
    $('zoomImage').setStyle({display:"none"});
    $('detailsZoomOff').setStyle({display:"none"});

    display_effect('detailsPic');
    if($('mainSlide')) display_effect('mainSlide');
    $('detailsZoomOn').setStyle({display:"block"});
    glassOn(0);
}

function tooltipMouseOverHandler(event) {
    if(event) {
        event.stop();
    }
    var slash = '/';
    var divtag = event.findElement('div');
    var aTag = divtag.down();
    var link = aTag.readAttribute('href').split(';')[0];
    var linkPrefix = '';
    var serverurlArray = document.URL.split(slash);
    if(serverurlArray[3].length == 2) {
        linkPrefix = serverurlArray[0] + slash + serverurlArray[1] + slash + serverurlArray[2] + slash + serverurlArray[3] + slash;
    }else {
        linkPrefix = serverurlArray[0] + slash + serverurlArray[1] + slash + serverurlArray[2] + slash;
    }
    if(link) {
        var slashPos = link.lastIndexOf(slash);
        link = link.substring(slashPos);
    }
    if(!link.startsWith(slash)) {
        link = slash+link;
    }
    timeOutId = window.setTimeout( function(){
    new Ajax.Updater('productToolTip',linkPrefix + "smallProductUpdate"+link,{
        method: 'get',
        onComplete: function(transport) {
            $('productToolTip').clonePosition(divtag);
            $('productToolTip').setStyle({height:''});
            $('productToolTip').setStyle({width:''});
            $('productToolTip').setStyle({margin:'0px'});
            $('productToolTip').setStyle({zIndex:'100'});
            calculateToolTipPos(divtag);

            $('productToolTip').appear();
        }
    })},timeOutValue);
}

function calculateToolTipPos(productDiv) {
    var leftString = $('productToolTip').getStyle('left');
    leftString = parseInt(leftString.gsub('px',''));
    var leftVal = leftString + productDiv.getWidth();
    if((leftVal+$('productToolTip').getWidth()) < document.viewport.getWidth()) {
        $('productToolTip').setStyle({left:(leftVal+2) + 'px'});
    }else {
        $('productToolTip').setStyle({left:(leftString - $('productToolTip').getWidth() - 21 ) + 'px'});
    }
    var topString = $('productToolTip').getStyle('top');
    topString = parseInt(topString.gsub('px',''));
    $('productToolTip').setStyle({top:topString - 50 + 'px'});
}

// value in millis
var timeOutValue = 500;

var timeOutId;

function init(){
	
	
	
    $$('.smallproduct').each(function(item){ // get all elements inside the element with CSS-class smallproduct
        var nestedImg = item.down().down();
        Event.observe(nestedImg,"mouseover",tooltipMouseOverHandler);

        Event.observe(nestedImg,"mouseout",function(e){
            $('productToolTip').setStyle({display:'none'});
            window.clearTimeout(timeOutId);
            nestedImg.observe("mouseover",tooltipMouseOverHandler);
        });
    });

    var pttDiv = $('productToolTip');
    if(pttDiv) {
        Event.observe(pttDiv,"mouseover",function(e){
            pttDiv.fade({duration:0.2});
        });
    }

    Event.observe($('dohelp'),"click", function(e){
        $('doHelpDiv').appear();
    });


    Event.observe($('closeHelp'),"click", function(e){
        $('doHelpDiv').blindUp();
    });
   
    var searchLabelText = $('searchLabel').firstChild.data;
    $('searchInput').setValue(searchLabelText);

    Event.observe($('searchInput'), "click", function(e){
        if($('searchInput').getValue()==searchLabelText){
            $('searchInput').setValue("");
        }
    }, false);
    Event.observe($('searchInput'), "blur", function(e){
        if($('searchInput').getValue()==''){
            $('searchInput').setValue(searchLabelText);
        }
    }, false);

    var directOrderText = $('hiddenDO').firstChild.data;
    $('fielddirectorderarticle').setValue(directOrderText);

    Event.observe($('fielddirectorderarticle'), "click", function(e){
        if($('fielddirectorderarticle').getValue()==directOrderText){
            $('fielddirectorderarticle').setValue("");
        }
    }, false);
    Event.observe($('fielddirectorderarticle'), "blur", function(e){
        if($('fielddirectorderarticle').getValue()==''){
            $('fielddirectorderarticle').setValue(directOrderText);
        }
    }, false);

}


function showNotice(element,message) {
    var errorPopup = new Tapestry.ErrorPopup(element);
    errorPopup.showMessage(message);
    errorPopup.outerDiv.setStyle({backgroundImage:"none"});
    errorPopup.outerDiv.setStyle({backgroundColor:"#FF9A00"});
    errorPopup.outerDiv.setStyle({height:"30px"});
    errorPopup.innerSpan.setStyle({backgroundImage:"none"});
    errorPopup.innerSpan.setStyle({height:"20px"});
    errorPopup.innerSpan.setStyle({fontWeight:"bold"});
    setTimeout("this.errorPopup.fadeOut()", 2000);
}

/* show the standard clientside-validation-popup manually with a custom error message */
function showErrorPopup(element,message) {    
    element = $(element);
    Tapestry.currentFocusField = element;
    var errorPopup =  $(element.id+':errorpopup');
    if(errorPopup) errorPopup.remove();
    errorPopup = new Tapestry.ErrorPopup(element);
    element.focus();
    errorPopup.showMessage(message);
}


function showError(element,message) {
    var errorPopup = new Tapestry.ErrorPopup(element);
    errorPopup.showMessage(message);
    errorPopup.outerDiv.setStyle({backgroundImage:"none"});
    errorPopup.outerDiv.setStyle({backgroundColor:"red"});
    var count = this.errorPopup.innerSpan.getElementsByTagName("br").length;
    errorPopup.outerDiv.setStyle({height:30*count+ "px"});
    errorPopup.innerSpan.setStyle({backgroundImage:"none"});
    errorPopup.innerSpan.setStyle({minHeight:"20px"});
    errorPopup.innerSpan.setStyle({fontWeight:"bold"});
    setTimeout("this.errorPopup.stopAnimation()",1000);
}

function closePopup(){
    $('popup').setStyle({display:"none"});
    $('popupContent').remove();
}
function closeChangeZone() {
    $('changeZone').setStyle({display:"none"});
    $('popupContent').remove();
}


function positionBubble(button) {
    var BUBBLE_VERT_OFFSET = -72;
    if(button.id == 'addToCartButton') BUBBLE_VERT_OFFSET = -60;
    var BUBBLE_HORIZONTAL_OFFSET = 0;
     var BUBBLE_WIDTH = "auto";
     var BUBBLE_HEIGHT = "58px";

    var button_x = Position.positionedOffset(button)[0];
    var button_y = Position.positionedOffset(button)[1];

    $('sprechblase').setStyle ({
            top: (button_y + BUBBLE_VERT_OFFSET) + "px",
            left: (button_x + BUBBLE_HORIZONTAL_OFFSET) + "px",
            //width: BUBBLE_WIDTH,
            height: BUBBLE_HEIGHT
    });
    setTimeout(function() {Effect.Fade($('sprechblase'));}, 3000);
}

function hideBubble() {
    $('sprechblase').toggle();
}


function preloadImages(id){
    $$(id).each(function(image) {
        var orig_src = image.src;

        if (image.complete) {
                image.setStyle({visibility: "visible" });
        } else {
            image.onload = function() {
                image.setStyle({visibility: "visible" });
            }.bind(this);
        }
        image.src         = "/images/blank.gif";
        image.setStyle({ backgroundImage: 'url(' + "/images/spinner.gif" + ')', backgroundPosition: '50% 50%', backgroundRepeat: 'no-repeat'});
        var newImage     = null;
        newImage         = new Image();
        newImage.src     = orig_src;

        if (newImage.complete) {
            new Effect.Opacity(image, { from: 1, to: 0, duration: 0.5, afterFinish:function(){
                image.src     = newImage.src;
                new Effect.Opacity(image, { from: 0, to: 1, duration: 0.5 });
            } });
        } else {
            newImage.onload = function() {
                new Effect.Opacity(image, { from: 1, to: 0, duration: 0.5, afterFinish:function(){
                    image.src     = newImage.src;
                    if (image.complete) {
                            new Effect.Opacity(image, { from: 0, to: 1, duration: 0.5 });
                    } else {
                        image.onload = function() {
                            new Effect.Opacity(image, { from: 0, to: 1, duration: 0.5 });
                        }
                    }
                } });
            }.bind(this);
        }
    });
}


function display_effect(id){
    new Effect.Opacity($(id), { from: 1, to: 0, duration: 0 });
    $(id).setStyle({display:"block"});
    new Effect.Opacity($(id), { from: 0, to: 1, duration: 0.5 });
}


function showSlider(slide){
    if($('origImage').getStyle("display") != "block"){
        $(slide).setOpacity(0);

        var topPos = Position.positionedOffset($('mainSlide'))[1];
        $(slide).setStyle({top:topPos+"px"});

        $(slide).setStyle({display:"block"});
        new Effect.Opacity($(slide), { from: 0, to: 1, duration: 0.5 });
    }
}

function hideSlider(){
    if($('origImage').getStyle("display") != "block"){
        if($('fitSlide') && $('fitSlide').getStyle("display") == "block"){
            new Effect.Opacity($('fitSlide'), { from: 1, to: 0, duration: 0.5, afterFinish: function(){
                $('fitSlide').setStyle({display:"none"});
            } });
        }
        if($('detailsSlide') && $('detailsSlide').getStyle("display") == "block"){
            new Effect.Opacity($('detailsSlide'), { from: 1, to: 0, duration: 0.5, afterFinish: function(){
                $('detailsSlide').setStyle({display:"none"});
            } });
        }
        if( $('pflegehinweiseSlide') && $('pflegehinweiseSlide').getStyle("display") == "block"){
            new Effect.Opacity($('pflegehinweiseSlide'), { from: 1, to: 0, duration: 0.5, afterFinish: function(){
                $('pflegehinweiseSlide').setStyle({display:"none"});
            } });
        }
    }
}


function handle(delta) {
    bigSlider.setValueBy(delta*20*(-1));
}

function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120;
        if (window.opera) delta = -delta;
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

function altImageSelected(smallUrl) {
    var mediumImgEl1 = $('productMain');
    var mediumImgEl2 = $('productImage');
    var largeImgEl = $('productZoomed');
    var imgname = smallUrl.substring(smallUrl.lastIndexOf("/"));
    var mediumUrl = "/images/products/detail"+imgname;
    mediumImgEl1.setAttribute("src", mediumUrl);
    mediumImgEl2.setAttribute("src", mediumUrl);
    var largeUrl = "/images/products/large"+imgname;
    largeImgEl.setAttribute("src", largeUrl);
}

function simplePopupWindow(url) {
    var newwin = window.open(url, "zoomwin", "width=817,height=840,scrollbars=yes,status=0,menubar=0,resizable=yes");
}


function DisableButton(el,otherElId) {
    el.disabled = true;   
    $(otherElId).disabled = true;
    makeTransparent(el,$(otherElId));
}

function makeTransparent(elem, otherElem){
  elem.style.cursor="default";
  otherElem.style.cursor="default";
  if(navigator.appName == "Netscape"){
        elem.style.opacity = 0.5;
        otherElem.style.opacity = 0.5;
  } else{
     elem.style.filter="alpha(opacity=50)";
     otherElem.style.filter="alpha(opacity=50)";
  }
}