Scroller.implement({
    scroll: function(){

    //alert("scroll");

     var size = this.element.getSize(), scroll = this.element.getScroll(), pos = this.element.getOffsets(), scrollSize = this.element.getScrollSize(), change = {'x': 0, 'y': 0};
     for (var z in this.page){
       if (this.page[z] < (this.options.area + pos[z]) && scroll[z] != 0)
         change[z] = (this.page[z] - this.options.area - pos[z]) * this.options.velocity;
       else if (this.page[z] + this.options.area > (size[z] + pos[z]) && scroll[z] + size[z] != scrollSize[z])
         change[z] = (this.page[z] - size[z] + this.options.area - pos[z]) * this.options.velocity;
     }
     if (change.y || change.x) this.fireEvent('change', [scroll.x + change.x, scroll.y + change.y]);
   }
 });


imgArray = new Array();
function preload(img) {
  /*if (isNull(imgArray[img])) {//not preloaded yet
    imgArray[img] = new Image();
    imgArray[img].src = img;
  }*/
}

function showDialog(step)
{
  var visible;
  var dialog;

  if(step > 0) {
    objectDesignerClose();
  }

  for(var i = 0; i < 5; i++) {

    img = $('designer-nav-step-' + (i + 1));
    cbx = $('designer-nav-step-' + (i + 1) + '-value');
    dialog = $('designer-dlg-step' + (i + 1));
    if(dialog == null)
      continue;
    visible = dialog.getStyle('display') == "block"; 
  
    // fade in
    if(!visible && step == i + 1) {
      $(img).setAttribute('class', 'designer-nav-img-step-' + step + '-active');
      $(cbx).setAttribute('class', 'designer-nav-combo-active');
      $(dialog).setStyle('display', 'block');
      $(dialog).fade('in');
    }  
    // fade out
    else if(visible) {
      $(img).setAttribute('class', 'designer-nav-img-step-' + (i + 1) + '-inactive');
      $(cbx).setAttribute('class', 'designer-nav-combo-inactive');
      $(dialog).setStyle('display', 'none');
      $(dialog).fade('out');
    }
  }
}


var up = null;




window.addEvent('domready', function() {

  var dialog;
  for(var i = 0; i < 5; i++) {
    dialog = $('designer-dlg-step' + (i + 1));
    if(!dialog)
      continue;

    $(dialog).setStyle('display', 'none');
    $(dialog).fade('out');
  }

  var show = 0;
  if($('please-select-design') != null) {
    showDialog(3);
  }

  var scroller = new Scroller('container', {area: 100, velocity: .4});
  $('container').addEvent('mouseenter', scroller.start.bind(scroller));
  $('container').addEvent('mouseleave', scroller.stop.bind(scroller));


  var scrollLeft = function() {

    var size = $('container').getSize(),
        scroll = $('container').getScroll(),
        pos = $('container').getOffsets(),
        scrollSize = $('container').getScrollSize(),
        change = {'x': 0, 'y': 0};

    if(scroll.x > 0) {
      var to = scroll.x - 20;
      if(to < 0)
        to = 0;
      $('container').scrollTo(to, scroll.y);
    }
  }

  var timerLeft;
  var startScrollLeft = function(event) {
    if(!timerLeft)
      timerLeft = scrollLeft.periodical(Math.round(1000 / 50));
  };

  var stopScrollLeft = function(event) {
    timerLeft = $clear(timerLeft);
  }


  $('slider-button-left').addEvent('mouseenter', startScrollLeft);
  $('slider-button-left').addEvent('mouseleave', stopScrollLeft);


  var scrollRight = function() {

    var size = $('container').getSize(),
        scroll = $('container').getScroll(),
        pos = $('container').getOffsets(),
        scrollSize = $('container').getScrollSize(),
        change = {'x': 0, 'y': 0};

    if(scroll.x < (scrollSize.x - size.x)) {
      //fireEvent('change', [scroll.x + 39, scroll.y]);
      $('container').scrollTo(scroll.x + 20, scroll.y);
    }
  }

  var timerRight;
  var startScrollRight = function(event) {
    if(!timerRight)
      timerRight = scrollRight.periodical(Math.round(1000 / 50));
  };

  var stopScrollRight = function(event) {
    timerRight = $clear(timerRight);
  }


  $('slider-button-right').addEvent('mouseenter', startScrollRight);
  $('slider-button-right').addEvent('mouseleave', stopScrollRight);





  var dialog = $('designer-dlg-object-designer');
  var bg = $('designer-dlg-object-designer-bg');
  if(bg != null && dialog != null) {
    $(bg).setStyle('display', 'none');
    $(bg).fade('out');
    $(dialog).setStyle('display', 'none');
    $(dialog).fade('out');
  }
});



