function ie7AddSpans() {
}

var overlayHandler = {
			open: function(url, fn) {
				$.ajax({
					"url": url,
					"type": "POST",
                    "cache": false,
					"success": function(qdata){
						overlayHandler.close();
						overlayHandler.addDimmer();
						$('<div id="overlay" class="beforeFix afterFix"><div class="close"></div><div class="overlayBgTop"></div><div class="overlayBgMiddle"></div><div class="overlayBgBottom"></div></div>').appendTo('body');
						$('#overlay .overlayBgMiddle').append(qdata);
						window.scrollTo(0, 150);
						
						$('#overlay .close').click(function() {
							overlayHandler.close();
						});
						
						if(fn) fn(qdata);
						$('#overlay').trigger('loaded');
                        ie7AddSpans();
					},
					"data": {
						'requestType': 'ajax'
					}
				});
			},
			close: function() {
				$('.plupload').remove();
				$('#overlay').remove();
				$('#overlayDimmer').remove();
			},
			addDimmer: function(dontCloseOnClick) {
				$('<div id="overlayDimmer"></div>').appendTo('body');
				if(!dontCloseOnClick) $('#overlayDimmer').click(function() {
					overlayHandler.close();
				});
			}
		};

function refreshPatternOverlayPositions() {
    $('#overlay .description').each(function() {
        var position = $(this).parent().position();
        $(this).css('margin-top', position.top+43);
        $(this).removeClass('left').removeClass('right');
        if(position.left < 100) $(this).addClass('left');
        if(position.left > 500) $(this).addClass('right');
    });
}

