/**
 * @version     $Id: layout.accordion_horizontal.js 120 2009-07-25 04:28:19Z martin $
 * @package     Joomla
 * @subpackage  mmPortfolio
 * @author      Martin Gray <author [at] mmPlugins.com>
 * @copyright   Copyright (C) 2009 mmPlugins | All rights reserved
 * @license     Commercial
 *
 * This version of mmPortfolio is released under a commercial license.
 * @see http://www.mmplugins.com/commercial-license/
 */

/**
 * Get the magic going when the DOM is present
 * 
 */
var lastHackApplied = false;
var defaultIndex = 0; // @todo, make variable
var normalizedCollection = new Array();

window.addEvent('domready', function() {
	
	// we start by preloading/inserting imagery for the active project 
	var defaultEl = $$('#project-list .project-node')[defaultIndex];
	var i = 0;
	var defaultCollection = new Array();
	$each(imageCollection[defaultIndex], function(type, key) {
	    if (typeof(type) == 'object') {
	    	// iterate through images
	        $each(type, function(image) {
	        	defaultCollection[i] = image;
	        });
        } else if (key && key == 'medium') {
        	// insert feature image into DOM too
        	if (type) {
	        	defaultCollection[i] = type;        		
        	}
        }
	    i++;
	});
	// prepare first active panel
	var prepareDefault = function() {
		$each(imageCollection[defaultIndex], function(type, key) {
		    if (typeof(type) == 'object') {
		    	var it = 0;
		        $each(type, function(image) { // now replace each mini placeholder image with real image
		        	$ES('ol.images-list img', defaultEl)[it].setProperty('src', image);
		        	it++;
		        });
	        } else if (key && key == 'medium') { // insert feature image into DOM too
	        	if (type) {
	        		var el = $E('div.image-highlight img', defaultEl);
            		if (el) {
            			el.setProperty('src', type);
            			el.reflect({height: 0.30, opacity: 0.5});
            		}
            		
	        	}
	        }
		});
		imageCollection[defaultIndex].isLoaded = true;
		mmAccordionInit();
    }
	// preload images for default project first
	new Asset.images(defaultCollection, {
	    onComplete: function(){
	        prepareDefault();
	    }
	});
	
	// normalize array for global preloading
	var i = 0;
	$each(imageCollection, function(item){
	    $each(item, function(type, key){
	    	if (key && key == 'medium') {
	    		normalizedCollection[i] = type;
	    	} else if (typeof(type) == 'object') {
	            $each(type, function(image, id) {
	            	normalizedCollection[i] = image;
	            });
	        }
	    });
	    i++;
	});
});
var mmAccordionInit = function() {

	//$('project-list-wrapper').setStyle('width', mm_accordionWidth);
	// Init preloader animation
	/*
	$('project-list-loader').startWaiting({
		onStart: function() {
			this.bar = new mmooBar({parentEl: this.element._loading, status: 'Initializing ...'});
			this.bar.activateBar();
		},
		onStop: function() {
			this.bar.stop();
		}
	});
	*/

    // Init mmAccordion; hang on, did you say `accordion`?
	mmAccordion = new mmAccordion({
        benchWarmers: mm_benchWarmers,
        fadeFrom: mm_fadeFrom,
        minOpacity: mm_minOpacity,
        panelWidth: mm_panelWidth,
        handleWidth: mm_handleWidth,
        onInitiated: function() {
	        // manipulate svg docs for real browsers
            if (!window.ie) {
                $ES('h2.handle-inner', 'project-list').each(function(wrapper, index) {
                    // create embed element for SVG document
                    var embed = new Element('embed', {
                        'type': 'image/svg+xml',
                        'src': mm_uriRoot+'components/com_mmportfolio/skins/mmaster/project-title.svg',
                        'class': 'obj',
                        'id': 'svg-'+index,
                        'width': mm_handleWidth,
                        'height': mm_accordionHeight
                    });
                    embed.injectInside(wrapper);
                });
                var initSVG = function() {
                    var count = 0;
                	$ES('embed', 'project-list').each(function(embed, index) {
                    	count++;
                        var svgdoc = null;
                        try { svgdoc = embed.getSVGDocument(); }
                        // ignore errors
                        catch(exception) { }
                        if (svgdoc) {
                            svgdoc = embed.getSVGDocument();
                            svgtext = svgdoc.getElementById('ghtext');
                            // set handle text to that of hidden span with project title
                            svgtext.firstChild.data = embed.getParent().getFirst().getText();
                            svgtext.setAttribute('x', -(mm_accordionHeight-25));
                            if (count == 1) svgtext.setAttribute('style', 'fill: #FFF');
                        }
                	});
                }
                // delay init with a second
                initSVG.delay(1500);
                
                // continue with preloading further imagery
            	new Asset.images(normalizedCollection, {
            	    onComplete: function() {
	                    // stop preloader animation
	                    //$('project-list-loader').stopWaiting();
	                    //$('project-list-loader-wrapper').setStyle('display', 'none');            		
            		}
            	});
            }
		},
        onActivate: function(args) {
            args.el.removeClass('right');
            args.el.removeClass('last');
            args.el.removeClass('first');

            if (!args.el.hasClass('left')) args.el.addClass('left');
            if (args.first) {
                args.el.addClass('currentfirst');
            } else {
                args.el.addClass('current');
            }
            // Hack rounded finish of accordion
            if (args.last) {
            	args.el.addClass('last');
            	if (!lastHackApplied) {
                	lastHackApplied = true;
	            	var wrapper = $ES('div.project-outer-wrapper', args.el);
	            	var width = wrapper.getStyle('width').toString();
	            	wrapper.setStyle('width', (width.replace(/px/,"").toInt()-27)+'px');
            	}
            }
            
            if (mmAccordion.currentIndex == args.nodeIndex) {
                // @todo check if images are already loaded into this project or else do so
                if (imageCollection[mmAccordion.currentIndex] && !imageCollection[mmAccordion.currentIndex].isLoaded) {
                	$each(imageCollection[mmAccordion.currentIndex], function(type, key){
                	    if (typeof(type) == 'object') {
                	    	// iterate through images
                	    	var it = 0;
                	        $each(type, function(image) {
                	        	// now replace each mini placeholder image with real image  
                	        	$ES('ol.images-list img', args.el)[it].setProperty('src', image);
                	        	it++;
                	        });
                        } else if (key && key == 'medium') {
                        	// insert feature image into DOM too
                        	if (type) {
                        		var imgEl = $E('div.image-highlight img', args.el);
                        		if (imgEl) {
                        			imgEl.setProperty('src', type);
                        			imgEl.reflect({height: 0.30, opacity: 0.5});
                            	}
                        	}
                        }
                	});
                	imageCollection[mmAccordion.currentIndex].isLoaded = true;
                }
            	
            }

            var renderProject = function() {
                // only render project if project is still current (after delay)
                if (mmAccordion.currentIndex == args.nodeIndex) {
                	$ES('div.project-outer-wrapper', args.el).setStyles({
                		'background-image': 'url('+mm_panelBg+')',
                		'background-color': mm_panelColor,
                		'background-repeat': 'repeat-x',
                		'background-position': '0px 0px'
                	});
                    $ES('div.project-outer-wrapper', args.el).getChildren().each(function(el) {
                        el.setStyle('display', 'block');
                    });
                }
            };
            // Wait 200 milliseconds, then call renderProject
            renderProject.delay(200);
        },
        onBeforeMove: function() {
        	$$('#project-list div.project-outer-wrapper').each(function(el, idx) {
    			el.getChildren().each( function(chl) {
    				chl.setStyle('display', 'none');
    			});
        		el.setStyles({
        			'background-image': 'none',
        			'background-color': mm_panelColor
        		});
        	}.bind(this));
        },
        onLeft: function(args) {
            args.el.removeClass('right');
            args.el.removeClass('currentfirst');
            if (!args.el.hasClass('left')) args.el.addClass('left');

            // determine if is first in viewport
            if (args.first) {
                if (!args.el.hasClass('first')) args.el.addClass('first');
            } else {
                args.el.removeClass('first');
            }
        },
        onRight: function(args) {
            args.el.setStyle('background', 'none');
            args.el.removeClass('left');
            args.el.removeClass('currentfirst');
            if (!args.el.hasClass('right')) args.el.addClass('right');

            if (args.last) {
                if (!args.el.hasClass('last')) args.el.addClass('last');
            } else {
                args.el.removeClass('last');
            }
        },
        onComplete: function() {

        	// clear background of all panels except for current one
        	$$('#project-list div.project-outer-wrapper').each(function(el, idx) {
        		if (this.currentIndex != idx) el.setStyle('background', 'none');
        	}.bind(this));
        	
        	// SVG fixes required after move
            if (!window.ie) {
            	$$('#project-list embed').each(function(embed, idx) {
                    var svgdoc = null;
                    try { svgdoc = embed.getSVGDocument(); }
                    // ignore errors
                    catch(exception) { }
                    if (svgdoc) {
                        svgdoc = embed.getSVGDocument();
                        svgtext = svgdoc.getElementById('ghtext');
                        // set handle text to that of hidden span with project title
                        svgtext.firstChild.data = embed.getParent().getFirst().getText();
                        svgtext.setAttribute('x', -(mm_panelHeight-25));
                        if (this.currentIndex == idx) {
                        	svgtext.setAttribute('style', 'fill: #FFF');
                        } else {
                        	svgtext.setAttribute('style', 'fill: #000');
                        }
                    }
            	}.bind(this));
            }
            // stop preloader animation
            $('project-list-loader').stopWaiting();
            $('project-list-loader-wrapper').setStyle('display', 'none');
            
        },
        // WARNING! HIGH LEVELS OF MAMBOJAMBO DETECTED IN THIS AREA
        onDoh: function(args)
        {
        	// IE HACKING :( otherwise we loose alpha transparency in IE
        	if (window.ie) {
	        	var elm = args.elm;
	        	var elOpacity = args.elOpacity;
	
	        	// check if cloned element exists, if so, remove
	        	elm.getElements('div.clone').each(function(clone) {
	        		clone.remove();
	        	});
	    
	        	elm.getElements('div.handle').each(function(elm2) {
	        		/**
	        		 * 1. Create clone and assign extra classname "handle-clone"
	        		 * 2. Hide the original element
	        		 * 3. Read background image from original element 
	        		 * 4. Remove background image from cloned element
	        		 * 5. Apply filter tricks to correct transparency behavior and reset the background image
	        		 */
	        		var clone = elm2.clone();
	        		var bgImg = elm2.getStyle('background-image');
	        		bgImg = bgImg.replace(/url\(/, "");
	        		bgImg = bgImg.replace(/\)/, "");
	        		elm2.setStyle('display', 'none');
	        		clone.addClass('clone');
	        		clone.injectAfter(elm2);
	        		
	        		clone.setStyle('background-image', 'none'); // this makes it work, but now there is not bg-image to reference to ...
	        		clone.setStyles({
	        			display: 	'inline-block',
	        			filter: 	'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+ bgImg +', sizingMethod=\'scale\')'
	        			//zoom: 1, height: '328px', width: '27px' /* layout hacks */
	        		});
	        		
	        		// now fix up the cloned inner handle, containing bottom side of the sliding door
	        		var wrapper = clone.getFirst();
	        		wrapper.setStyle('opacity', elOpacity);
	        		
	        		var elm3 = wrapper.getFirst();
	        		var bgImg = elm3.getStyle('background-image');
	        		bgImg = bgImg.replace(/url\(/, "");
	        		bgImg = bgImg.replace(/\)/, "");
	        		elm3.setStyle('background-image', 'none');
	        		elm3.setStyles({
	        			display: 	'inline-block',
	        			filter: 	'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+ bgImg +', sizingMethod=\'scale\')',
	        			height:		'22px',
	        			width:		'27px',
	        			'margin-top': (mm_accordionHeight-22)+'px'
	        		});
	        		
	        	});
        	} // end if (window.ie)
//    		elm.getElements('span.canv').each(function(elm2) {
//    			elm2.setStyle('filter', 'flipv() fliph() alpha(opacity='+(100 * elOpacity)+')');
//        	});        
        }
    });
	
	mm_mmAccordion = mmAccordion;
	
}