function showPreviewSpinner(element) {

  if(!element && !$('designer-preview'))
    return;

  var el;
  if(element)
    el = element;
  else
    el = $('designer-preview');

  var msg = $('msg-create-preview-image').innerHTML;
  el.innerHTML = "<div style=\"width: 250px; margin-left: auto; margin-right: auto; padding-top: 100px; text-align: center;\"><img src=\"fileadmin/templates/img/spinner_2.gif\" alt=\"spinner\" /><br /><p><em>" + msg + "</em></p></div>";
}

function showCartSpinner() {
  if($('shopping-cart'))
    $('shopping-cart').innerHTML = "<div style=\"width: 250px; margin-left: auto; margin-right: auto; padding-top: 100px; text-align: center;\"><img src=\"fileadmin/templates/img/spinner_2.gif\" alt=\"spinner\" /><br /><p><em>&nbsp;</em></p></div>";
}


function buildRequest() {
  var L = $('designer-nav-hidden-lang').value;
  var result = 'eID=tx_artido4kids_ajax&L=' + L;

  if($('designer-nav-hidden-session') != null) {
    var session = $('designer-nav-hidden-session').value;
    result += '&FE_SESSION_KEY=' + session;
  }

  return result;
}

var previewRequest = null;

function refreshPreview() {

  if(previewRequest) {
    previewRequest.cancel();
    delete previewRequest;
    previewRequest = null;
  }

  var req;
  previewRequest = req = new Request.HTML({
		method: 'post',
		url: 'index.php',
		data: { 'do' : '1' },
		onRequest: function() { showPreviewSpinner(); },
		update: $('designer-preview'),


    onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
      previewRequest = null;

      var div = $('designer-preview').getElementById('preview-image-div');      
      var url = div.getStyle('background-image');
      url = url.substring(4, url.length - 1);
      preload(url);
    }
	}).send(buildRequest() + '&tx_artido4kids_ajax[action]=preview');
}

function refreshNavigation(refreshPre, step, show, productDetails) {

  var updateEl = $('designer-nav-body');
  if(step > 0)
    updateEl = $('designer-nav-step-frame' + step);

  var isActive = false;
  if(step == 0) {
    isActive = $('designer-nav-step-1').getAttribute('class') == "designer-nav-img-step-1-active";
  }

  if(show == undefined)
    show = 0;

  if(productDetails == undefined)
    productDetails = false;

  var params = '';
  if(productDetails) {
    params = '&tx_artido4kids_ajax[details]=1';
  }

  var req = new Request.HTML({
		method: 'post',
		url: 'index.php',
		data: { 'do' : '1' },
		onRequest: function() { },
		update: updateEl,
		onComplete: function(response) { 
      if(refreshPre == true) {
        refreshPreview();
      }

      if(step == 0 && isActive) {
        var img = $('designer-nav-step-1');
        var cbx = $('designer-nav-step-1-value');
        $(img).setAttribute('class', 'designer-nav-img-step-1-active');
        $(cbx).setAttribute('class', 'designer-nav-combo-active');
      }

      if(show != null && show > 0)
        showDialog(show);


      if(productDetails) {
        $('designer-nav-step-2-value').innerHTML = "";
        $('designer-nav-step-4-value').innerHTML = "";
        $('designer-nav-step-5-value').innerHTML = "";
      }

    }
	}).send(buildRequest() + '&tx_artido4kids_ajax[navigation]=1&tx_artido4kids_ajax[step]=' + step + params);
}


/*function openPic(url,winName,winParams) {
  var theWindow = window.open(url,winName,winParams);
  if (theWindow)  {theWindow.focus();}
}*/


function productDetails(product, name) {

  showDialog(0);

  var req = new Request.HTML({
    method: 'post',
    url: 'index.php',
    data: { 'do' : '1' },
    onRequest: function() { },
    update: $('content'),
    onComplete: function(response) {

      // setup slimbox
      Slimbox.options = {};

      var links = $$("a").filter(function(el) {
        return el.rel && el.rel.test(/^lightbox/i);
      });
      $$(links).slimbox(Slimbox.options, null, function(el) {
        return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
      });


      refreshNavigation(false, 0, 0, true);
    }
  }).send(buildRequest() + '&tx_artido4kids_ajax[action]=product-details&tx_artido4kids_ajax[product]=' + product);
}

function productDesigner(product, format) {
  var req = new Request.HTML({
    method: 'post',
    url: 'index.php',
    data: { 'do' : '1' },
    onRequest: function() { },
    update: $('content'),
    onComplete: function(response) {
      var show = 0;
      if($('please-select-design') != null)
        show = 3;
      refreshNavigation(false, 0, show);
    }
  }).send(buildRequest() + '&tx_artido4kids_ajax[action]=product-designer&tx_artido4kids_ajax[product]=' + product + '&tx_artido4kids_ajax[format]=' + format);
}

function setProductStage (product, value) {

  var req = new Request.HTML({
    method: 'post',
    url: 'index.php',
    data: { 'do' : '1' },
    onRequest: function() { },
    update: $('designer-stage'),
    onComplete: function(response) { refreshNavigation(false, 0); }
  }).send(buildRequest() + '&tx_artido4kids_ajax[action]=designer-stage&tx_artido4kids_ajax[product]=' + product);

  $('designer-nav-step-1-value').innerHTML = "<div>" + value + "</div>";
}

