finnaly created a carousel

front-ui/app/components/items/itemMultiMediaDescriptions.js

@@ -15,9 +15,6 @@ var ItemMultimediaDescriptions = React.createClass({
         );
     }
 
-    //getInitialState: function () {
-			//return { descriptions: [] }; 
-	//}
 });
 
 

front-ui/app/components/items/itemWithDetailsPage.js

@@ -1,8 +1,8 @@
 var React = require('react'),
-    ItemMultiMediaDescriptions = require('./itemMultiMediaDescriptions'),
-    ItemActions = require('../../actions/itemActions'),
-    NavigationStore = require('../../stores/NavigationStore'),
-    ItemStore = require('../../stores/itemStore');
+    Carousel = require('../shared/carousel'),
+    ItemDetailsActions = require('../../actions/itemDetailsActions'),
+    NavigationStore = require('../../stores/navigationStore'),
+    ItemDetailsStore = require('../../stores/itemDetailsStore');
 
 var Router = require('react-router');
 
@@ -13,47 +13,59 @@ var ItemWithDetailsPage = React.createClass({
 
       return (
 
-
-        <div className="item-with-details row-fluid center">
-        <div className="span3">
-
+        
+<div className="item-with-details row-fluid center">
+    <div className="span3">
         <h3> {this.state.item.get('name')} </h3>
         <div>
-
-        <div className='h4'> {this.state.item.get('list_price')} KM</div>
-        <div> {this.state.item.get('description')}</div>
+            <div className='h4'> {this.state.item.get('list_price')} KM</div>
+            <div> {this.state.item.get('description')}</div>
         </div>
-        <ItemMultiMediaDescriptions descriptions={this.state.item.get('multi_media_descriptions')} />
-        </div>
-        <div className="span4">
+        <Carousel images={this.state.images}
+                  selected={this.state.currentImage}
+                  onClickLeft={this.onClickLeft}
+                  onClickRight={this.onClickRight}
+                  onSelectImage={this.onSelectImage} />
+    </div>
+    <div className="span4">
         quantitative descriptions
         </div>
-        </div>
-        ) ;       
+</div>
+        );       
 
     },
 
     // Add change listeners to stores
     componentDidMount: function() {
-      ItemStore.addChangeListener(this._onChange);
+      ItemDetailsStore.addChangeListener(this._onChange);
       NavigationStore.addChangeListener(this._onChange);
-      ItemActions.loadItemWithDetails();
+      ItemDetailsActions.loadItemWithDetails();
     },
 
+
+    onClickLeft: function() {
+      ItemDetailsActions.previousCarouselImage();
+    
+  },
+
+    onClickRight: function() {
+      ItemDetailsActions.nextCarouselImage();
+   },
+
+   onSelectImage: function(i) {
+    ItemDetailsActions.selectCarouselImage(i);
+   },
+
     _onChange: function () {
 
          if (this.isMounted()) {
-             this.setState({
-                item: ItemStore.getLoadedItemWithDetails()
-            });
+             this.setState(ItemDetailsStore.getState());
         }
 
     },
 
     getInitialState: function () {
-      return { 
-        item : ItemStore.getLoadedItemWithDetails()
-      }; 
+      return ItemDetailsStore.getState();
     }
 
 });

front-ui/app/components/shared/carousel.js

@@ -0,0 +1,51 @@
+var React = require("react");
+
+var Carousel = React.createClass({
+  propTypes: {
+    images: React.PropTypes.array.isRequired,
+    selected: React.PropTypes.number.isRequired,
+    onClickLeft: React.PropTypes.func.isRequired,
+    onClickRight: React.PropTypes.func.isRequired,
+    onSelectImage: React.PropTypes.func.isRequired
+  },
+
+  render: function() {
+    var left = this.props.selected * 300 * -1,
+        ulStyle = {
+          width: this.props.images.length * 300,
+          "-ms-transform": "translate(" + left + "px,0px)",
+          "-webkit-transform": "translate(" + left + "px,0px)",
+          transform: "translate(" + left + "px,0px)"
+        };
+
+    return (
+      <div>
+        <span className="arrow left"
+              onClick={this.props.onClickLeft}>&#x25C4;</span>
+        <div className="carousel-stage">
+          <ul style={ulStyle} className="carousel-list">
+            {this.props.images.map(function(image, i) {
+              return <li key={i}><img src={image} /></li>;
+            })}
+          </ul>
+          <ul className="dots">
+            {this.props.images.map(function(image, i) {
+              var activeClass = i === this.props.selected ? "active" : "";
+              return <li key={i}
+                         className={"circle " + activeClass}
+                         onClick={this.onClickDot.bind(this, i)}></li>;
+            }.bind(this))}
+          </ul>
+        </div>
+        <span className="arrow right"
+              onClick={this.props.onClickRight}>&#x25BA;</span>
+      </div>
+    )
+  },
+
+  onClickDot: function(index) {
+    this.props.onSelectImage(index);
+  }
+});
+
+module.exports = Carousel;