var mmooBar = new Class({

	options: {
	    //targetId: '',
		parentEl: null,					// if parentEl is given, we create a new bar inside the parent, else use existing bar based on id's
		barEl: 'mmoobar-bar',
		sliderEl: 'mmoobar-bar-slider',
		status: 'Loading',
	    barWidth: 120, 					// in pixels
	    sliderWidth: 40, 				// in pixels
	    barHeight: 75
	},
	initialize: function(options) {
		this.setOptions(options);

		if (this.options.parentEl != null) {
			// wrapper
			var wrapperEl = new Element('div', {
			    'styles': {
			        'display': 'none',
			        'position': 'absolute',
			        //'overflow': 'hidden;', // IE hates this
			        'width': this.options.barWidth,
			        'height': this.options.barHeight,
			        'left': '50%',
			        'top': '50%',
			        'margin-top': '-'+((this.options.barHeight)/2)+'px',
			        'margin-left': '-'+(this.options.barWidth/2)+'px'
			    },
			    'class': 'mmoobar-wrapper'
			});
			wrapperEl.injectInside(this.options.parentEl);
			// status
			var barStatus = new Element('p', {
				'class': 'mmoobar-status'
			});
			barStatus.injectInside(wrapperEl);
			barStatus.setText(this.options.status);
			// bar
			var barEl = new Element('div', {
				'styles': {
				'display': 'block'
			},
			'class': 'mmoobar-bar'
			});
			barEl.injectInside(wrapperEl);
			// slider
			var sliderEl = new Element('div', {
				'styles': {
					'display': 'block'
				},
				'class': 'mmoobar-bar-slider'
			});
			sliderEl.injectInside(barEl);
			wrapperEl.setStyle('display', 'block');

			this.options.barEl = barEl;
			this.options.sliderEl = sliderEl;
		}
		this.bar = new Fx.Styles(this.options.sliderEl, {duration:1000, wait:false, transition: Fx.Transitions.Quad.easeInOut,
		    onComplete: (function() {
				this.activateBar();
			}).bind(this),
		    onStart: (function() { $(this.options.sliderEl).setStyle('display', 'block'); }).bind(this),
		    onCancel: (function() { $(this.options.sliderEl).setStyle('display', 'none'); }).bind(this)
		});

		// draw bar on top of target element
		//this.bar.bind(this);
	},
    activateBar: function()
    {
        if ( $(this.options.sliderEl).getStyle("margin-left").toInt() ) {
            this.bar.start({'margin-left': 0});
        } else {
            this.bar.start({'margin-left': (this.options.barWidth-this.options.sliderWidth) });
        }
    },
    stop: function()
    {
    	this.bar.stop();
    }
});
mmooBar.implement(new Events, new Options);