function setFormat (format, value) {

	var req = new Request.HTML({
		method: 'post',
		url: 'index.php',
		data: { 'do' : '1' },
		onRequest: function() { showPreviewSpinner(); },
		update: $('designer-info'),
		onComplete: function(response) {
      showDialog(2);
      refreshNavigation(true, 5);
    }
	}).send(buildRequest() + '&tx_artido4kids_ajax[action]=product-info&tx_artido4kids_ajax[format]=' + format);

	$('designer-nav-step-2-value').innerHTML = "<div>" + value + "</div>";
}


var imgMouseOver = function (event) {

	var id = undefined;
		
	if(window.event && window.event.srcElement) {
		id = window.event.srcElement.id;
	}
	else if(event && event.target) {
		id = event.target.get('id');
	}
		
	if(!id)
		return;

  
  var color = id.substr(id.lastIndexOf("-") + 1);
  id = id.substr(0, id.lastIndexOf("-"));
  var design = id.substr(id.lastIndexOf("-") + 1);


  // move rapport dialog
  var dlg = $('design-preview-dlg-' + design);
  if(dlg == undefined) {
    return;
  }

	var dialog = $('designer-dlg-step3');
	var pos = dialog.getPosition();

	/*if(window.event) {
		var msg = 'posx: ' + pos.x + ' posy: ' + pos.y + '\n';
		msg += 'layerx: ' + window.event.layerX + ' layery: ' + window.event.layerY + '\n';
		msg += 'pageX: ' + window.event.pageX + ' pageY: ' + window.event.pageY + '\n';
		msg += 'screenX: ' + window.event.screenX + ' screenY: ' + window.event.screenY + '\n\n';
		msg += 'dlg left: ' + dlg.getStyle('left') + ' dlg top: ' + dlg.getStyle('top');
		dlg.innerHTML = msg;
  }*/

	var moveX = undefined;
	if(event && event.layerX)
		moveX = event.layerX;

	var moveY = undefined;
	if(event && event.layerY)
		moveY = event.layerY;
	
	if(event && (moveX == undefined || moveY == undefined)) {
		moveX = event.pageX - pos.x;
		moveY = event.pageY - pos.y;
	}

	if(moveX && moveY) {
		dlg.setStyle('left', moveX + 20);
		dlg.setStyle('top', moveY - 10);
  }
  else {
		dlg.setStyle('left', 500);
		dlg.setStyle('top', 200);  
  }
}


function showDesignColor(design, color) {

  var div = $('design-entry-img-' +  design);
  if(div == undefined)
    return;

  // display design image
  var imgs = div.getElements('img');
  var active = "design-entry-img-img-" + color;

  var img = undefined;
  for(var i = 0; i < imgs.length; i++) {
    img = imgs[i];
    if(img.getAttribute('id') == active) {
      img.setStyle('display', 'block');
    }
    else {
      img.setStyle('display', 'none');
    }
  }


  // show rapport dialog
  var dlg = $('design-preview-dlg-' + design);
  if(dlg == undefined)
    return;

	if(dlg.getStyle('display') == 'none') {
		dlg.setStyle('left', -300);
		dlg.setStyle('top', -300);
		dlg.setStyle('display', 'block');
  }


  active = "design-preview-img-" + color;

  imgs = dlg.getElement('div');
  imgs = imgs.getElements('img');
  var img = undefined;
  for(i = 0; i < imgs.length; i++) {
    img = imgs[i];

    if(img.getAttribute('id') == active) {
      img.setStyle('display', 'block');
    }
    else {
      img.setStyle('display', 'none');
    }
  }


  // add mousemove event
  var tmp = $('design-entry-color-' + design + '-' + color);
  if(tmp == undefined)
    return;
  tmp.onmousemove = imgMouseOver;
  //tmp.addEvent('mousemove', imgMouseOver);
}


function closeDesignPreview(design, color) {

  // close dialog
  var dlg = $('design-preview-dlg-' + design);
  if(dlg == undefined)
    return;

  dlg.setStyle('display', 'none');


  // remove mousemove event
  var tmp = $('design-entry-color-' + design + '-' + color);
  if(tmp == undefined)
    return;
  tmp.onmousemove = null;
  //tmp.removeEvent('mousemove', imgMouseOver);  
}

function setDesign (design, color, value) {

	var req = new Request.HTML({
		method: 'post',
		url: 'index.php',
		data: { 'do' : '1' },
		onRequest: function() { showPreviewSpinner(); },
		update: $('designer-info'),
		onComplete: function(response) {
      showDialog(3);
      refreshNavigation(true, 5);
    }
	}).send(buildRequest() + '&tx_artido4kids_ajax[action]=product-info&tx_artido4kids_ajax[design]=' + design + '&tx_artido4kids_ajax[design-color]=' + color);

	$('designer-nav-step-3-value').innerHTML = "<div>" + value + "</div>";

}



