/*
 *markup example
 <div class="portfolio-container" id="portfolio1">
      <div class="portfolio-feature">
        <div class="portfolio-play"></div>
        <div class="portfolio-panel">
          <img width="800" height="300" src="images/portfolio/01.jpg" />
          <div class="portfolio-overlay"><h3>Some overlay</h3><p>Some info about overlay</p></div>
        </div>
        <div class="portfolio-panel">
          <img width="800" height="300" src="images/portfolio/02.jpg" />
          <div class="portfolio-overlay"><h3>Some overlay</h3><p>Some info about overlay</p></div>
        </div>
      </div>
      <div class="portfolio-filmstripOuter">
        <div class="portfolio-prev"></div>
        <div class="portfolio-filmstripCont">
          <div class="portfolio-filmstrip">

          </div>
        </div>
        <div class="portfolio-next"></div>
        <div class="clearfloat"></div>
      </div>
    </div>
 */
(function($) {
	$.fn.portfolio = function(options){// default configuration properties
		var defaults = {
          animationTime  : 1000, 
          auto      : true,
          timeOut   : 7000
        }; 
		var options = $.extend(defaults, options);  	
		this.each(function() {  
			var obj = $(this);
            var currentPanel, timer;
            var AUTO = options.auto;
			var panels = obj.find(".portfolio-panel");
            panels.hide();
            panels.first().show();
            currentPanel = panels.first();
            var strip = obj.find(".portfolio-filmstrip");
            panels.first().addClass("PANEL-showing");
            panels.each(function(index){
                var panel = $(this);
                if(panel.children().hasClass("portfolio-overlay"))
                  panel.append($("<div class='portfolio-overlayBG'></div>"));
                var img = panel.find("img");
                var thumb = $("<img />").addClass("portfolio-thumb").attr({src:img.attr("src"),height:"100"});
                var imgDiv = $("<div></div>").addClass("portfolio-imageBox").append(thumb)
                                             .click(function(){
                                               if(!strip.is(":animated")){
                                                 animate(panel);
                                               }
                                             }).hover(function(){
                                                 $(this).css("opacity","0.65");
                                             },function(){
                                                 $(this).css("opacity","1");
                                             });
                strip.append(imgDiv);
            })
            strip.append("<div class='clearfloat'></div>");
            
            function animate(nextPanel,noAnim){
              if(strip.is(":animated"))
                return;
              clearTimeout(timer);
              
              var time = options.animationTime;
              if(noAnim)
                time = 1;

              if(nextPanel == "next"){
                if(currentPanel.is(":last-child"))
                  nextPanel = panels.first();
                else
                  nextPanel = currentPanel.next();
              }
              else if(nextPanel == "prev"){
                if(currentPanel.is(":first-child"))
                  nextPanel = panels.last();
                else
                  nextPanel = currentPanel.prev();
              }
              else if(nextPanel.hasClass("PANEL-showing"))
                  return;
              currentPanel.removeClass("PANEL-showing");
              
               panels.fadeOut(time);
               nextPanel.fadeIn(time);
        
               currentPanel = nextPanel;
               currentPanel.addClass("PANEL-showing");
               if(AUTO)
                 timer = setTimeout(function(){animate("next")},options.timeOut);
            }
            if(AUTO)
              timer = setTimeout(function(){animate("next")},options.timeOut);
		});
        
	}
})(jQuery);