function toggleMenuIE(el,id)
{var uls=el.parentNode.getElementsByTagName("ul");for(var eid in uls){e=$(eid);if(e!=null){if(e.id==id&&!e.visible()){Effect.BlindDown(e,{duration:0.5});}
else{Effect.BlindUp(e,{duration:0.5});}}}}


function toggleMenu(el,id)
{
    el.parentNode.select("ul").each(function(e) {
		if(e.id==id&&!e.visible()){Effect.BlindDown(e,{duration:0.5});}
else{Effect.BlindUp(e,{duration:0.5});}}
	);
}
var PatternSelector = Class.create (
	{
		initialize: function(element, productid) {
			this.element = $(element);
			this.productid = productid;
            this.images = new Array();
            this.width;
            this.imagesJson = null;
            this.currentImageIndex = null;
            this.selectedIndex = null;
			var initPatterns = this.initPatterns.bind(this);
			var req = new Ajax.Request('http://www.bubbletreehouse.ie/ajax/initpattern',{ parameters:{productid:this.productid}, onComplete:initPatterns, evalScripts:true})
		},
		initPatterns: function(request){
			this.imagesJson = request.responseJSON;
            this.currentImageIndex = 0;
            this.width  = this.imagesJson[0].width;
           this.renderPicker();
		},
        renderPicker: function() {
        this.element.innerHTML='';
            var container = document.createElement('div');
            var inputField = document.createElement('input');
            inputField.type='hidden';
            inputField.name='pattern_id';
            inputField.value=this.imagesJson[this.currentImageIndex].id; 
            
            var totalwidth = parseInt(this.imagesJson[0].width)+30;
            container.style.width = totalwidth + "px";
            container.style.height = parseInt(parseInt(this.imagesJson[0].height)+23) + "px";
            container.style.position = 'absolute';
            container.style.margin = "0 0px 0 0";
            
            var leftHandle = document.createElement('div');
            leftHandle.style.position="absolute";
            leftHandle.style.left ="0px";
            leftHandle.style.top = parseInt(parseInt(this.imagesJson[0].height) / 2 - 9) + "px";
            leftHandle.style.overflow = 'hidden';

            leftHandle.style.width = "15px";
            leftHandle.style.height = "18px";
            leftHandle.innerHTML = " ";
            leftHandle.className = "previous";

            leftHandle.style.textAlign='center';
            leftHandle.onclick = new Function("patternChooser.slideToPreviousImage();return false");
            //leftHandle.setAttribute('onclick',"patternChooser.slideToPreviousImage();return false");
            
            
            var rightHandle = document.createElement('div');
            rightHandle.style.position="absolute";
            rightHandle.style.right="0";
            rightHandle.style.top = parseInt(parseInt(this.imagesJson[0].height) / 2 - 9) + "px";
            rightHandle.style.overflow = 'hidden';

            rightHandle.style.width = "15px";
            rightHandle.style.height = "18px";
            rightHandle.innerHTML = " ";
            rightHandle.className = "next";
            rightHandle.style.textAlign='center';
            rightHandle.onclick = new Function("patternChooser.slideToNextImage();");
          
            var titleLabel = document.createElement('div');
            titleLabel.innerHTML = this.imagesJson[this.currentImageIndex].title;
//            titleLabel.style.width = totalwidth + 'px';
            titleLabel.style.textAlign = 'center';
            titleLabel.style.position = 'absolute';
            titleLabel.style.bottom = "10px";
            titleLabel.style.height = "13px";
            titleLabel.style.fontSize='11px';
            
            
            var summaryLabel = document.createElement('div');
            summaryLabel.innerHTML = parseInt(this.currentImageIndex+1)+'/'+this.imagesJson.length;
            //summaryLabel.style.width = totalwidth + 'px';
            summaryLabel.style.textAlign = 'center';
            summaryLabel.style.position = 'absolute';
            summaryLabel.style.bottom = "0";
            summaryLabel.style.height = "10px";
            summaryLabel.style.fontSize='9px';
            
            var mainView = document.createElement('div');
            mainView.style.height = this.imagesJson[0].height+"px";
            mainView.style.width = this.imagesJson[0].width + "px";
            var offWidth = parseInt(this.imagesJson[0].width) + 35 ;
            mainView.className = "mainView";
            mainView.style.position = "absolute";
            mainView.style.left = "15px";
            mainView.style.overflow='hidden';
            
            var contentView = document.createElement('div');
            contentView.id='contentViewSliding';
            contentView.className = "contentView";
            
            
            var prevImage = this.makeImageFromJson((this.currentImageIndex == 0 ? this.imagesJson[this.imagesJson.length - 1] : this.imagesJson[this.currentImageIndex - 1] ));
            var currentImage = this.makeImageFromJson(this.imagesJson[this.currentImageIndex]);
            //currentImage.setAttribute('ondblclick','alert("double click !")');
            var cHeight = currentImage.height;
             var cWidth= currentImage.width;
           
            var nextImage = this.makeImageFromJson((this.currentImageIndex >= this.imagesJson.length-1 ? this.imagesJson[0] : this.imagesJson[this.currentImageIndex + 1] ));
           // alert(prevImage.src +',' + currentImage.src + "," + nextImage.src);
            contentView.style.height = currentImage.height+"px";
            contentView.style.width = parseInt(prevImage.width+currentImage.width+nextImage.width+1)+"px";
            contentView.style.position = "absolute";
            contentView.style.left = - 1 * prevImage.width +"px";
            var lbLink = document.createElement("a");
            lbLink.setAttribute ('href','http://www.bubbletreehouse.ie/media/' + this.imagesJson[this.currentImageIndex].filePath);
           lbLink.setAttribute("rel","lightbox");
            lbLink.appendChild(currentImage);
            //if ie
           if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion <= "7" )
           		container.style.right = offWidth +"px";
                        summaryLabel.style.width = totalwidth+"px";
						titleLabel.style.width =  totalwidth+"px";
            			titleLabel.style.right = "0px";
             			summaryLabel.style.right = "0px";
           
            contentView.appendChild(prevImage);
            contentView.appendChild(lbLink);
            contentView.appendChild(nextImage);
            mainView.appendChild(contentView);
            container.appendChild(mainView);
            container.appendChild(inputField);
            container.appendChild(leftHandle);
            container.appendChild(rightHandle);
            container.appendChild(titleLabel);
            container.appendChild(summaryLabel);
            
            
            this.element.appendChild(container);
            this.element.style.height = parseInt(parseInt(cHeight)+23)+"px";
            this.element.style.width = totalwidth+"px";
            this.element.style.margin = "5px 0 5px 0";

          
        },
        makeImageFromJson: function(obj) {
            var image = document.createElement('img');
            image.src = 'http://www.bubbletreehouse.ie/media/' + obj.filePath;
            image.height =  obj.height;
            image.width = obj.width;
            image.title = obj.title;
            return image;
        },
        slideToPreviousImage: function() {
           var eff = new Effect.Move('contentViewSliding', { y: 0, x: this.width, duration:0.3, mode: 'relative', afterFinish:function(){patternChooser.previousImage(); }});
            return false;
        },
        previousImage: function() {
            this.currentImageIndex = this.currentImageIndex - 1 < 0 ? this.imagesJson.length - 1 : this.currentImageIndex - 1;
            this.renderPicker();
            return true;
        },
        slideToNextImage: function() {
           var eff = new Effect.Move('contentViewSliding', { y: 0, x: - this.width, duration:0.3, mode: 'relative', afterFinish:function(){patternChooser.nextImage();
}});
            return false;
        },
        nextImage: function() {
            this.currentImageIndex = this.currentImageIndex + 1 == this.imagesJson.length ? 0 : this.currentImageIndex + 1;
            this.renderPicker();
        },
        select: function() {
            this.selectedIndex = this.currentImageIndex;
        } 
	});

function findChild (element, nodeName)
{
	var child;
	for (child = element.firstChild; child != null; child = child.nextSibling)
	{
		if (child.nodeName == nodeName)
			return child;
	}

	return null;
}