function setQuality(quality, value, refreshPre) {

	var req = new Request.HTML({
		method: 'post',
		url: 'index.php',
		data: { 'do' : '1' },
		onRequest: function() {
      if(refreshPre) {
        showPreviewSpinner();
      }
    },
		update: $('designer-info'),
		onComplete: function(response) {
      showDialog(4);
      if(refreshPre) {
        refreshPreview();
      }
    }
	}).send(buildRequest() + '&tx_artido4kids_ajax[action]=product-info&tx_artido4kids_ajax[quality]=' + quality);

	$('designer-nav-step-4-value').innerHTML = "<div>" + value + "</div>";
}


function dlgIndividualization(numFields) {

  showDialog(5); 

  var dialog = $('designer-dlg-step5');
  var visible = dialog.getStyle('display') == "block"; 
  if(visible) {

	  for(var i = 0; i < numFields; i++) {
      field = $('object-field-' + i);

      if(!field)
        continue;
	
      var morph = new Fx.Morph($(field), {
        duration: 1500,
        onComplete: function() {

          var left = this.element.getStyle('left').toInt() + 2;
          var top = this.element.getStyle('top').toInt() + 2;

					/*this.element.set('morph', {duration: 'long', transition: 'bounce:out'});
          this.element.morph({ border: '1px solid #FF0000' });*/

					var morphOut = new Fx.Morph(this.element, {
						duration: 1500
					});
					
					morphOut.start({
		        'border': '0px solid #FF0000',
		        'left' : left,
		        'top' : top
		      });
					
        }
      });

      var left = $(field).getStyle('left').toInt() - 2;
      var top = $(field).getStyle('top').toInt() -2;
      morph.start({
        'border': '3px solid #FF0000',
        'left' : left,
        'top' : top
      });

    }
  }
}


          //this.element.setStyle('background-color', 'transparent');    
					/*,  solid #FF0000'
            'left' : left,
            'top' : top */



function previewShow(id, view) {

	var req = new Request.HTML({
		method: 'post',
		url: 'index.php',
		data: { 'do' : '1' },
		onRequest: function() {
      showPreviewSpinner($('preview-stage-' + id));
      //document.body.style.cursor = 'wait';
    },
		update: $('preview-stage-' + id),
		onComplete: function(response) {
      //document.body.style.cursor = 'wait';
      //document.body.style.cursor = 'default';
    }
	}).send(buildRequest() + '&tx_artido4kids_ajax[action]=preview&tx_artido4kids_ajax[base-id]=' + id + '&tx_artido4kids_ajax[view]=' + view);
}




var imageOffsetLeft = 0;
var imageOffsetTop = 0;

function refreshObjectDesigner(type) {

  var id = $('designer-dlg-object-object-id').value;
  imageOffsetLeft = 0;
  imageOffsetTop = 0;

	var req = new Request.HTML({
		method: 'post',
		url: 'index.php',
		onRequest: function() {
      $('designer-dlg-object-designer-content').innerHTML = "<div style=\"width: 100px; margin-left: auto; margin-right: auto; padding-top: 220px; text-align: center;\"><img src=\"fileadmin/templates/img/spinner_2.gif\" alt=\"spinner\" /></div>";
    },
		update: $('designer-dlg-object-designer-content'),
		onComplete: function(response) {

			// Bildpositionierung
      var dragger = $('drag-image');
      if(dragger) {
        var left = 0;
        var top = 0;

        var scale = $('image-scale').value;

        var areaWidth = $('image-area').getStyle('width').toInt();
        var areaHeight = $('image-area').getStyle('height').toInt();
        var imgWidth = dragger.getStyle('width').toInt();
        var imgHeight = dragger.getStyle('height').toInt();

        var limitLeft = (imgWidth - areaWidth) * -1;
        var limitTop = (imgHeight - areaHeight) * -1;

        var draggableOptions = {

            limit: { x: [limitLeft, 0], y: [limitTop, 0] },

            onStart:function() {
              left = dragger.getStyle('left').toInt();
              top = dragger.getStyle('top').toInt();
            },

            onDrag: function(event) {
              var leftOffset = dragger.getStyle('left').toInt();
              var topOffset = dragger.getStyle('top').toInt();

              $('image-offset-left').innerHTML = leftOffset;
              $('image-offset-top').innerHTML = topOffset;
            },

            onComplete:function() {
              var newLeft = dragger.getStyle('left').toInt();
              var newTop = dragger.getStyle('top').toInt();

              imageOffsetLeft = Math.ceil(newLeft * scale);
              imageOffsetTop = Math.ceil(newTop * scale);
            }
        };
        dragger.makeDraggable(draggableOptions);
      } // if(drager)
      
      
      // Texteingabe
      var image = $('object-designer-text-editor');
      if(image && $('text-input') != undefined) {
				if($('text-input').value.length > 0) {
	  	   	//image.getElement("form").submit();
          createTextPreview(true);
				}
	   	}
      
    }
	}).send(buildRequest() + '&tx_artido4kids_ajax[action]=object-designer&tx_artido4kids_ajax[object-id]=' + id + '&tx_artido4kids_ajax[type]=' + type);
}