$(document).ready(function() {

    function isSinglePattern() {
        var singlePatternInput = $('#singlePatternInput');
        return (singlePatternInput.length < 1 || singlePatternInput.prop('checked'));
    }

	$('.textareaLimiter').live('focus', function() {
		$(this).data('textareaLimiterSaveVal', $(this).val());
	}).live('keyup', function() {
		var self = $(this);
		window.clearTimeout(self.data('textareaLimiterTimeout'));
		var timeout = window.setTimeout(function() {
			if(self.caret().start == self.caret().end) {
				var val = self.val();
				var afterCaret = val.length-self.caret().start;
				var chars = self.data('chars');
				var maxLines = self.data('lines');
				var oldVal = self.data('textareaLimiterSaveVal');

				var lines = val.split("\n");
				var clean = false;
				while(!clean) {
					clean = true;
					$.each(lines, function(key,line) {
						if(line.length > chars) {
							lines[key] = line.slice(0,chars);
							lines[key+1] = line.slice(chars)+(lines[key+1] ? lines[key+1] : '');
							clean = false;
						}
					});
				}
				if(lines.length > maxLines)	{
					//self.val(oldVal);
					var error = $('#'+self.attr('id')+'Error');
					if(!error.hasClass('active')) error.addClass('active').fadeIn(400, function() { window.setTimeout(function() {
						error.fadeOut(400, function() {
							$(this).removeClass('active');
						});
						}, 1000);
					});
                    lines = lines.slice(0, maxLines);
					//self.trigger('modified');
				}
				//else {
					self.val(lines.join("\n"));
					self.data('textareaLimiterSaveVal', self.val());
					self.trigger('modified');
				//}
				self.caret(self.val().length-afterCaret,self.val().length-afterCaret);
			}
		}, 500);
		self.data('textareaLimiterTimeout', timeout);
	});
	
	function reloadPatternFrame(type, remove) {
		patternFrame = $('#patternFrame'+(type == 'front' ? 'Front' : 'Back'));
		var time = new Date().getTime();

		patternFrame.find('img.pattern').attr('src', BaseURL+'patterns/generate/'+type+'/?'+time);
		$.ajax({
			"url": BaseURL+"patterns/getPatternFrame/"+type,
            "cache": false,
			"success": function(qresult) {
				var data = $.parseJSON(qresult);
				patternFrame.find('h2').html(data['title']);
				patternFrame.find('div.body').html(data['body']);
                if(type == 'front') $('head title').html(data['htmlTitle']);
			}
		});
		if(remove) {
		            patternFrame.removeClass('updating');
		}
		
		initUpdate();
	}

    function refreshColorPalette() {
        var colors = {};
		var colorCount = 0;

        var colorSelects  = isSinglePattern() ? $('#tabFrontContent .colorSelect') : $('#configuratorTabs .colorSelect');

		colorSelects.each(function() {
			if(!colors[$(this).val()]) {
				colors[$(this).val()] = 1;
				colorCount++;
			}
            else colors[$(this).val()] = colors[$(this).val()]+1;
		});
		colorSelects.each(function() {
			var select = $(this);
            if(colors[$(this).val()] > 1) {
                $(this).parent('.jqTransformSelectWrapper').addClass('jqTransformSelectWrapperColor').find('ul a').each(function() {
                    var index = $(this).attr('index');
                    var color = select.children('option').eq(index).val();
                    if(colorCount > maxColors-1 && !colors[color]) {
                        $(this).parent().hide();
                    }
                    else $(this).parent().show();
                });
            }
            else $(this).parent('.jqTransformSelectWrapper').addClass('jqTransformSelectWrapperColor').find('ul li').show();
		});
        $('.colorPalette').html('');
        $.each(colors, function(k,v) {
            $('.colorPalette').append('<li style="background-color:#'+k+'" data-color="'+k+'" class="beforeFix"></li>');
        });
        ie7AddSpans();
    }

    function updateFormValues(type) {
        if(type == 'front') {
            var tab = $('#tabFrontContent');
        }
        else {
           var tab = $('#tabBackContent');
           var type = 'back';
        }
        $.ajax({
            "url" : BaseURL+"configurators/getConfigurationTab/"+type+"?"+(new Date().getTime()),
		    "success": function(result) {
		        tab.html(result);
                updatePattern(type);
			    initJqTransformInputs();
                ie7AddSpans();
                if(type == 'back') $('#tabBackContent form').removeClass('invalid');
			},
            "cache": false
		});
    }

	var configurator = $('#configuratorFrame');
	if(configurator.length > 0) {
		function initUpdate() {
				if($('.patternFrame.update').length > 0 && $('.patternFrame.updating').length < 1) {
                    var elements = $('.patternFrame.update');
					elements.addClass('updating');
					elements.removeClass('update').removeClass('signedForUpdate');
					
					var data = $('#tabFrontContent form').serialize();
					data += '&front[p]='+$('#patternFrameFront').find('img.pattern').data('id');
                    data += '&front[cb]='+(isSinglePattern() ? '1' : '0');
                    if(!$('#tabBackContent form').hasClass('invalid')) data += '&'+$('#tabBackContent form').serialize();
                    data += '&back[p]='+$('#patternFrameBack').find('img.pattern').data('id');
					$.ajax({
						'url': BaseURL+'configurators/setConfiguration/',
						'data': data,
						'type': 'POST',
                        "cache": false,
						'success': function(result) {
							elements.each(function() {
                               if($(this).attr('id') == 'patternFrameFront') var type = 'front';
                               else var type = 'back';

                               reloadPatternFrame(type, true);

                               if($(this).hasClass('reloadForm')) {
                                    $(this).removeClass('reloadForm');
                                    updateFormValues(type);
							    }
                            });

                            refreshColorPalette();
						}
					});
				}
		}
		
		function updatePattern(type) {
			if(type != 'front' && type != 'both' && type != 'back') {
				if($('#configuratorTabFrame .ui-state-active').attr('id') == 'tabFront') type = 'front';
				else type = 'back';
			}
			if(type == 'front' || type == 'both') $('#patternFrameFront').addClass('update');
			if(type == 'back' || type == 'both') $('#patternFrameBack').addClass('update');
			
			initUpdate();
		}
		
		function checkSinglePattern() {
            $('#tabBackContent form').addClass('invalid');
			if(isSinglePattern()) {
				$("#configuratorTabs").tabs("select", 0).tabs('disable', 1);
                $('#patternFrameBack').fadeOut(400);
                $('#tabFront').addClass('single');
			} else {
				$("#configuratorTabs").tabs('enable', 1);
                $('#patternFrameBack').fadeIn(600).addClass('signedForUpdate');
                $('#tabFront').removeClass('single');
			}
            setPatternId('back', $('#patternFrameFront img.pattern').data('id'));
            updatePattern('front');
            updateFormValues('back');
		}

        function setReloadForm(type) {
            if(type == 'front') {
                $('#patternFrameFront').addClass('reloadForm');
                $('#tabFrontContent').prepend('<span class="loading"></span>').find('form').css('opacity', 0.3);
                $('#tabFrontContent').find('form').prop("disabled", "disabled");
            }
            else {
                $('#patternFrameBack').addClass('reloadForm');
                $('#tabBackContent').prepend('<span class="loading"></span>').find('form').css('opacity', 0.3);
                $('#tabBackContent').find('form').prop("disabled", "disabled");
            }
        }

		function setPatternId(type,id) {
			if(type == 'front') {
			    $('#patternFrameFront img.pattern').data('id', id).parent();
			}
			else $('#patternFrameBack img.pattern').data('id', id).parent();

            setReloadForm(type);
			updatePattern(type);
		}
		
		$('#configuratorTabs textarea').live('keyup', function() {
			updatePattern();
		}).live('modified', function() {
			updatePattern();
		});
		
		function initJqTransformInputs() {
			$("form.jqtransform").jqTransform();
			
			$("#configuratorTabs .jqTransformSelectWrapper ul a,#configuratorTabs .jqTransformCheckboxWrapper a").click(function(){
				if($(this).parents('.jqTransformSelectWrapper').children('select').hasClass('configuratorModeSwitch')) {
					if($(this).parents('.ui-tabs-panel').attr('id') == 'tabFrontContent') setReloadForm('front');
					else setReloadForm('back');
				}
				updatePattern();
			    return false;
			});
			
			$('select.colorSelect:not(.spansAdded)').each(function() {
				$(this).addClass('spansAdded');
				var select = $(this);
				$(this).parent().find('ul a').each(function() {
					var index = $(this).attr('index');
					var color = select.children('option').eq(index).val();
					$(this).prepend('<span style="background-color:#'+color+';" class="colorBox beforeFix"></span>');
				});
				var color = select.val();
				
				$(this).parent().find('div > span').prepend('<span style="background-color:#'+color+';" class="colorBox beforeFix"></span>');
			});
			
			$('#configuratorTabs .slider:not(.ui-slider)').each(function() {
				$(this).slider({
					"value": $('#'+$(this).attr('id')+'Input').val(),
					"change": function(e, ui) {
						$('#'+$(this).attr('id')+'Input').val(ui.value);
						updatePattern();
					},
				    slide: function (event, ui) {
				        if (ui.value > 45 && ui.value < 55) {
				            $(this).slider('value', 50);
				            return false;
				        }
				        return true;
				    }
				});
			});
			
		}
		initJqTransformInputs();
		updatePattern('both');
		
		if(!$('body').hasClass('editMode')) {
			$('#patternSelectList li').live('click', function() {
				var id = $(this).data('id');
				overlayHandler.close();
                if(!isSinglePattern()) {
                    overlayHandler.addDimmer(true);
                    $('<div id="selectPatternPlaceholderFront" class="selectPatternPlaceholder" style="top:'+($('#patternFrameFront').offset().top-2)+'px;left:'+($('#patternFrameFront').offset().left-2)+'px;">'+jsL18n["placeHolderFront"]+'<img src="'+BaseURL+'img/images/'+id+'.png"></div>').appendTo('body');
                    $('<div id="selectPatternPlaceholderBack" class="selectPatternPlaceholder" style="top:'+($('#patternFrameBack').offset().top-2)+'px;left:'+($('#patternFrameBack').offset().left-2)+'px;">'+jsL18n["placeHolderBack"]+'<img src="'+BaseURL+'img/images/'+id+'.png"></div>').appendTo('body');

                    $('.selectPatternPlaceholder').hover(function() {
                        $(this).find('img').show();
                    }, function() {
                        $(this).find('img').hide();
                    })
                    .click(function() {
                        setPatternId(($(this).attr('id') == 'selectPatternPlaceholderFront') ? 'front' : 'back',id);
                        $('.selectPatternPlaceholder').remove();
                        overlayHandler.close();
                    });
                }
                else setPatternId('front', id);
			});
		}
		
		$('.patternArrow').live('click', function() {
			var target = $(this).parent().find('img.pattern');
			var id = target.data('id');
			var type = 'prev';
			if($(this).hasClass('patternArrowRight')) type = 'next';
			$.ajax({
				url: BaseURL+'patterns/'+type+'/'+id,
                "cache": false,
				success: function(result) {
					var data = $.parseJSON(result);
					setPatternId((target.parents('.patternFrame').attr('id') == 'patternFrameFront') ? 'front' : 'back', data['patternId']);
				}
			});
			return false;
			
		});
		
		$('#configuratorTabs .ui-tabs-panel').equalHeights();
		$("#configuratorTabs").tabs();

		$('#singlePatternInput').change(function() {
			checkSinglePattern();
		});
		
		$('#patternOverviewButton').click(function() {
            var url = BaseURL+'/patterns/index';
            if($('#patternOverviewButton').data('categoryId')) {
                url = url+'/'+$('#patternOverviewButton').data('categoryId');
            }
            url = url+'?lang='+currentLang;
			overlayHandler.open(url, function() {
                refreshPatternOverlayPositions();

                $('#patternSelectList li').hover(function() {
                    $(this).children('.description').show();
                },
                function() {
                    $(this).children('.description').hide();
                });

                $('#overlay .description').mousemove(function(e) {
                    if(e.pageY-$(this).offset().top > 100) $(this).hide();
                });

				$("#overlay form.jqtransform").jqTransform();
                $("#overlay .jqTransformSelectWrapper ul a").click(function() {
                    $('#patternOverviewButton').data('categoryId', $('#overlay select').val());
                    $('#patternOverviewButton').trigger('click');
                });
                $('body').trigger('makePatternSelectListSortable');
			});
		});
		$('#addToCartButton').click(function() {
			$.ajax({
				"url": BaseURL+'configurators/getPermaToken',
                "cache": false,
				"success": function(qresult) {
					var data = $.parseJSON(qresult); 
					window.location = "http://www.wildemasche.com/index.php?"+$.param({
						"cl":"configurator",
						"fnc": "addtobasket",
						"fnc": "addtobasket",
                        "lang":  currentLang == 'de' ? 0 : 1,
						"artnr": articleNumber,
						"extfile": Base64.encode(BaseURL+"patterns/generate/both/"+data['uniqid'])
					});
				}
			});
		});
		$('.patternFrame').hover(function() {
			var description = $(this).find('.description');
			description.css('margin-top', -1*(description.outerHeight()+10));
		});
		
		$('#helpButton').click(function() {
			overlayHandler.close();
			overlayHandler.addDimmer();
			var elements = $('#helpTexts')
				.appendTo('body')
				.find('div').show();
			elements.each(function() {
				var moveTo = $('#'+$(this).data('moveto'));

				$(this).css({
					'left': moveTo.offset().left,
					'top': moveTo.offset().top
				});

                //the following line is useless, but fixes an ie8 bug
                $(this).hide().show();
			});
			$('#overlayDimmer').click(function() {
				elements.hide();
			});
		});

       $('.patternFrame img.pattern').live('mouseover mouseout', function(event) {
           if (event.type == 'mouseover') {
               var description = $(this).parent().find('.description');
               description.addClass('show');
               var timeout = window.setTimeout(function() {
                   if(description.hasClass('show')) description.fadeIn(400);
               }, 2000);
          } else {
            $(this).parent().find('.description').removeClass('show').fadeOut(400);
          }
       });
        $('.patternFrame .description').live('mouseover', function() {
           $(this).fadeOut(400);
       });

       $('#configuratorTabs').delegate('.colorPalette li', 'click', function(event) {
          var colorPaletteSelect = $(this).parent().nextAll('.colorPaletteSelect');
          colorPaletteSelect.data('targetColor', $(this).data('color'));
          colorPaletteSelect.show();
          event.stopPropagation();
       });

        $('#configuratorTabs').delegate('.colorPaletteSelect li', 'click', function() {
            var index = $(this).index();
            var newColor = $(this).data('value');
            var oldColor = $(this).parent().data('targetColor');
            $('#configuratorTabs .colorSelect').each(function() {
                if($(this).val() == oldColor) {
                  $(this).parent().find('ul li a').eq(index).click();
                }
            });
            updatePattern('both');
        });

       $(document).click(function(event) {
           if(event.button != 2) {
               $('.colorPaletteSelect').hide();
               $('.paraLinkActive').removeClass('paraLinkActive');
           }
       });

        $('.resetLink').click(function() {
           if(!confirm(jsL18n['newDesign'])) {
               return false;
           }
        });

        $('.paraLink').click(function(event) {
           var el = $(this);
           if(!el.hasClass('paraLinkActive')) {
                el.addClass('paraLinkActive');
               $.ajax({
                    "url": BaseURL+'configurators/getPermaToken',
                    "cache": false,
                    "success": function(qresult) {
                        var data = $.parseJSON(qresult);
                        el.find('input').val(BaseURL+"?configId="+data['uniqid']).data('backup', BaseURL+"?configId="+data['uniqid']).select();
                       }
                    });
           }

           event.stopPropagation();
        });

        $('.paraLink input').focus(function() {
          $(this).select();
        });

        $('.paraLink input').keyup(function() {
           $(this).val($(this).data('backup')).select();
        });

        $('.paraLink input').click(function() {
           $(this).val($(this).data('backup'));
        });

	}
    ie7AddSpans();

    $('.large_blanket img.pattern').wrap('<div class="patternZoomWrap afterFix" />');
    $('.patternZoomWrap').mousemove(function(e) {

        var x = e.pageX-$(this).offset().left;
		var y = e.pageY-$(this).offset().top;

        var left = (x*-0.8)+75;
        var top = (y*-0.923)+75;

        if(left < -450) left = -450;
        if(left > 0) left = 0;

        if(top < -282) top = -282;
        if(top > 0) top = 0;


        $('.largeBlanketZoom img.pattern').stop().animate({
            'width': 1200,
            'height': 750,
            'left': left,
            'top': top
        }, 200, 'swing');
    }).hover(function() {
        $(this).addClass('largeBlanketZoom');
    },function() {
        $(this).removeClass('largeBlanketZoom');
        $('.large_blanket img.pattern').stop().animate({
            'width': 750,
            'height': 468,
            'left': 0,
            'top': 0
        });
    });

});