/*
** ImageCafe
** Copyright(c), 2008 Network Solutions
**
*/

/*
** Flyout - Create Flyout menu and initialize items.
**
** @class
** @param{object} manager:  The manager that instantiated this object
** @param{object} config: Configuration for this object

*/

var Flyout = function(manager, config) {
	this.manager = manager;
	this.config = config; 
};

Flyout.prototype = {	
	
	//private - menu container
	flyout : null,
	
	//menu animator
	flyoutAnimator : null,
	
	//the action that moves
	flyoutSpaceAnimator : null,	
	
	//height of the container
	height : null,
	
	//width of the container
	width : null,
	
	//the items in the container
	item: [],
	
	//image in the items
	itemImage: [],
	
	//the drag drop object wrapper for items[]
	itemsDD: [],
		
	//the position reference
	bucket : null,	
	
	//inital cell background color
	revertBgColor: null,
	
	//the manager that instantiated this object
	manager: null,	
	
	//the Insert Item flow container
	overlay: null,
	
	//The item being dragged
	currentItem: null,
	
	//image path for individual elements
	
	imagePath: null,
	
	init : function() {
		this.bucket = this.config.reference;
		this.width = this.config.items.length <= 3 ? this.config.items.length * 78 : 230;
		this.height = this.config.items ? (43 * Math.ceil(this.config.items.length/3))+30 : 43+30;
		this.items = this.config.items ? this.config.items : "No Items";
		this.revertBgColor = '';	
	},	
	
	activate : function() {
		this.createFlyoutDiv();
		this.createAnimation();
	},
	
	createFlyoutDiv : function() {	
		
		var flyoutInner = document.createElement('DIV');
		flyoutInner.style.width = this.width;
		flyoutInner.style.height = this.height + 'px';		
		flyoutInner.style.innerHTML = ' ';
		
		this.flyout = document.createElement('DIV');
		this.flyout.className = 'flyoutContainer';
		this.flyout.innerHTML = "<div style='width: 100%; text-align: center; font-size: 10px; color: #444444; background-color: #EDEDED; font-family: verdana, arial'><b>Drag and Drop</b></div>";
		 
		this.flyout.style.top = getCoords(this.bucket).y + 26 + 'px';
		this.flyout.style.left = getCoords(this.bucket).x + 16 + 'px';
		
		//this.flyout.onmouseout = flyout.toggle(this.bucket);
		
		//this.flyout.innerHTML = ' ';
		
		//alert(this.bucket.id + ' x:'+ getCoords(this.bucket).x + ' y:' + getCoords(this.bucket).y);
		
		document.getElementById('insertItemTab').appendChild(this.flyout);
		
		this.flyout.appendChild(flyoutInner);
		 
		for (var i=0; i<this.config.items.length; i++) {
			
			
	
			
			
			
			//End garbage
			
			this.item[i] = document.createElement('IMG');			
			
			this.item[i].className = 'flyoutItem';
			this.item[i].id = this.config.items[i].id;
			this.item[i].src = '/images/'+this.config.items[i].image;
			
			
			//The below is ugly... must fix later
			switch(this.config.items[i].id){		
				case "element_text":			
					
					this.item[i].alt = "Add text to your page using our fully featured text editor";
					
					break;
				case "element_html":
					
					this.item[i].alt = "Customize your page using your own HTML or JavaScript code.";
					break;
				case "element_form":
					
					this.item[i].alt = "Allows your visitors to enter contact information, ask questions, and/or provide feedback to you.";
					break;	
				case "element_php":
					
					this.item[i].alt = "Customize your page using your own PHP code.";
					break;
		        case "element_image":
		        	
					this.item[i].alt = "Photos/graphics in these formats: .jpg, .gif.";
					break;
				case "element_thumb":
					
					this.item[i].alt = "Images that enlarge when clicked (.jpg, .gif).";
					break;
		        case "element_pa":
		        	
					this.item[i].alt = "Tool used to upload/resize multiple thumbnail images.  Full fledged photoalbum.";
					break;
		        case "element_flash":
		        	
					this.item[i].alt = "Flash or Shockwave files: .swf";
				break;
		        case "element_media":
		        	
					this.item[i].alt = "Movie/audio file types: .3gp, .asf, .asx, .avi, .mov, .mp2, .mp3, .mp4, .mpeg, .mpg, .ra, .rm, .swf, .wav, .wma, .wmv";
				break;		
					break;
		        case "element_youtube":
		        	
					this.item[i].alt = "Embed code from any YouTube video";
				break;
		        case "element_widget":
		        	
					this.item[i].alt = "Add widgets (weather, Flickr slide shows, etc.) to your page from other Web sites.";
				break;
		        case "element_docs":
		        	
					this.item[i].alt = "Provide a link for visitors to view documents. Acceptable file types: .doc, .pdf, .ppt, .xls, .zip, .sit, .txt, .dxf, .psd";
				break;
		        case "element_doc_lib":
		        	
					this.item[i].alt = "Offer a list of documents to be downloaded by your Web site visitors";
				break;
		        case "element_paypal":
		        	
					this.item[i].alt = "Accept payments for individual products on your Web site using PayPal.";
				break;
		        case "element_paypal_donation":
		        	
					this.item[i].alt = "Accept donations from Web site visitors using PayPal. ";
				break;
		        case "element_map":
		        	
					this.item[i].alt = "Add a map and directions to your business location(s).";
						break;
		        case "element_counter":
		        	
					this.item[i].alt = "Track the number of visitors who view your Web site. ";
						break;
		        case "element_poll":
		        	
					this.item[i].alt = "Set up an interactive visitor poll.";
						break;
		        case "element_board":
		        	
					this.item[i].alt = "Provide a forum for visitors to encourage repeat visits to your Web site.";
					break;
					
				case "element_mlssource":
		        	
					this.item[i].alt = "Allow prospects and clients to search available properties in their area.";
					break;
					
				case "element_newssource":
					this.item[i].alt = "Keep visitors to your Web site up to date with the latest Real Estate News.";
					break;
								         
		        case "element_gadget":
					this.item[i].alt = "Create new applications for your website";
					break;
					
		        case "element_guestbook":
					this.item[i].alt = "Collect visitor feedback and testimonials.";
					break;
				case "element_rss":
					this.item[i].alt = "Provide visitors with a continuous stream of Web content (news, sports stats, financial updates, etc.)";
				break;
				case "element_gadget_GADGET_CRM":
					this.item[i].alt = "Create lead and contact forms to generate new business through your Web site.";
					break;
				case "element_gadget_GADGET_FORM":
					this.item[i].alt = "Create a variety of forms to increase sales or to learn more about Web site visitors.";
					break;
				case "element_gadget_GADGET_BIZCARD":
		        
					this.item[i].alt = "Create a business card to include on your Web site.";
					break;
				case "element_gadget_GADGET_CALENDAR":
		        	
					this.item[i].alt = "Keep visitors informed by adding upcoming events to your Web site event calendar. ";
					break;
				case "element_gadget_GADGET_COUPON":
		        
					this.item[i].alt = "Create a coupon to promote your business. Display the coupon on your Web site.";
					break;
				case "element_gadget_GADGET_EREF":
		        	
					this.item[i].alt = "Allow visitors to send an invitation to friends to visit your Web site.";
					break;
				case "element_gadget_GADGET_ICBLOG":
		        
					this.item[i].alt = "Communicate with visitors and allow them to post comments.";
					break;
			    case "element_gadget_GADGET_WIDGET":
					this.item[i].alt = "Add one of thousands of widgets to your web site.";
					break;
				case "element_gadget_GADGET_WIDGET1":
					this.item[i].alt = "Add one of thousands of widgets to your web site.";
					break;
				case "element_gadget_GADGET_WIDGET2":
					this.item[i].alt = "Add one of thousands of widgets to your web site.";
					break;
				case "element_gadget_GADGET_WIDGET3":
					this.item[i].alt = "Add one of thousands of widgets to your web site.";
					break;
				case "element_gadget_GADGET_WIDGET4":
					this.item[i].alt = "Add one of thousands of widgets to your web site.";
					break;
				case "element_gadget_GADGET_WIDGET5":
					this.item[i].alt = "Add one of thousands of widgets to your web site.";
					break;
				case "element_gadget_GADGET_WIDGET6":
					this.item[i].alt = "Add one of thousands of widgets to your web site.";
					break;
				case "element_gadget_GADGET_WIDGET7":
					this.item[i].alt = "Add one of thousands of widgets to your web site.";
					break;
				case "element_gadget_GADGET_WIDGET8":
					this.item[i].alt = "Add one of thousands of widgets to your web site.";
					break;
				case "element_gadget_GADGET_WIDGET9":
					this.item[i].alt = "Add one of thousands of widgets to your web site.";
					break;
				case "element_gadget_GADGET_WIDGET10":
					this.item[i].alt = "Add one of thousands of widgets to your web site.";
					break;
				case "element_gadget_GADGET_TIMETRACKER":
		        	
					this.item[i].alt = "Allow clients/customers to see how long projects and business tasks take to complete. Track how long you and your co-workers are working on tasks.";
						break;
				case "element_gadget_GADGET_PROPMGR":
		       
					this.item[i].alt = "Attract buyers and renters by showcasing your properties.";
						break;
			}	
			
			//this.item[i].innerHTML = this.config.items[i].id.substr(8);
			 
			//this.itemImage[i] = document.createElement('IMG');
			//this.itemImage[i].src = '/images/'+this.config.items[i].image;
			
			flyoutInner.appendChild(this.item[i]);	
			//this.item[i].appendChild(this.itemImage[i]);
			
			this.itemsDD[i] = new NetsolDDProxy(this.item[i], 'default', {
				dragElId: 'flyoutItemProxy', 
				centerFrame: false, 
				resizeFrame: false				
			});	 
			
			this.itemsDD[i].onDragOver = this.ddOver;	
			this.itemsDD[i].onDragOut = this.ddOut;	
			this.itemsDD[i].onDragDrop = this.ddDrop;		
			this.itemsDD[i].onMouseDown = this.detectItem;
			//this.itemsDD[i].onDrag = this.hideToolTip;
			
			//YAHOO.util.Event.addListener(this.item[i], 'mouseover', this.showToolTip);
			//YAHOO.util.Event.addListener(this.item[i], 'mouseout', this.hideToolTip);
			
			//this.item[i].onmouseover = this.showTooltip;
			//this.item[i].onmouseout = this.hideTooltip;
		}		
		
		//YAHOO.util.Event.addListener(this.item[0], 'mouseover', this.showToolTip);
		//YAHOO.util.Event.addListener(this.item[0], 'mouseout', this.hideToolTip);
		
		if(!document.all)
			YAHOO.util.Event.addListener(this.item, 'mouseover', this.showToolTip);
			YAHOO.util.Event.addListener(this.item, 'mouseout', this.hideToolTip);
		
		
		
	},
	
	showToolTip : function(ev) {
	
		showInsertItemHelp(this.id, this);		
	},
	
	hideToolTip : function(ev) {
		
		hideHelp();
	},
		
	detectItem : function(ev) {
		if (ev == null) { ev = window.event; } 
		      evtObj = ev.target != null ? ev.target : ev.srcElement;
		 
		 this.currentItem = document.getElementById(evtObj.id);
		 
		 var curItem = this.currentItem;
		 
		 //flyout is global, defined in designAfterBody.txt
		 flyout.initDropZones();
		 //flyout.toggle(this.currentItem.parentNode)
		 
	},
	
	ddOver : function(ev, id) {
		    		    
		    if(!YAHOO.util.Dom.hasClass(document.getElementById(id), 'flyoutItem')) {	
		    	this.revertBgColor = ''; //document.getElementById(id).style.backgroundColor;
		    	
		    	if(YAHOO.util.Dom.hasClass(document.getElementById(id), 'dropzone_grn')) {		    	
		    		document.getElementById(id).style.visibility = 'visible';
		    	} 
		    	else { 
		    		document.getElementById(id).style.backgroundColor = '#AFD043';
		    	}
		    }
		    
		    //alert(this.revertBgColor);
		    
	    
	},
	
	ddOut : function(ev, id) {
		//alert(this.revertBgColor);
		if(!YAHOO.util.Dom.hasClass(document.getElementById(id), 'flyoutItem')) {	
	    	
	    	if(YAHOO.util.Dom.hasClass(document.getElementById(id), 'dropzone_grn')) {
	    		document.getElementById(id).style.visibility = 'hidden';
	    	}
	    	else {
				document.getElementById(id).style.backgroundColor = this.revertBgColor;
			}
		}
	},
	
	ddDrop : function(ev, id) {
	
		document.forms['page_editor_details'].elements['drag_insert'].value = "true";
		
		var targetElement = document.getElementById(id);
		var insertButton = new Object();
		var blockDetails = [];
		var elementType = this.currentItem.id.substr(8);

        if(elementType.indexOf('gadget_') != -1){
           var selectedGadgetType = elementType.substring(7);
		   
           if(selectedGadgetType){
	           document.forms['page_editor_details'].elements['filter_by_gadget_type_id'].value = selectedGadgetType;
	       }
           elementType = 'gadget';
	    }
	    else{
           document.forms['page_editor_details'].elements['filter_by_gadget_type_id'].value = "";
	    }


		var blockDropZones = [];
		var buildingBlockHtml = '';		
		var buildingBlock = {}; 
		var newDropZone = {};		
		var dropZoneIndex = null;
		var columnObject = targetElement;  //we're going to bubble up from the target to determine which column we are in
		
		targetElement.style.backgroundColor = '';
		
		insertButton = YAHOO.util.Dom.getFirstChild(targetElement);						
		insertButton = YAHOO.util.Dom.getFirstChild(insertButton);
		insertButton = YAHOO.util.Dom.getNextSibling(insertButton);
		
		//pass the cell ID, block ID, and element type
		if(targetElement.id.indexOf('dropzone') != -1) {
			
			targetElement.style.visibility = 'hidden';
			
			while(!YAHOO.util.Dom.hasClass(columnObject, 'colbody')) {
				columnObject = columnObject.parentNode;
			}
			
			blockDropZones = YAHOO.util.Dom.getElementsByClassName('dropzone_grn', 'div', columnObject);
			
			pageColumnIndex = columnObject.id.substr(7);
			
			for(var i=0; i<blockDropZones.length; i+=1) {
				if(blockDropZones[i].id == targetElement.id) {
					dropZoneIndex = i;
				}
			}
			 
			//the 3rd param is the block type which is always set to 1.  The last param I have no idea.
			appendStuff(targetElement.id, dropZoneIndex, 1, -1);
			
			cell_insertItem('cell1', 'pgbldblk'+nextIDnum, elementType);
			
		}	
		else if(!YAHOO.util.Dom.hasClass(targetElement.id, 'flyoutItem')) {
			blockDetails = insertButton.id.split('_');
		
			//determine if it is a new block or not
			if(insertButton.id.indexOf('pgbldblk') != -1) {
				blockDetails[1] = 'cell' + blockDetails[1];
			}
			
			cell_insertItem(blockDetails[1],blockDetails[3], elementType);
			//alert("cell_insertItem("+blockDetails[1]+","+blockDetails[3]+"," +elementType+");")
		}
				
	},
	
	createAnimation : function() {
		var that = this;
		this.flyoutAnimator = new Animator({
			transition: Animator.makeEaseIn(2),
			duration: 500 
		});
		
		this.flyoutAnimator.addSubject(new CSSStyleSubject(
			this.flyout,'width: 0px; height: 43px; opacity: 0', 'width: ' + this.width + 'px; height: ' + this.height + 'px; opacity: 1'
		));
		
		this.flyoutSpacerAnimator = new Animator({
			transition: Animator.makeEaseIn(2),
			duration: 500
		});
		
		this.flyoutSpacerAnimator.addSubject(new CSSStyleSubject(
			this.bucket,'width: 85px;', 'width: ' + (this.width + 13) + 'px;'
		));
	}, 
	
	getAnimator: function() {
		return this.flyoutAnimator;
	},
	
	getSpacerAnimator: function() {
		return this.flyoutSpacerAnimator;
	},
	
	getFlyoutDiv: function() {
		return this.flyout;
	},
	
	getReferenceDiv: function() {
		return this.bucket;
	}		
}