var previewMouseOver = function (event) {
  document.body.style.cursor = 'crosshair'; //'move';
  $(event.target).setStyle('border-color', 'red');

  var pos = $(event.target).getPosition();
  var x = event.client.x - pos.x;
  var y = event.client.y - pos.y;

  var left = 0;
  var top = 0;
  if(typeof window.pageXOffset != 'undefined') {
    left = window.pageXOffset;
    top = window.pageYOffset;
  }
  else {
    var obj = window.document.documentElement; // document.body
    left = parseInt(obj.scrollLeft);
    top = parseInt(obj.scrollTop);
  }
  x = x + left;
  y = y + top;


  var id = event.target.get('id');
  id = id.substr(id.lastIndexOf("-") + 1);
	var img = $('preview-zoom-image-' + id);
	var dlg = $('product-preview-zoom-dlg-' + id);
  var content = dlg.getElement("div");

	var scrollX = (x * 3) - 240;
	var scrollY = (y * 3) - 240;
	if(scrollX < 0)
		scrollX = 0;
	if(scrollY < 0)
		scrollY = 0;

	content.scrollTo(scrollX, scrollY);
}

var previewMouseOut = function (event) {
  $(event.target).setStyle('border-color', 'green');
  //event.stop();
  document.body.style.cursor = 'default';
}

function zoom(id, view) {
  var dlg = $('product-preview-zoom-dlg-' + id);
  var preview = $('product-preview-img-' + id);
  if(dlg == null || preview == null)
    return;

  var visible = $(dlg).getStyle('display') == "block";

  if(visible) {

    var span = $('product-preview-zoom-' + id).getElement('span');
    span.setStyle('display', 'none');

    $(dlg).fade('out');
    $(dlg).setStyle('display', 'none');

    preview.setStyle('display', 'none');
    preview.removeEvent('mousemove', previewMouseOver); // mouseover
    preview.removeEvent('mouseout', previewMouseOut); // mouseout
    return;
  }

  var content = dlg.getElement("div");

  var req = new Request.HTML({
    method: 'post',
    url: 'index.php',
    data: { 'do' : '1' },
    onRequest: function() {
      $(content).innerHTML = "<img src=\"fileadmin/templates/img/spinner_2.gif\" alt=\"spinner\" />";
      $(dlg).setStyle('display', 'block');
      $(dlg).fade('in');
    },
    update: content,
    onComplete: function(response) {
      var span = $('product-preview-zoom-' + id).getElement('span');
      span.setStyle('display', 'inline');

      preview.setStyle('display', 'block');
      //preview.setStyle('z-index', '50');

      preview.addEvent('mousemove', previewMouseOver);
      preview.addEvent('mouseout', previewMouseOut);      
    }
  }).send(buildRequest() + '&tx_artido4kids_ajax[action]=zoom&tx_artido4kids_ajax[id]=' + id + '&tx_artido4kids_ajax[view]=' + view);

}


function getPageSizeWithScroll(){
  if (window.innerHeight && window.scrollMaxY) {// Firefox
    yWithScroll = window.innerHeight + window.scrollMaxY;
    xWithScroll = window.innerWidth + window.scrollMaxX;
  } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
    yWithScroll = document.body.scrollHeight;
    xWithScroll = document.body.scrollWidth;
  } else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
    yWithScroll = document.body.offsetHeight;
    xWithScroll = document.body.offsetWidth;
    }
  arrayPageSizeWithScroll = new Array(xWithScroll,yWithScroll);
  //alert( 'The height is ' + yWithScroll + ' and the width is ' + xWithScroll );
  return arrayPageSizeWithScroll;
}



function help() {

  showDialog(0);

  var dialog = $('dlg-designer-help');
  var bg = $('dlg-designer-help-bg');
  var visible = $(bg).getStyle('display') == "block";

  var width = 0;
  var height = 0;
  if(typeof window.innerWidth != 'undefined') {
    width = window.innerWidth;
    height = window.innerHeight;
  }
  else {
    var obj = window.document.documentElement; // document.body
    width = parseInt(obj.clientWidth);
    height = parseInt(obj.clientHeight);
  }


  var left = 0;
  var top = 0;
  if(typeof window.pageXOffset != 'undefined') {
    left = window.pageXOffset;
    top = window.pageYOffset;
  }
  else {
    var obj = window.document.documentElement; // document.body
    left = parseInt(obj.scrollLeft);
    top = parseInt(obj.scrollTop);
  }

  var posLeft = Math.ceil(width / 2);
  var posTop = Math.ceil(height / 2);


  var dlgWidth = $(dialog).getStyle('width').toInt();
  if(dlgWidth == 0)
    dlgWidth = 600;

  var dlgHeight = $(dialog).getStyle('height').toInt();
  if(dlgHeight == 0)
    dlgHeight = 520;

  posLeft -= Math.ceil(dlgWidth / 2);
  posTop -= Math.ceil(dlgHeight / 2);


  var size = getPageSizeWithScroll();
  if(!visible) {
    $('designer-nav').setStyle('z-index', 0);


    $(dialog).setStyle('left', posLeft);
    $(dialog).setStyle('top', posTop + top);

    $(bg).setStyle('height', size[1]); //height + top);
		$(bg).setStyle('width', width); //height + top);
    $(bg).setStyle('top', 0);

    $(bg).setStyle('display', 'block');
    $(bg).fade(0.7);
    $(dialog).setStyle('display', 'block');
    $(dialog).fade('in');
  }
}

function helpClose() {

  var dialog = $('dlg-designer-help');
  var bg = $('dlg-designer-help-bg');
  if(bg == null || dialog == null)
    return;

  $('designer-nav').setStyle('z-index', 10);
  $(bg).setStyle('display', 'none');
  $(bg).fade('out');
  $(dialog).setStyle('display', 'none');
  $(dialog).fade('out');
}

function objectDesigner(id, name) {

  showDialog(0);
  var dialog = $('designer-dlg-object-designer');

  var bg = $('designer-dlg-object-designer-bg');
  var visible = $(bg).getStyle('display') == "block";

  var width = 0;
  var height = 0;
  if(typeof window.innerWidth != 'undefined') {
    width = window.innerWidth;
    height = window.innerHeight;
  }
  else {
    var obj = window.document.documentElement; // document.body
    width = parseInt(obj.clientWidth);
    height = parseInt(obj.clientHeight);
  }

  var left = 0;
  var top = 0;
  if(typeof window.pageXOffset != 'undefined') {
    left = window.pageXOffset;
    top = window.pageYOffset;
  }
  else {
    var obj = window.document.documentElement; // document.body
    left = parseInt(obj.scrollLeft);
    top = parseInt(obj.scrollTop);
  }

  var posLeft = Math.ceil(width / 2);
  var posTop = Math.ceil(height / 2);


	var dlgWidth = $(dialog).getStyle('width').toInt();
	if(dlgWidth == 0)
		dlgWidth = 600;

	var dlgHeight = $(dialog).getStyle('height').toInt();
	if(dlgHeight == 0)
		dlgHeight = 520;

  posLeft -= Math.ceil(dlgWidth / 2);
  posTop -= Math.ceil(dlgHeight / 2);

  var size = getPageSizeWithScroll();

  if(!visible) {	
    $('designer-nav').setStyle('z-index', 0);

		$(dialog).setStyle('left', posLeft);
		$(dialog).setStyle('top', posTop + top);

		$(bg).setStyle('height', size[1]); //height + top);
		$(bg).setStyle('width', width);
		$(bg).setStyle('top', 0);

    $(bg).setStyle('display', 'block');
    $(bg).fade(0.7);
    $(dialog).setStyle('display', 'block');
    $(dialog).fade('in');
  }

  $('designer-dlg-object-object-id').value = id;
  $('designer-dlg-object-designer-object-name').innerHTML = name;
  refreshObjectDesigner(0); 
}

function objectDesignerClose(refreshNavi) {

  var dialog = $('designer-dlg-object-designer');
  var bg = $('designer-dlg-object-designer-bg');
  if(bg == null || dialog == null)
    return;

  var id = $('designer-dlg-object-object-id').value;

  if(refreshNavi == undefined)
    refreshNavi = false;

  var req = new Request.HTML({
    method: 'post',
    url: 'index.php',
    data: { 'do' : '1' },
    onRequest: function() { },
    onComplete: function(response) {
      if(refreshNavi) {
        refreshNavigation(false, 5);
      }
    }
  }).send(buildRequest() + '&tx_artido4kids_ajax[action]=designer-close&tx_artido4kids_ajax[object-id]=' + id);

  $('designer-nav').setStyle('z-index', 10);
  $(bg).setStyle('display', 'none');
  $(bg).fade('out');
  $(dialog).setStyle('display', 'none');
  $(dialog).fade('out');
}

function checkTextInput() {
  /*if($('text-input') == undefined)
    return false;
  return ($('text-input').value.length > 0);*/
  return true;
}

var previewRequest = undefined;
var previewRequestRunning = false;
var lastText = "";

function createTextPreview(force, submitTxt) {

  if(!force && $('text-input').value == lastText)
    return;

  lastText = $('text-input').value;

  if(previewRequestRunning)
    previewRequest.cancel();

  var params = '&tx_artido4kids_ajax[object-id]=' + $('text-editor-object-id').value;
  params += '&tx_artido4kids_ajax[text]=' + $('text-input').value;

  
  var rbs = $('font-family-selection').getElements('input');
  for(var i = 0; i < rbs.length; i++) {
    if(rbs[i].checked) {
      params += ('&tx_artido4kids_ajax[font-id]=' + rbs[i].getAttribute('value'));
      break;
    }
  }

  rbs = $('font-color-selection').getElements('input');
  for(var i = 0; i < rbs.length; i++) {
    if(rbs[i].checked) {
      params += ('&tx_artido4kids_ajax[font-color]=' + rbs[i].getAttribute('value'));
      break;
    }
  }

  previewRequest = new Request.HTML({
    method: 'post',
    url: 'index.php',
    data: { 'do' : '1' },
    onRequest: function() {
      document.body.style.cursor = 'wait';
      previewRequestRunning = true;
      $('text-input').setProperty('disabled', 'disabled'); //disabled = true;
    },
    update: $('text-preview'),
    onComplete: function(response) {
      previewRequestRunning = false;
      $('text-input').removeProperty('disabled'); //disabled = false;
      document.body.style.cursor = 'default';

      if(submitTxt != undefined && submitTxt) {
        objectDesignerSubmit(false);
      }
    }
  }).send(buildRequest() + '&tx_artido4kids_ajax[action]=text-input' + params);
}

function objectDesignerSubmit(createTxtPreview) {

  var request = "";
  var id = $('designer-dlg-object-object-id').value;
  var objType = $('designer-dlg-object-selected-type').value.toInt();

  // bildupload
  if(objType == 2) {   

    var uploadOk = ($('image-upload-ok') != null && $('image-upload-ok').value.toInt() == 1);

    if(uploadOk)
      request = '&tx_artido4kids_ajax[left]=' + imageOffsetLeft + '&tx_artido4kids_ajax[top]=' + imageOffsetTop;
    else
      objType = 0;
  }

  // texteingabe
  else if(objType == 3) {
    if(createTxtPreview == undefined || createTxtPreview) {
      createTextPreview(true, true);
      return;
    }
  }


  var req = new Request.HTML({
    method: 'post',
    url: 'index.php',
    data: { 'do' : '1' },
    onRequest: function() {
      showPreviewSpinner();
    },
    update: $('designer-stage'),
    onComplete: function(response) {
      objectDesignerClose(true);
    }
  }).send(buildRequest() + '&tx_artido4kids_ajax[action]=set-object&tx_artido4kids_ajax[object-id]=' + id + '&tx_artido4kids_ajax[type]=' + objType + request);
}


function imageRemove() {

  var id = $('designer-dlg-object-object-id').value;

  var req = new Request.HTML({
    method: 'post',
    url: 'index.php',
    data: { 'do' : '1' },
    onRequest: function() { },
    update: $('designer-dlg-object-designer-content'),
    onComplete: function(response) { }
  }).send(buildRequest() + '&tx_artido4kids_ajax[action]=image-remove&tx_artido4kids_ajax[object-id]=' + id);
}




function showProgressDlg() {

  var dialog = $('designer-dlg-progress');
  var bg = $('designer-dlg-progress-bg');
  var visible = $(bg).getStyle('display') == "block";

  var width = 0;
  var height = 0;
  if(typeof window.innerWidth != 'undefined') {
    width = window.innerWidth;
    height = window.innerHeight;
  }
  else {
    var obj = window.document.documentElement; // document.body
    width = parseInt(obj.clientWidth);
    height = parseInt(obj.clientHeight);
  }

  var left = 0;
  var top = 0;
  if(typeof window.pageXOffset != 'undefined') {
    left = window.pageXOffset;
    top = window.pageYOffset;
  }
  else {
    var obj = window.document.documentElement; // document.body
    left = parseInt(obj.scrollLeft);
    top = parseInt(obj.scrollTop);
  }

  var posLeft = Math.ceil(width / 2);
  var posTop = Math.ceil(height / 2);


  var dlgWidth = $(dialog).getStyle('width').toInt();
  if(dlgWidth == 0)
    dlgWidth = 600;

  var dlgHeight = $(dialog).getStyle('height').toInt();
  if(dlgHeight == 0)
    dlgHeight = 520;

  posLeft -= Math.ceil(dlgWidth / 2);
  posTop -= Math.ceil(dlgHeight / 2);

  var size = getPageSizeWithScroll();

  if(!visible) {
    $('designer-nav').setStyle('z-index', 0);

    $(dialog).setStyle('left', posLeft);
    $(dialog).setStyle('top', posTop + top);

    $(bg).setStyle('height', size[1]); //height + top);
    $(bg).setStyle('width', width);
    $(bg).setStyle('top', 0);

    $(bg).setStyle('display', 'block');
    $(bg).fade(0.7);
    $(dialog).setStyle('display', 'block');
    $(dialog).fade('in');
  }
}

function closeProgressDlg() {
  var dialog = $('designer-dlg-progress');
  var bg = $('designer-dlg-progressr-bg');
  if(bg == null || dialog == null)
    return;

  $('designer-nav').setStyle('z-index', 10);
  $(bg).setStyle('display', 'none');
  $(bg).fade('out');
  $(dialog).setStyle('display', 'none');
  $(dialog).fade('out');
}

var complete = false;

function getProcessStatus() {

  /*if(!$('process-status'))
    return;*/
  if(complete || !$('designer-dlg-progress-status'))
    return;

  var dialog = $('designer-dlg-progress');
  var bg = $('designer-dlg-progress-bg');
  var visible = $(bg).getStyle('display') == "block";
  if(!visible)
    return;
  

  var req = new Request.HTML({
    method: 'post',
    url: 'index.php',
    data: { 'do' : '1' },
    onRequest: function() {  },
    //update: $('process-status'),
    update: $('designer-dlg-progress-status'),
    onComplete: function(response) {
      window.setTimeout(getProcessStatus, 1000);
    }
  }).send(buildRequest() + '&tx_artido4kids_ajax[cart]=1&tx_artido4kids_ajax[action]=get-status');
}


function addToCart() {

  showDialog(0);
  complete = false;

	var req = new Request.HTML({
		method: 'post',
		url: 'index.php',
		data: { 'do' : '1' },
		onRequest: function() {

      showProgressDlg();

      /*var msg = $('msg-create-production-image').innerHTML;
      $('designer-stage').innerHTML = "<div style=\"width: 400px; margin-left: auto; margin-right: auto; padding-top: 100px; text-align: center;\"><img src=\"fileadmin/templates/img/spinner_2.gif\" alt=\"spinner\" /><br /><p><em>" + msg + "</em></p><div id=\"process-status\"></div></div>";*/
    },
		update: $('designer-stage'),
		onComplete: function(response) {
      closeProgressDlg();
      complete = true;
      refreshNavigation(false, 0);
    }
	}).send(buildRequest() + '&tx_artido4kids_ajax[cart]=1&tx_artido4kids_ajax[action]=add');

  window.setTimeout(getProcessStatus, 200);
}

function removeItem(idx) {

  if(confirm("Wirklich löschen?") == false)
    return;

  var req = new Request.HTML({
    method: 'post',
    url: 'index.php',
    data: { 'do' : '1' },
    onRequest: function() { showCartSpinner(); },
    update: $('shopping-cart'),
    onComplete: function(response) { }
  }).send(buildRequest() + '&tx_artido4kids_ajax[cart]=1&tx_artido4kids_ajax[action]=remove&tx_artido4kids_ajax[idx]=' + idx);
}

function setQuantity(idx, select) {
  var value = select.options[select.options.selectedIndex].value;

  var req = new Request.HTML({
		method: 'post',
		url: 'index.php',
		data: { 'do' : '1' },
		onRequest: function() { showCartSpinner(); },     
		update: $('shopping-cart'),
		onComplete: function(response) { }
	}).send(buildRequest() + '&tx_artido4kids_ajax[cart]=1&tx_artido4kids_ajax[action]=quantity&tx_artido4kids_ajax[idx]=' + idx + '&tx_artido4kids_ajax[quantity]=' + value);
}



function setupOrderForm() {
   var myIFrame = document.getElementById("order-form");
   if (myIFrame.addEventListener) {
     myIFrame.addEventListener('close', temp, false);
   }else if (myIFrame.attachEvent) {
     myIFrame.attachEvent ('onclose',temp);
   }else{
     myIFrame.onclose=temp();
   }
}

function checkout() {

	var req = new Request.HTML({
		method: 'post',
		url: 'index.php',
		noCache: true,
		data: { 'do' : '1' },
    update: $('order-form'),
		onRequest: function() { 
      $('shopping-cart').innerHTML = "Warenkorb wird erzeugt";
    },
		onComplete: function(response) { 
      $('shopping-cart').setStyle('display', 'none');
      $('order-form').setStyle('display', 'block');
    }
	}).send(buildRequest() + '&tx_artido4kids_ajax[cart]=1&tx_artido4kids_ajax[action]=finalize');
}



function uberUpload(id) {

  var objId = $('designer-dlg-object-object-id').value;

  var req = new Request.HTML({
    method: 'post',
    url: 'index.php',
    noCache: true,
    data: { 'do' : '1' },
    onRequest: function() { },
    //update: $('designer-dlg-object-designer-content'),
    onComplete: function(response) {
      refreshObjectDesigner(2);
    }
  }).send(buildRequest() + '&tx_artido4kids_ajax[action]=img-upload&tx_artido4kids_ajax[img-id]=' + id + '&tx_artido4kids_ajax[object-id]=' + objId);
}

function formatSelection(id) {
  var dlg = $('product-matrix-format-selection-' + id);
  if(dlg == undefined)
    return;

  $(dlg).setStyle('display', 'block');

  var max = $('product-id-max').value;
  for(var i = 0; i < max; i++) {
    if((i + 1) == id)
      continue;

    var dlg = $('product-matrix-format-selection-' + (i + 1));
    if(dlg == undefined)
      continue;

    $(dlg).setStyle('display', 'none');
  }
}